将多个可配置的产品转换为复选框

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

我的问题是如何转换两个选择框，然后将其更像结构之类的表？

我不是在寻找确切的代码，更多只是关于如何采用属性收集并以所需格式输出的想法

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>