#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.
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
-
http://www.prestarocket.com/ Prestarocket
-
Sksushi
-
http://www.prestarocket.com/ Prestarocket
-
Sksushi
-
http://www.prestarocket.com/ Prestarocket
-
http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34
-
http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34
-
http://pulse.yahoo.com/_WUYHWW4RH2JQHNSNVYU3L23WXU aem34
-
Seb Dcx
-
http://www.prestarocket.com/ Prestarocket
-
-
-
Sksushi
-
-
-
Boutique Provence
-
http://www.prestarocket.com/ Prestarocket
-
-
Boutique Provence
-
KarlDupont