Convertir plusieurs boîtes de sélection de produits configurables à la case

Question

I ai un produit configurable qui est configurable par 2 caractéristiques:

product_type
product_size

Par défaut, magento affiche ce que deux boîtes de sélection.

Ceci est très bien.

Cependant, je voudrais changer cette option pour afficher les boutons radio à la place pour chaque option de type / taille.

Par exemple, le x indique une option sélectionnée les tirets indiquent les boutons radio

                     small  medium  large  x-large
short-sleeved          -       -      -      -     
long-sleeved           -       x      -      -

Le code est dans le modèle: catalog/product/view/type/options/configurable.phtml

Ma question est de savoir comment convertir les deux boîtes de sélection et le faire plus table comme la structure à la place?

Im ne cherche pas pour le code exact, plus juste une idée de la façon de prendre la collection d'attributs et de sortie dans le format nécessaire

Answer 1

The general recommendation to re-styling the configurable options (especially those that are the pivot attributes which are generally required to be of type Global / Dropdown) follows this sort of a workflow:

• Use Javascript to "hide" the original form elements via CSS style: display: none
• Create new form elements that more closely model the UX that you want your customer to use
• Again, with Javascript, monitor the update of the new form elements and update the hidden (real) configurable elements accordingly

As for HTML markup - it's the same as any other table:

<table>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">small</th>
            <th scope="col">medium</th>
            <th scope="col">large</th>
            <th scope="col">xlarge</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
        <tr class="row">
            <th scope="row">Red</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="red-small" name="red"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="red-medium" name="red"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="red-large" name="red"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="red-xlarge" name="red"></td>
        </tr>
        <tr class="row">
            <th scope="row">Blue</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="blue-small" name="blue"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="blue-medium" name="blue"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="blue-large" name="blue"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="blue-xlarge" name="blue"></td>
        </tr>
        <tr class="row">
            <th scope="row">Green</th>
            <td class="cell"><label for="small">small</label><input type="radio" value="green-small" name="green"></td>
            <td class="cell"><label for="medium">medium</label><input type="radio" value="green-medium" name="green"></td>
            <td class="cell"><label for="large">large</label><input type="radio" value="green-large" name="green"></td>
            <td class="cell"><label for="xlarge">xlarge</label><input type="radio" value="green-xlarge" name="green"></td>
        </tr>
    </tbody>
</table>