#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]