Problème d'affichage des déclinaisons sur les catégories

[menahemroumani]

Bonjour,

La boutique sur laquelle je travaille possède des produits avec des variantes différentes (comme des couleurs et contenance) et je souhaite pouvoir les afficher dans les pages de catégories.

Dans mon code actuel, j'ai ajouté un 'include' de plusieurs fichiers pour avoir le bloc déclinaison, le bloc quantité et le bloc des boutons d'ajout. Ce sont les blocs qui sont appelés dans les pages produits.

En résultat, j'obtiens les blocs quantité et bouton d'ajout qui fonctionnent très bien mais le bloc déclinaison ne s'affiche pas impossible de savoir pourquoi et comment le faire afficher.

Voici le code des produits en liste:

// cette div permet d'afficher un bloc d'achat rapide au survol de la souris sur l'image

        <div class="buttons-action axps-buttons-tootip-left">
            {if !$configuration.is_catalog && $product.add_to_cart_url && ($product.quantity > 0 || $product.allow_oosp)}
            <div class="product-information">
                <div class="product-actions js-product-actions">
                    {block name='product_buy'}
                        <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                            <input type="hidden" name="token" value="{$static_token}">
                            <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                            <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id" class="js-product-customization-id">

// à cet endroit je fais appel au bloc des déclinaisons (et c'est lui qui ne s'affiche pas)
                            {block name='product_variants'}
                                {include file='catalog/_partials/product-variants.tpl'}
                            {/block}

// à cet endroit je fais appel au bloc des quantités et des boutons d'ajout au panier
                            {block name='product_add_to_cart'}
                                {include file='catalog/_partials/product-add-to-cart.tpl'}
                            {/block}
                            {block name='product_refresh'}{/block}
                        </form>
                    {/block}
                </div>
            </div>    
            {/if}
        </div>

Et voici le code du fichier des blocs de déclinaisons:

<div class="product-variants js-product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
      {if !empty($group.attributes)}
        <div class="product-variants-item type_{$group.group_type}">
          <span class="control-label">{$group.name}</span>
          {if $group.group_type == 'select'}
            <div class="select-container">
                <select
                  id="group_{$id_attribute_group}"
                  aria-label="{$group.name}"
                  class="form-control"        
                  data-product-attribute="{$id_attribute_group}"
                  name="group[{$id_attribute_group}]">
                  {foreach from=$group.attributes key=id_attribute item=group_attribute}
                    <option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
                  {/foreach}
                </select>
            </div>
          {elseif $group.group_type == 'color'}
            <ul id="group_{$id_attribute_group}">
              {foreach from=$group.attributes key=id_attribute item=group_attribute}
                <li class="input-container">
                  <label aria-label="{$group_attribute.name}">
                  <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                  <span {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})"{elseif $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}"{/if}>                  
                   <span class="corlor-tooltip">
                        <span class="bg-tooltip" {if $group_attribute.texture} style="background-image: url({$group_attribute.texture})"{elseif $group_attribute.html_color_code} style="background-color: {$group_attribute.html_color_code}"{/if}></span>
                        <span class="name-tooltip">{$group_attribute.name}</span>
                   </span>
                  </span>
                  </label>
                </li>
              {/foreach}
            </ul>
          {elseif $group.group_type == 'radio'}
            <ul id="group_{$id_attribute_group}">
              {foreach from=$group.attributes key=id_attribute item=group_attribute}
                <li class="input-container">
                  <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} checked="checked"{/if}>
                  <span class="radio-label">{$group_attribute.name}</span>
                </li>
              {/foreach}
            </ul>
          {/if}
        </div>
    {/if}
  {/foreach}
</div>

Petite précision: la div (product-variants js-product-variants) s'affiche bien dans la console du navigateur mais elle est vide.

Pouvez-vous m'aider svp ?

Merci par avance 😊

[solsol69]

Bonjour

Il y a 2 heures, menahemroumani a dit :

je souhaite pouvoir les afficher dans les pages de catégories.

Peut être avec ce module

https://www.sunnytoo.com/28109/show-product-attributes-product-listing-pages-homepage-free-prestashop-1-7-module

ou

Celui ci

https://www.sunnytoo.com/product/quick-buy-module-for-prestashop-1-7-display-attributes-on-the-category-page-and-homepage

Edited May 1, 2023 by solsol69 (see edit history)

[menahemroumani]

43 minutes ago, solsol69 said:

Bonjour

Peut être avec ce module

https://www.sunnytoo.com/28109/show-product-attributes-product-listing-pages-homepage-free-prestashop-1-7-module

Bonjour et merci de votre retour,

je possède déjà un module de ce style ( https://addons.prestashop.com/en/combinaisons-customization/31071-show-combinations-or-product-attributes-in-product-list.html ) mais il affiche le bloc en dessous l'image produit seulement car il est greffé sur le hook "displayProductPriceBlock" et je souhaite l'afficher par dessus l'image au survol. 

Pouvez vous me dire si il y a une possibilité de le faire avec le code mentionné plus haut ? 

merci encore

[solsol69]

Franchement j'en ai aucune idée, le plus simple serait de demandé directement a l'auteur du module .

[menahemroumani]

J'ai trouvé la source du problème. On ne peut pas faire appel à ce même code déjà présent sur les pages produits car ça crée un conflit. Et sachant que les produits apparaissent en accessoires ou produits de même catégorie dans les pages produits il se produit ce conflit en question.

Donc pour faire afficher un bloc déclinaison sur les catégories, il faut ajouter un autre code que j'essaie de mettre.

En revanche, mon template inclut déjà un bloc déclinaison sur les catégories mais seulement pour les déclinaisons couleurs qu'il affiche sous forme de pilule (swatch) et je ne sais pas quelle fonction ajouter pour faire afficher les autres déclinaisons en liste déroulantes.