Hello everyone,
We have attempted to change the Variant dropdown into radio inputs so that we could implement the design that we wanted for our product page. I have managed to change it into radio inputs, but as I switch between the variant option, the price does not change and add to cart button does not add the right product to the shopping cart. I feel there is a JavaScript issue since I did not change the Liquid code that much.
Our product page: https://chaseyourdrinks.com/products/copy-of-chase-cola
password: spnkz1234!
Here is the original version of my product-template:
<div class="product__price">
{% include 'product-price-internal', variant: current_variant %}
</div>
{% if section.settings.show_quantity_selector %}
<div id="error-quantity-{{ section.id }}" class="form-message form-message--error product__quantity-error hide" tabindex="-1">
{% include 'icon-error' %} {{ 'products.product.quantity_minimum_message' | t }}
</div>
{% endif %}
{% capture "form_classes" -%}
product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
{%- endcapture %}
{% form 'product', product, data-productid: product.id, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<select name="id" data-productid="{{ product.id }}" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% render 'th-subscription', product: product %}
{% if section.settings.show_quantity_selector %}
<div style="margin-right:50%" class="product-form__item product-form__item--quantity">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
</div>
{% endif %}
{% render 'bsub-widget' %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
And this one is the one I implemented into my custom template:
<div class="product___Variant-selector">
{% form 'product', product, data-productid: product.id, class:form_classes, novalidate: 'novalidate' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<form name="id" data-productid="{{ product.id }}" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js custom__product-form__variants">
{% for variant in product.variants %}
{% if variant.available %}
<input class="variant-input" type="radio" id="{{ variant.id }}" name="variants" {% if variant == product.selected_or_first_available_variant %}checked="checked" {% endif %} value="{{ variant.id }}" >
<label for="{{ variant.id }}" class="variant-label" >{{ variant.title }} </label>
{% else %}
<input disabled="disabled">
<label for="variant">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</label>
{% endif %}
{% endfor %}
</form>
{% endfor %}
{% endunless %}
{% endform %}
</div>
Could someone help me to solve this issue? I searched in a lot but it does not seem to be fixable for me so far.
Any reply would be appreciated.
Thanks.
