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 :

  
{if isset($groups)}
  
<!&#8211; attributes &#8211;>
  
<div id=&#8221;attributes&#8221;>{foreach from=$groups key=id\_attribute\_group item=group}
  
{if $group.attributes|@count}

<label for=&#8221;group\_{$id\_attribute_group|intval}&#8221;>{$group.name|escape:'htmlall':'UTF-8&#8242;} :</label>
  
{assign var=&#8221;groupName&#8221; value=&#8221;group\_$id\_attribute_group&#8221;}
  
<select name=&#8221;{$groupName}&#8221; onchange=&#8221;javascript:findCombination();{if $colors|@count > 0}$(&#8216;#wrapResetImages').show(&#8216;slow');{/if};&#8221;> {foreach from=$group.attributes key=id\_attribute item=group\_attribute}</select> <select name=&#8221;{$groupName}&#8221; onchange=&#8221;javascript:findCombination();{if $colors|@count > 0}$(&#8216;#wrapResetImages').show(&#8216;slow');{/if};&#8221;> <option title=&#8221;{$group\_attribute|escape:'htmlall':'UTF-8&#8242;}&#8221; selected=&#8221;selected&#8221; value=&#8221;{$id\_attribute|intval}&#8221;>{$group_attribute|escape:'htmlall':'UTF-8&#8242;}</option></select> <select name=&#8221;{$groupName}&#8221; onchange=&#8221;javascript:findCombination();{if $colors|@count > 0}$(&#8216;#wrapResetImages').show(&#8216;slow');{/if};&#8221;> {/foreach}</select>
  
{/if}
  
{/foreach}</div>
  
{/if}

Par :

  
{if isset($groups)}
  
<!&#8211; attributes &#8211;>
  
<div id=&#8221;attributes&#8221;>{foreach from=$groups key=id\_attribute\_group item=group}
  
{if $group.attributes|@count}
  
<div id=&#8221;group\_attributes\_{$id\_attribute\_group|intval}&#8221; class=&#8221;group\_attributes&#8221;><span class=&#8221;group\_title\_{$id\_attribute\_group|intval} group\_title_attr&#8221;>{$group.name|escape:'htmlall':'UTF-8&#8242;} :</span>
  
{assign var=&#8221;groupName&#8221; value=&#8221;group\_$id\_attribute_group&#8221;}
  
{foreach from=$group.attributes key=id\_attribute item=group\_attribute}
  
<div id=&#8221;group\_{$id\_attribute\_group|intval}\_{$id\_attribute|intval}&#8221; class=&#8221;attr\_select\_radio&#8221;><input title=&#8221;{$group\_attribute|escape:'htmlall':'UTF-8&#8242;}&#8221; type=&#8221;radio&#8221; name=&#8221;{$groupName}&#8221; value=&#8221;{$id_attribute|intval}&#8221; checked=&#8221;checked&#8221; onclick=&#8221;javascript:findCombination();{if $colors|@count > 0}$(&#8216;#wrapResetImages').show(&#8216;slow');{/if};&#8221; />
  
<label class=&#8221;attr\_{$id\_attribute|intval}&#8221; for=&#8221;attr\_{$id\_attribute|intval}&#8221;>
  
{$group_attribute|escape:'htmlall':'UTF-8&#8242;}
  
</label></div>
  
{/foreach}</div>
  
<!&#8211; End div group_attributes &#8211;>
  
{/if}
  
{/foreach}</div>
  
{/if}
  

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 :

  
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());
  
});
  

Par :

  
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());
  
});
  

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 :

  
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();
  
}
  

par :

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();
  
}