Variant selector on Collection page is going to Product page - Brooklyn theme

Highlighted
Tourist
22 0 0

Hi, 

After having a look at some of the forums over here, I was able to add-in the add to cart button along with variants on the collection page. However, upon clicking the variant drop-down list, the user gets directed to the product page. How can I make the user choose the variant and add it to the cart whilst being on the collection page? I have attached below the code respectively for this that is currently in my product-grid-item.liquid. 

Any help would be appreciated, please

This is how the collection page looks likeThis is how the collection page looks like

{% comment %}
    Next bit of code has been added to include "Add to Cart" button below every product in a grid, with the quantity displayed
    {% endcomment %}
        
        <form method="post" action="/cart/add">
		<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      	<br />
          
        {% comment %}
        //Previously quantity selector//
 		<center><input min="1" type="number" id="quantity" name="quantity" value="1"/></center>
		{% endcomment %}
          
           {% capture "form_classes" %}
              product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
            {%- endcapture %}

            {% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

            {% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}
              {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="radio-wrapper js product-form__item">
                    <label class="single-option-radio__label"
                      for="ProductSelect-option-{{ forloop.index0 }}">
                      {{ option.name | escape }}
                    </label>
                    {% if section.settings.product_selector == 'radio' %}
                      <fieldset class="single-option-radio"
                        id="ProductSelect-option-{{ forloop.index0 }}">
                        {% assign option_index = forloop.index %}
                        {% for value in option.values %}
                          {% 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{{ option_index }}"
                            name="option{{ option.position }}"
                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
                        {% endfor %}
                      </fieldset>
                    {% else %}
                      <select class="single-option-selector__radio 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 | escape }}</option>
                        {% endfor %}
                      </select>
                    {% endif %}
                  </div>
                {% endfor %}
              {% endunless %}

              <select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">
                {% 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>

              {% if section.settings.quantity_enabled %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
               
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
          
            </div>
              {% endif %}
            {% endform %}

          {%comment%} Add to cart button {%endcomment%}
          <input type="submit" value="{% if product.variants.first.available%}Add to Cart{% else %}Sold Out{% endif%}" class="btn" {% unless product.variants.first.available %}disabled{% endunless %} />

        </form>

 

0 Likes