**Prestashop** - How to modify the product attributes <select> into radio box?

Question

I would like to modify the way the product attributes looks like on my product page.

By default, the attributes are displayed with a html tag. I would like to display theses attributes with a html form and add description to my attributes.

What I tried so far is to modify the product.tpl file and I did the following change :

<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
                    {/foreach} </select>

into

<form name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                        <input type="radio" name="test" value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} checked="checked"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}
                    {/foreach} </form>

With this modification, it seems like the attributes are not linked anymore to the product because the following message is always displayed : "The following product is not available with this attribute...". So it does not work, as I cannot add the product to the cart anymore and the attributes does not impact the price anymore...

Do you have any clue about the way to make it works fine ? Do you know which files are linked to the product attributes ? Do I need to modify the AdminAttributes.php file ?

Thanks all for your help

Answer 1

in prestashop 1.4 you need to edit product.js. find findCombination function and edit.

$('div#attributes select').each(function(){
    choice.push($(this).val());
});

by:

$('div#attributes input[type=radio]:checked').each(function(){
    choice.push($(this).val());
});

in product.tpl you need to modify file

<ul>
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
    <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();" />
    <span>{$group_attribute|escape:'htmlall':'UTF-8'}</span>
</li>
{/foreach}
</ul>