#Prestashop : Changer la sélection des attributs par des boutons radio dans la page produit

Dans la page produit Prestashop, si un produit a des déclinaisons, leur sélection se fait par une select liste.
Voici la méthode pour transformer votre select liste par des boutons radio.

DEMO LIVE

1.Modification de product.tpl dans votre thème Prestashop :

Remplacer les lignes suivantes :

[php]
{if isset($groups)}
<!– attributes –>
<div id=”attributes”>{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}

<label for=”group_{$id_attribute_group|intval}”>{$group.name|escape:’htmlall':’UTF-8′} :</label>
{assign var=”groupName” value=”group_$id_attribute_group”}
<select name=”{$groupName}” onchange=”javascript:findCombination();{if $colors|@count > 0}$(‘#wrapResetImages’).show(‘slow’);{/if};”> {foreach from=$group.attributes key=id_attribute item=group_attribute}</select> <select name=”{$groupName}” onchange=”javascript:findCombination();{if $colors|@count > 0}$(‘#wrapResetImages’).show(‘slow’);{/if};”> <option title=”{$group_attribute|escape:’htmlall':’UTF-8′}” selected=”selected” value=”{$id_attribute|intval}”>{$group_attribute|escape:’htmlall':’UTF-8′}</option></select> <select name=”{$groupName}” onchange=”javascript:findCombination();{if $colors|@count > 0}$(‘#wrapResetImages’).show(‘slow’);{/if};”> {/foreach}</select>
{/if}
{/foreach}</div>
{/if}

[/php]

Par :

[php]
{if isset($groups)}
<!– attributes –>
<div id=”attributes”>{foreach from=$groups key=id_attribute_group item=group}
{if $group.attributes|@count}
<div id=”group_attributes_{$id_attribute_group|intval}” class=”group_attributes”><span class=”group_title_{$id_attribute_group|intval} group_title_attr”>{$group.name|escape:’htmlall':’UTF-8′} :</span>
{assign var=”groupName” value=”group_$id_attribute_group”}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<div id=”group_{$id_attribute_group|intval}_{$id_attribute|intval}” class=”attr_select_radio”><input title=”{$group_attribute|escape:’htmlall':’UTF-8′}” type=”radio” name=”{$groupName}” value=”{$id_attribute|intval}” checked=”checked” onclick=”javascript:findCombination();{if $colors|@count > 0}$(‘#wrapResetImages’).show(‘slow’);{/if};” />
<label class=”attr_{$id_attribute|intval}” for=”attr_{$id_attribute|intval}”>
{$group_attribute|escape:’htmlall':’UTF-8′}
</label></div>
{/foreach}</div>
<!– End div group_attributes –>
{/if}
{/foreach}</div>
{/if}
[/php]

2.Modifications de product.js dans votre thème Prestashop :
Ce fichier se trouve dans le dossier js de votre thème Prestashop.
A la ligne 78 (pour la version 1.4.6 de Prestashop), remplacer la ligne suivante de la fonction findCombination :

[code lang="js" firstline="72" highlight="78"]
function findCombination(firstTime)
{
$('#minimal_quantity_wanted_p').fadeOut();
$('#quantity_wanted').val(1);
//create a temporary 'choice' array containing the choices of the customer
var choice = new Array();
$('div#attributes select').each(function(){
choice.push($(this).val());
});
[/code]

Par :

[code lang="js" firstline="72" highlight="78"]
function findCombination(firstTime)
{
$('#minimal_quantity_wanted_p').fadeOut();
$('#quantity_wanted').val(1);
//create a temporary 'choice' array containing the choices of the customer
var choice = new Array();
$('div#attributes input[type=radio]:checked').each(function(){
choice.push($(this).val());
});
[/code]

Ensuite, nous devons modifier la fonction updateColorSelect à la ligne 139 pour mettre à jour le bon bouton radio lorsque que le groupe d’attribut est du type couleur :

[code lang="js" firstline="138" highlight="148,149"]
function updateColorSelect(id_attribute)
{
if (id_attribute == 0)
{
refreshProductImages(0);
return ;
}
// Visual effect
$('#color_'+id_attribute).fadeTo('fast', 1, function(){ $(this).fadeTo('slow', 0, function(){ $(this).fadeTo('slow', 1, function(){}); }); });
// Attribute selection
$('#group_'+id_color_default+' option[value='+id_attribute+']').attr('selected', 'selected');
$('#group_'+id_color_default+' option[value!='+id_attribute+']').removeAttr('selected');
findCombination();
}
[/code]

par :

[code lang="js" firstline="138" highlight="148,149"]
function updateColorSelect(id_attribute)
{
if (id_attribute == 0)
{
refreshProductImages(0);
return ;
}
// Visual effect
$('#color_'+id_attribute).fadeTo('fast', 1, function(){ $(this).fadeTo('slow', 0, function(){ $(this).fadeTo('slow', 1, function(){}); }); });
// Attribute selection
$('#group_attributes_'+id_color_default+' input[value='+id_attribute+']').attr('checked', 'checked');
$('#group_attributes_'+id_color_default+' input[value!='+id_attribute+']').removeAttr('checked');
findCombination();
}
[/code]

  • Sksushi

    Bonjour,

    Nickel ton code, par contre j’ai un souci ca met Ce produit n’existe pas dans cette déclinaison. Vous pouvez néanmoins en sélectionner une autre.

    Il faut que je regenere tout?

    Merci de ta reponse

    • http://www.prestarocket.com/ Prestarocket

      Hello,

      tu as un lien pour voir ta boutique ?

      • Sksushi

        Non je bosse dessus en local pour l’instant c’est pour voir les capacités de prestashop ^^ 

        • http://www.prestarocket.com/ Prestarocket

          Hello,

          Malheureusement je ne suis pas dispo pendant quelques semaines, le temps de finaliser les thèmes Prestashop.

          • Sksushi

            C’est dommage, c’était pas un truc trop long juste quelques petites modifs ou aiguillage…
            Tu penses que tes thème serait prêts quand? Je serai peut être pret à t’acheter un theme du style de celui de photobay ^^

          • http://www.prestarocket.com/ Prestarocket

            Les thèmes Prestashop seront dispo d’ici 1 mois environ. Un peu de patience ;)

          • http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34

             bonjour,

            je serais également intéressé par un thème du style de photobay,
            étant donné que ça fait un mois ;)
            à votre avis dans combien de temps pourriez-vous mettre ces thèmes en vente svp ?

            merci !

          • http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34

             question subsidiaire svp :

            ces thèmes seront-ils déclinés pour prestashop 1.4 et 1.5 ?

            merci!

          • http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34

             encore un message :)
            d’ores et déjà pour prestashop 1.4 je serais très vivement intéressé par ce thème aussitôt que possible !

          • Seb Dcx

            je suis intéresser moi pour ses modification, veuillez me contacter et je vous dirait ce que je souhaite faire pour mes produits

            seb.dcxgmail.com
            http://www.modelizer.fr

          • http://www.prestarocket.com/ Prestarocket

            Bonjour Seb,

            Malheureusement je n’ai pas de dispo pour travailler sur des petits dev.++

      • Sksushi

        Si c’a t’interesse, je veux bien d’un coup de main en echange d’une petite remuneration bien sur.

  • Boutique Provence

    Attention pour une pleine compatibilité avec ie8 dans product.tpl remplacer onchange par onclick

    • http://www.prestarocket.com/ Prestarocket

      bien vu. J’ai corrigé le code.
      merci

  • Boutique Provence

    A tout hasard aurais tu une astuce pour rajouter le prix de la déclinaison à côté de {$group_attribute|escape:’htmlall':’UTF-8′} – “prix déclinaison”Merci d’avance.

  • KarlDupont

     Bonjour je suis à la recherche d’un module de déclinaisons comme celui de photobay … comment faire