Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Add Variant Image Source to radio input data attribute

Add Variant Image Source to radio input data attribute

cambox85
Visitor
1 0 0

I am trying to add the the image url as a data attribute so that I can use it for Java Script, however it the data it gives me is not the variant image url. In the below code you would be looking at where it says 'data-image-url', I would apprecaite any help.

 

 

 

 

 <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="product-form">
      {% unless product.has_only_default_variant %}
        {% for option in product.options_with_values %}
          <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          {% assign option_position = forloop.index %}
          <fieldset>
            {%- for value in option.values -%}
                <input type="radio" class="single-option-selector-{{ section.id }} "
                  {% if option.selected_value == value %} checked="checked"{% endif %}
                  value="{{ value | escape }}"
                  data-index="option{{option_position}}"
                  name="{{ option.name | handleize }}"
                  id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
                  data-image-url="{{ variant.featured_image | img_url: 'small' }}">
                <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
                  {{value}} 
                </label>
            {%- endfor -%}
          </fieldset>
        {% endfor %}
      {% endunless %}
        {{ current_variant.price | money }}
        <label for="Quantity">quantity</label>
        <input type="number" id="Quantity" name="quantity" value="1" min="1">
        <button type="submit" name="add" id="AddToCart">Add to cart</button>
      </form>

 

 

 

 

 

 

 

Replies 0 (0)