Преобразование нескольких настраиваемых полей выбора продукта в флажок

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

Мой вопрос в том, как преобразовать два выбранных коробки и сделать вместо этого более похожую на таблицу структуру?

Я не ищу точный код, скорее просто идею о том, как взять коллекцию атрибутов и вывести ее в нужном формате

1

javascript configurable-product

Author: Marty Wallace, 2013-06-24

Source

1 answers

score 3 · Accepted Answer

Общая рекомендация по изменению стиля настраиваемых параметров (особенно тех, которые являются сводными атрибутами, которые обычно должны иметь тип Global/Раскрывающийся список) следует за таким рабочим процессом:

Используйте 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>