Я отредактировал свой магазин, добавив кнопку «Добавить в корзину» и селектор вариантов на странице коллекции, и он работает. Но мой босс хочет еще одно изменение, как я могу изменить раскрывающийся список на селектор кнопок?
Моя кодовая форма
{% unless sold_out %}
<form action = "/cart/add" method = "post" enctype = "multipart/form-data" id = "product-form-{{ product.id }}" class = "product-form">
<div class = "add-to-cart__wrapper" style = "margin-top:0px; margin-bottom: 10px;">
<button type = "submit" name = "add" class = "btn btn--splash btn--full uppercase addToCart">
<span id = "AddToCartText">Add to Order</span>
</button>
</div>
{% if product.variants.size == 1 %}
<input type = "hidden" id = "variant-select" name = "id" value = "{{ product.variants.first.id }}" />
{% else %}
<div class = "selector-wrapper">
<select name = "id" id = "productSelect" class = "product-single__variants btn--full uppercase">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected = "selected" {% endif %} value = "{{ variant.id }}" data-sku = "{{ variant.sku }}">{{ variant.title }}</option>
{% else %}
<option disabled = "disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endif %}
</form>
{% endunless %}
Пожалуйста, порекомендуйте.
Спасибо!
Вы можете изменить элемент select на элемент переключателя и стилизовать переключатели как обычные кнопки. Этот шаблон довольно распространен, вам просто нужно убедиться, что ваша цель прослушивателя событий для выбора варианта такая же, как у вас сейчас.