複数の構成可能な製品選択ボックスをチェックボックスに変換します

Question

2つの属性で構成可能な構成可能な製品を持っています。

product_type
product_size

デフォルトでは、Magentoはこれを2つの選択ボックスとして表示します。

これで問題ありません。

ただし、これを変更して、各タイプ/サイズオプションの代わりにラジオボタンを表示したいと思います。

たとえば、xは選択されたオプションを示しますダッシュは無線ボタンを示します

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

コードはテンプレートにあります：catalog/product/view/type/options/configurable.phtml

私の質問は、2つの選択したボックスを変換し、代わりに構造のようなこのテーブルを実行する方法です。

正確なコードを探していません。属性コレクションを取得し、必要な形式で出力する方法のアイデアだけです

Answer 1

構成可能なオプション（特にグローバル /ドロップダウンのタイプであることが必要なピボット属性であるオプションであるオプションを再スタイリングするための一般的な推奨事項は、この種のワークフローに従います。

• JavaScriptを使用して、CSSを介して元のフォーム要素を「非表示」します style: display: none
• 顧客に使用してもらいたいUXをより密接にモデル化する新しいフォーム要素を作成する
• 繰り返しますが、JavaScriptを使用して、新しいフォーム要素の更新を監視し、それに応じて非表示の（実際の）構成可能な要素を更新します

HTMLマークアップについては、他のテーブルと同じです。

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