Fiche produit, Affichage nuancier + liste déroulante

[Fenn]

Bonjour,

 

Depuis la version 1.5 de prestashop, il n'est plus possible dans les options d'afficher sur une fiche produit la sélection de déclinaison par nuancier ET liste déroulante, le tout synchroniser.

 

Pour des raisons pratique j'ai besoin des deux en simultané, le code du selecteur est tel quel dans product.tpl de prestashop 1.5:

 

<div class="attribute_list">
   {if ($group.group_type == 'select')}
	<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
	 {/foreach}
	</select>
   {elseif ($group.group_type == 'color')}
	<ul id="color_to_pick_list" class="clearfix">
	 {assign var="default_colorpicker" value=""}
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <li{if $group.default == $id_attribute} class="selected"{/if}>
	  <a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	   {if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
		<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
	   {/if}
	  </a>
	 </li>
	 {if ($group.default == $id_attribute)}
	  {$default_colorpicker = $id_attribute}
	 {/if}
	 {/foreach}
	</ul>
	<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
   {elseif ($group.group_type == 'radio')}
	{foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	 {$group_attribute|escape:'htmlall':'UTF-8'}<br/>
	{/foreach}
   {/if}
   </div>

 

J'ai copier le code de la liste déroulante en dessous de celui du nuancier:

 

<div class="attribute_list">
   {if ($group.group_type == 'select')}
	<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
	 {/foreach}
	</select>
   {elseif ($group.group_type == 'color')}
	<ul id="color_to_pick_list" class="clearfix">
	 {assign var="default_colorpicker" value=""}
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <li{if $group.default == $id_attribute} class="selected"{/if}>
	  <a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	   {if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
		<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
	   {/if}
	  </a>
	 </li>
	 {if ($group.default == $id_attribute)}
	  {$default_colorpicker = $id_attribute}
	 {/if}
	 {/foreach}
	</ul>



   <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
	 {foreach from=$group.attributes key=id_attribute item=group_attribute}
	  <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
	 {/foreach}
	</select>




	<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
   {elseif ($group.group_type == 'radio')}
	{foreach from=$group.attributes key=id_attribute item=group_attribute}
	 <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
	 {$group_attribute|escape:'htmlall':'UTF-8'}<br/>
	{/foreach}
   {/if}
   </div>

 

(La partie que j'ai bien espacer pour la lisibilité)

 

Je sais que je chauffe, le nuancier et la liste déroulante sont tout les deux afficher et plus ou moins synchroniser:

 

 

Mais dès que je sélectionne une teinte il y a une sorte de double sélection, 2 déclinaisons sont appeler dans l'url, ainsi que 2 teintes sont en surbrillance dans le nuancier:

 

 

L'un des sélecteurs reste donc toujours bloquer sur une déclinaison précédemment choisie.

 

Merci

[Fenn]

Un message pour faire remonter le topic sur la première page

[Ostracisme]

Comme je suis dans le meme cas que toi voila ce que j'ai fait:

 

<!--nuancier-->
<div id="attributes">
{if isset($colors) && $colors}
<!-- colors -->
<div id="color_picker">
<p>{l s='Pick a color:' js=1}</p>
<div class="clear"></div>
{foreach from=$groups key=id_attribute_group item=group}
{if ($group.group_type == 'color')}
<ul id="color_to_pick_list">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
<a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="20" height="20" /><br>
{/if}
</a>
</li>
{if ($group.default == $id_attribute)}
{$default_colorpicker = $id_attribute}
{/if}
{/foreach}
</ul>
<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
{/if}
{/foreach}
</div>
{/if}

<!--Listes-->
{if isset($groups)}	 
{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<p>
<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var="groupName" value="group_$id_attribute_group"}
<div class="attribute_list">
{if ($group.group_type == 'select')}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
{elseif ($group.group_type == 'color')}
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
<input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
{elseif ($group.group_type == 'radio')}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
{$group_attribute|escape:'htmlall':'UTF-8'}<br/>
{/foreach}
{/if}
</div>
</p>
{/if}
{/foreach}
{/if}
</div>

 

Par contre ma liste de couleur ne se synchronise pas avec mon nuancier...

A nous deux on va peut etre reussir à faire quelque chose sait on jamais.

[Fenn]

Bonjour,

 

Honnêtement je ne sais pas trop comment faire évoluer la situation, surtout que là, la partie du code que tu as modifier n'est pas du tout la même que moi, et pourtant nous avons plus ou moins me même résultat. Ce que je peu noter en plus avec ton code, c'est l'apparition de 4 "li" qui sortent de nul part, et ont retrouve dans l'url tout les noms des déclinaisons au lieu de seulement 2.

Je pense que pour régler le problème il faudrait trouver les 2 fonctions qui font appel à l'url de la déclinaison dans mon code et faire une "boucle" entre les 2 sélecteurs afin qu'il ne se marchent pas dessus.

 

Je parle avec mes mots, désolé si je suis incompréhensible mais ce code ressemble à du chinois traduit sur google trad pour moi, très flou donc.

[Ostracisme]

Pour ma part je suis revenu en arrière.

J'ai créer en BO un attribut Couleurs pour les vignettes de couleur et un attribut Couleur pour la liste de couleur correspondante a la vignette "cliquable" et j'ai essayé d'attribuer les 2 attributs a un produit pour voir ce que cela donnais.

Malheureusement les 2 listes ne se synchronisent toujours pas puisque considérées comme 2 attributs séparés.

 

De plus je me suis aperçu que dans ton cas d'une part c'est un popup qui s'ouvre pour la select ion des couleurs ce qui ne va pas nous aider puisque moi c'est la gestion des couleurs de base dans prestashop.

 

Et pour finir comme ma boutique fais des produits avec des couleurs ET des tailles j'aurais 2 attributs couleurs et 1 attribut taille à gérer ce qui ne fait pas avancer le schmilblik mais qui a le mérite d'éclaircir les choses.

 

Si quelqu'un passe par la un jour et vois nos messages qu'il n’hésite pas à poster.

[baselunaire]

Bonjour à tous,

Je serai bien preneuse d'une solution, car, comme vous,

impossible de se contenter d'une liste déroulante OU d'une sélection de mini carrés, il me faut vraiment les deux.

 

Ca m'ennuierai de devoir tout repasser en version 1.4 de prestashop pour ça, c'est bizarre cette évolution rétrograde... !?

[Ostracisme]

Malheureusement pour ma part je n'ai toujours pas trouver de solution et ai dut revenir a la version de base avec juste le nuancier...

Quand aux évolutions "rétrogrades" elles sont légion depuis la version 1.5.2..... m'enfin on va pas se plaindre il y a aussi des évolutions qui valent le coup.

[mica94]

Bonjour,

je me permets de faire remonter ce topic car moi je n'arrive plus a afficher le nuancier !

Seule la liste s'affiche.

Je ne veux pas afficher les 2 mais uniquement le nuancier.

 

Je suis en 1.5.4

 

Y a t il une option dans le back office ?

 

Merci

[Micke21]

Bonjour,

je remonte le topic car je ne trouve pas la solution.

est ce que quelqu'un à une idée ?

 

Merci

[patrmich]

Bonjour,

 

Je suis aussi intéressé par une solution...

 

Merci

[stickerz.fr]

Bonjour,

 

Je relance la demande, chez la Prestateam, est il possible d'avoir comme auparavant, les couleurs et la liste déroulante ensemble ?

 

Merci de votre aide.

 

Cordialement

Sylvain

[snipgot]

Bonjour,

quelqu'un a t'il fait évoluer ce problème ?

[ali1985]

Bonjour,

 

Je relance la demande, chez la Prestateam, est il possible d'avoir comme auparavant, les couleurs et la liste déroulante ensemble ?

 

Merci de votre aide.

 

Cordialement

Sylvain

Bonjour, 

 

avez vous trouver une solution pour remédié au problème de la liste des couleurs??

 

Merci 

 

Merci

[PECHECERISE]

BONJOUR  c est exactement ce que je cherche a faire en ce moment en 2019 sur mon prestashop 1.7

il n y a que les carrés de couleur , et rien d autre, ni le nom de la couleur au survol, ni une liste deroulante synchronisée sur la couleur cliquée dans les carrés. du coup le client ne sait pas quelle couleur il choisit ! 

c est un probleme trop important.

quelqu un a une idee? pour remettre la liste deroulante synchronisée au nuancier?! 

mercii

[PECHECERISE]

ou alors un label avec le nom de la couleur affichée? genre "couleur choisie: rouge" 

[cyssoo]

Pour positionner la couleur en plus d'un menu déroulant, le tout synchronisé, il faudrait passer par un child, et ajouter quelques lignes de JS.

Un peu comme sur cette page finalement :

https://www.shirt-tee-shirt.fr/393-10973-tee-shirt-sporty-tt-men.html#/21-couleur-noir/32-taille-s

Le fichier à modifier est donc /httpdocs/themes/theme-child/templates/catalog/_partials/product-variants.tpl, dans la condition {elseif $group.group_type == 'color'}

Code en place (notez le <p class="col-xs-12">{$group_attribute.name}</p>)

        <ul id="group_{$id_attribute_group}" class="clearfix li_fl">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container">
              <p class="col-xs-12">{$group_attribute.name}</p>
              <input onclick="javascript:setColorSelect({$id_attribute_group}, {$id_attribute})" class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}/>
              <span class="color {if $group_attribute.texture}texture{/if}"
                {if $group_attribute.html_color_code} style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture} style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</span></span>
              <span class="st-input-loading"><i class="fto-spin5 animate-spin"></i></span>
            </li>
          {/foreach}
        </ul>

Par contre, y'a trois posts sur le fofo qui parlent de la même chose et qui se courent après.

Il serait préférable de centraliser le tout sur un seul post

Edited April 25, 2019 by cyssoo
detailled (see edit history)

[PECHECERISE]

voila , l exemple sur le site, c est ce que faisait prestashop avant. 

en prestashop 1.4 c etait d office comme cela, 

le nuancier + la liste déroulante.

le client savait qu il avait bien selectionné la couleur voulue en lisant le nom dans la liste déroulante, 

 

bizarrement ce n est plus comme ça maintenant.

je pensais que c etait peut etre dû au thème que j ai acheté mais finalement ce n est pas ça car je constate que beaucoup d autres ont cherché une solution a ce probleme ,

depuis prestashop 1.5 parait il.

 

moi je suis sur 1.7

[PECHECERISE]

c est quoi un child

[cyssoo]

Un child theme (ou thème enfant) est un bon moyen de modifier votre thème tout en conservant les mises à jour notamment.

Vous pouvez trouver plus d'infos à ce sujet ici :

https://www.team-ever.com/prestashop-1-7-creer-un-theme-enfant-child-theme/

Cela a été introduit sur Prestashop 1.7, on ne peut pas faire ce genre de choses sur des versions inférieures. Sur la boutique citée plus haut, le thème "parent" est Panda, et il y a un thème enfant "panda-child", qui a justement permis de faire ce que vous pouvez voir au niveau des déclinaisons sur une fiche produit.

A voir sur ce site que seul le thème a été modifié sous-entend bien qu'en effet, ce genre de fonctionnalités provient du thème (HTML/CSS/JS/Smarty)

Edited April 25, 2019 by cyssoo (see edit history)

[PECHECERISE]

le theme enfant c est comme un theme pour tester? 

et si ça convient on l applique?

[cyssoo]

Pas exactement. Si votre thème est Classic, que vous désirez le mettre à jour sans perdre vos modifications (comme notamment celle citée plus haut), il faudra mettre en place un thème "enfant" de Classic.

Webbax a un tuto à ce sujet également :

https://www.webbax.ch/2018/05/09/prestashop-1-7-theme-enfant-ep-52/

En conséquence, si la modification fournie plus haut fonctionne sous Prestashop 1.7, il est évident que cela ne fonctionnera pas sur des versions inférieures.

Edited April 25, 2019 by cyssoo
300e post : THIS IS SPARTA ! (see edit history)

[cyssoo]

Bonjour @PECHECERISE

Repérez dans votre thème, dans le fichier product-variant.tpl la condition correspondant au test "{elseif $group.group_type == 'color'}"

Une fois cette condition repérée, vous devriez avoir des balises HTML ul li

Après la balise li, ajoutez simplement ceci : 

<p class="col-xs-12 evername">{$group_attribute.name}</p>

Ensuite, en CSS, ajoutez des règles sur .evername, cela vous permettra de réagencer le tout selon votre mise en page.

Pensez à vous documenter sur les thèmes enfants avec notamment les deux liens fournis plus haut

[cyssoo]

Et pour avoir à la fois la liste déroulante en plus des icônes de couleurs, c'est ce code (à adapter selon le thème que vous utilisez) :

      {elseif $group.group_type == 'color'}
        <!-- start Malek asking for both colors and dropdown -->
        <select
          class="form-control form-control-select form-control-select-colors"
          id="group_{$id_attribute_group}"
          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>
        <ul id="group_{$id_attribute_group}" class="clearfix li_fl">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="input-container">
              <p class="col-xs-12 evername">{$group_attribute.name}</p>
              <input onclick="javascript:setColorSelect({$id_attribute_group}, {$id_attribute})" class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}/>
              <span class="color {if $group_attribute.texture}texture{/if}"
                {if $group_attribute.html_color_code} style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture} style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</span></span>
              <span class="st-input-loading"><i class="fto-spin5 animate-spin"></i></span>
            </li>
          {/foreach}
        </ul>

En revanche, il faudra probablement du javascript en plus. Il faut donc connaître Smarty, HTML, CSS et Jquery pour réaliser cela, qui plus est sur un thème enfant pour faire les choses proprement. N'hésitez pas à demander à votre webdesigner ou votre développeur pour cela, c'est réalisable en une heure ou deux quand on connaît.

[PECHECERISE]

merci donc la premiere solution c est pour afficher le nom de la couleur au survol?

 

[PECHECERISE]

Je n ai pas le même code que vous : 

 

<div class="product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}</span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          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>
      {elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="pull-xs-left input-container">
           <label>
              <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
              <span
                {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</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 pull-xs-left">
            <label> 
              <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
              <span class="radio-label">{$group_attribute.name}</span>
           </label>
           </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>
 

Edited April 26, 2019 by PECHECERISE (see edit history)

[cyssoo]

C'est normal, cela dépend du thème utilisé, et le mien est par-dessus le marché modifié depuis un thème enfant.

ça devrait être cela je pense (mais ne connaissant pas votre thème, difficile de répondre après avoir testé) :

<div class="product-variants">
  {foreach from=$groups key=id_attribute_group item=group}
    {if !empty($group.attributes)}
    <div class="clearfix product-variants-item">
      <span class="control-label">{$group.name}</span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          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>
      {elseif $group.group_type == 'color'}
        <select
          class="form-control form-control-select form-control-select-colors"
          id="group_{$id_attribute_group}"
          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}>
              <span
                {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</span></span>
            {$group_attribute.name}
          </option>
          {/foreach}
        </select>
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="pull-xs-left input-container">
              <p class="col-xs-12 evername">{$group_attribute.name}</p>
           <label>
              <input class="input-color" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
              <span
                {if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}" {/if}
                {if $group_attribute.texture}class="color texture" style="background-image: url({$group_attribute.texture})" {/if}
              ><span class="sr-only">{$group_attribute.name}</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 pull-xs-left">
            <label> 
              <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
              <span class="radio-label">{$group_attribute.name}</span>
           </label>
           </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
</div>

Essayez aussi de mettre votre code lisible en utilisant l'icône <> dans l'éditeur du forum. Cela apporte beaucoup de lisibilité et aide à répondre.

Une fois de plus, il vous faudra ajouter du javascript et des CSS, ce qui dépend de la mise en page utilisée et des besoins, d'où le fait d'en parler à votre webdesigner ou votre développeur

Edited April 26, 2019 by cyssoo
code improvement (see edit history)

[cyssoo]

Voici comment ajouter du code dans un message sur le forum (j'avais oublié de joindre la capture d'écran)

Edited April 26, 2019 by cyssoo
quote useless (see edit history)

[cyssoo]

Et ce code JS devrait peut-être passer pour synchroniser le dropdown et les select de couleurs :

$(document).ready(function(){
    var id_product = $('input#product_page_product_id').val();
    if (id_product) {
        console.log(id_product);
        var id_color_selected = $('.input-color:checked').val();

        $('#'+id_product+'_'+id_color_selected).trigger( "click" );

        $('.input-color').click(function(){
            var id_color_updated = $(this).val();
            console.log($(this).val());
            $('.product-variants #group_1 option[value="'+id_color_updated+'"]').prop('selected', true);
            $('input.Couleur').removeAttr('checked');
            $('#'+id_product+'_'+id_color_updated).trigger( "click" );
        });
    }
});

Il est un peu plus complet que prévu car il influe également sur un module de choix de déclinaisons, non natif de Prestashop. A adapter donc.

Edited April 26, 2019 by cyssoo (see edit history)