Afficher le nom de la couleur - fiche produit

Kazuo · February 23, 2023

Bonjour,

Merci d'avance pour ceux qui pourront apporter de l'aide.

J'ai une boutique Prestashop 1.7.

Actuellement, sur les fiches produits, les attributs couleurs sont présentés sous forme de carré, le visiteur du site sélectionne la couleur qu'il souhaite en cliquant sur le carré correspondant.

Je voudrait simplement que le nom de la couleur sélectionnée, s'affiche juste en dessous du block où se trouve tous les carrés de couleur. Parce que actuellement, si le visiteur recherche une couleur par son nom, il ne peut pas vraiment au premier regard. Et lorsqu'il y a plus de 20 carrés, la recherche d'une couleur spécifique peut prendre trop de temps.

Donc le visiteur clique sur un carré de couleur pour voir le nom de la couleur affichée sous le block couleur.

J'espère avoir été assez clair.

Merci d'avance !

Edited February 23, 2023 by Kazuo (see edit history)

Prestachamps · February 23, 2023

Hi @Kazuo

Pour afficher le nom des attributs de couleur sous le bloc carré sur la page du produit, vous devez modifier le fichier product-variants.tpl (themes{your-theme}templatescatalog_partialsproduct-variants.tpl)

Vous trouverez ici le code suivant à la ligne (~) 45.

{elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="float-xs-left 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="attribute-name sr-only">{$group_attribute.name}</span></span>
              </label>
            </li>
          {/foreach}
        </ul>

Vous devez apporter les modifications suivantes ici :

{elseif $group.group_type == 'color'}
        <ul id="group_{$id_attribute_group}">
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            <li class="float-xs-left input-container">
              <label aria-label="{$group_attribute.name}" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <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="margin-left: 0;margin-right: 0;background-image: url({$group_attribute.texture})"
                  {elseif $group_attribute.html_color_code}
                    class="color" style="margin-left: 0;margin-right: 0;background-color: {$group_attribute.html_color_code}"
                  {/if}
                ><span class="attribute-name sr-only">{$group_attribute.name}</span></span>
                <small class="attribute-name">{$group_attribute.name}</small>
              </label>
            </li>
          {/foreach}
        </ul>

J’espère que cela a du sens.

P.S. Avant de modifier le fichier, créez une sauvegarde de celui-ci.

Sinceres salutations,
Leo

Kazuo · February 23, 2023

Merci pour votre réponse.

Malheureusement, j'ai peut être mal formulé ma demande. Je souhaiterais que le nom de la couleur du carré que le visiteur a cliqué, s'affiche sous le block contenant tous les carrés.

Le visiteur clique sur un carré, et le nom de la couleur de ce carré s'affiche (entre le block carré de couleur et le block quantité), uniquement le nom de cette couleur cliquée, pas tous les noms de couleur comme dans votre solution.

Le nom de la couleur sélectionnée par le visiteur, s'affiche, uniquement celle ci.

Merci d'avance.

Edited February 23, 2023 by Kazuo (see edit history)

Prestachamps · February 23, 2023

Si vous souhaitez afficher uniquement le nom de l'option de couleur sélectionnée sous le bloc contenant tous les carrés, vous devez ajouter le code suivant presque tout en bas de product-variants.tpl, après {/foreach}

<div>
        {foreach from=$groups key=id_attribute_group item=group}
            {if !empty($group.attributes)}
                {if $group.group_type == 'color'}
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        {if $group_attribute.selected}
                            <span class="attribute-name">{$group_attribute.name}</span>
                        {/if}
                    {/foreach}
                {/if}
            {/if}
        {/foreach}
    </div>

Ainsi, après l'ajout du code, product-variants.tpl ressemble à ceci :

<div class="product-variants js-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}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          aria-label="{$group.name}"
          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="float-xs-left 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="attribute-name 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 float-xs-left">
              <label>
                <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>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
  
    <div>
        {foreach from=$groups key=id_attribute_group item=group}
            {if !empty($group.attributes)}
                {if $group.group_type == 'color'}
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        {if $group_attribute.selected}
                            <span class="attribute-name">{$group_attribute.name}</span>
                        {/if}
                    {/foreach}
                {/if}
            {/if}
        {/foreach}
    </div>
</div>

Mediacom87 · February 23, 2023

Bonjour,

de base le thème classic intègre cette fonction donc si vous souhaitez que cela s'affiche en dessous au lieu d'au-dessus comme dans le thème classic il suffit juste de déplacer le code correspondant à cet affichage.

      <span class="control-label">{$group.name}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>

Après à vous d'adapter cela à votre thème.

Kazuo · February 23, 2023

1 hour ago, Prestachamps said:

Si vous souhaitez afficher uniquement le nom de l'option de couleur sélectionnée sous le bloc contenant tous les carrés, vous devez ajouter le code suivant presque tout en bas de product-variants.tpl, après {/foreach}

<div>
        {foreach from=$groups key=id_attribute_group item=group}
            {if !empty($group.attributes)}
                {if $group.group_type == 'color'}
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        {if $group_attribute.selected}
                            <span class="attribute-name">{$group_attribute.name}</span>
                        {/if}
                    {/foreach}
                {/if}
            {/if}
        {/foreach}
    </div>

Ainsi, après l'ajout du code, product-variants.tpl ressemble à ceci :

<div class="product-variants js-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}{l s=': ' d='Shop.Theme.Catalog'}
          {foreach from=$group.attributes key=id_attribute item=group_attribute}
            {if $group_attribute.selected}{$group_attribute.name}{/if}
          {/foreach}
      </span>
      {if $group.group_type == 'select'}
        <select
          class="form-control form-control-select"
          id="group_{$id_attribute_group}"
          aria-label="{$group.name}"
          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="float-xs-left 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="attribute-name 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 float-xs-left">
              <label>
                <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>
              </label>
            </li>
          {/foreach}
        </ul>
      {/if}
    </div>
    {/if}
  {/foreach}
  
    <div>
        {foreach from=$groups key=id_attribute_group item=group}
            {if !empty($group.attributes)}
                {if $group.group_type == 'color'}
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        {if $group_attribute.selected}
                            <span class="attribute-name">{$group_attribute.name}</span>
                        {/if}
                    {/foreach}
                {/if}
            {/if}
        {/foreach}
    </div>
</div>

Parfait, ça fonctionne avec ce code, merci !

J'ai dû changer quelques lignes pour que le nom de la couleur n'apparaisse pas en double, ensuite j'ajouterai une class css pour que le nom couleur soit exactement au bon endroit.

<div class="product-variants js-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}{l s='' d='Shop.Theme.Catalog'}
{foreach from=$group.attributes key=id_attribute item=group_attribute}

{/foreach}
</span>
{if $group.group_type == 'select'}
<select
class="form-control form-control-select"
id="group_{$id_attribute_group}"
aria-label="{$group.name}"
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="float-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}" 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})" {/if}
{if $group_attribute.html_color_code}class="color" style="background-color: {$group_attribute.html_color_code}"{/if}
><span class="attribute-name 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 float-xs-left">
<label>
<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>
</label>
</li>
{/foreach}
</ul>
{/if}
</div>
{/if}
{/foreach}

<div>
{foreach from=$groups key=id_attribute_group item=group}
{if !empty($group.attributes)}
{if $group.group_type == 'color'}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{if $group_attribute.selected}
<span class="attribute-name">{$group_attribute.name}</span>
{/if}
{/foreach}
{/if}
{/if}
{/foreach}
</div>
</div>

samsamtop · October 24, 2023

Bonjour, quelqu'un svp peux me dire comment afficher le nom de la texture fiche produit

Sign In

Afficher le nom de la couleur - fiche produit

Recommended Posts

Kazuo

Link to comment

Share on other sites

Prestachamps

Link to comment

Share on other sites

Kazuo

Link to comment

Share on other sites

Prestachamps

Link to comment

Share on other sites

Mediacom87

Link to comment

Share on other sites

Kazuo

Link to comment

Share on other sites

samsamtop

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com