Variant selector on product grid item

Highlighted
Tourist
3 0 0

I want to show the option to select a variant and add to cart button on the product grid item so that product can be added to cart without going to the product page, I have managed to add the quantity selector and add-to-cart button on the product grid item but I can't get the variant picker functionality to work. Can someone help me with the code? Right now my variant picker on product grid item does nothing, no matter what variant I pick, the default variant price shows and gets added to cart

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}

        {% if product.featured_image %}
          {%- assign image = product.featured_image -%}
          {%- assign max_width = width | plus: 0 -%}
          {%- assign max_height = height | plus: 0 -%}

          {%- include 'image-logic' with width: max_width, height: max_height -%}

          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px">
            <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
              <img
                class="lazyload no-js"
                data-src="{{ img_url }}"
                data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                data-aspectratio="{{ image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ image.alt | escape }}"
                {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>
            </div>
          </div>
          <noscript>
           <img src="{{ image | img_url: '580x' }}"
             srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
             alt="{{ image.alt }}" style="opacity:1;">
         </noscript>

        {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
        <div>
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
      </div>
    </div>

    <p>{{ product.title }}</p>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
      {%- endif -%}
      
      
      
    </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </div>
    {% endif %}

    {% if section.settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>
	<form method="post" action="/cart/add">
  		{%- unless product.has_only_default_variant -%}
          {%- for option in product.options_with_values -%}

            {%- if section.settings.product_selector == 'radio' -%}
              <fieldset id="ProductSelect-option-{{ forloop.index0 }}" name="{{ option.name | handleize }}">
                <legend>
                  {{ option.name | escape }}
                </legend>
                {%- for value in option.values -%}
                  <!-- Check to see if there's a product size option. If there is a size, check to see if there's any availble for purchase. If not, set the variat control in a "disabled" state. -->
                  {%- assign variant_label_state = true -%}

                  {%- if product.options.size == 1 -%}
                    {%- unless product.variants[forloop.index0].available -%}
                      {%- assign variant_label_state = false -%}
                    {%- endunless -%}
                  {%- endif -%}

                  <input type="radio"
                    {% if option.selected_value == value %} checked="checked"{% endif %}
                    {% unless variant_label_state %} disabled="disabled"{% endunless %}
                    value="{{ value | escape }}"
                    data-index="option{{ forloop.index }}"
                    name="{{ option.name | handleize }}"
                    id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                  <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                    {{ value | escape }}
                  </label>
                {%- endfor -%}
              </fieldset>
            {%- else -%}
              <label for="ProductSelect-option-{{ forloop.index0 }}">
                {{ option.name | escape }}
              </label>
              <select id="ProductSelect-{{ 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 | escape }}
                  </option>
                {%- endfor -%}
              </select>
            {%- endif -%}

          {%- endfor -%}
        {%- endunless -%}
      <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
      </select>
  		<input min="1" type="number" id="quantity" name="quantity" value="1"/>
  		<input type="submit" value="Add to cart" class="btn" />
  	  </form>
</div>
0 Likes
Highlighted
Shopify Partner
650 75 107

@Ashwini ,

Which theme are you using? You would need to update the select call back or equivalent function in your js file

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1

To hire: email us at shopify@propero.in
Highlighted
Tourist
3 0 0

I am using supply theme. Can you please explain your solution in detail 

0 Likes
Highlighted
Shopify Partner
650 75 107

If you can check if in your theme.js following code is added under _updateCart function

 if(variant){
for (var i=0,length=variant.options.length; i<length; i++) {
          $('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        }

If it doesnt solve, someone will need to login and debug to find the source of issue 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1

To hire: email us at shopify@propero.in
0 Likes
Highlighted
Tourist
3 0 0

@Propero Thank you for helping me over communication

0 Likes
Highlighted
New Member
1 0 0

Were you able to figure it out?

I have same issue 

0 Likes