Debut Theme Changing Variant Option from Select to Radio Buttons

batulkr
Excursionist
33 1 1

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.

0 Likes