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

KritikaSingh
Excursionist
22 0 2

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
erkankaragulmez
New Member
4 0 0

Hi,

did you manage to fix the problem being directed to product page after selecting the variant? am having exactly the same issue, as soon as I click on the size drop down , it directs me to the product page...

 

thanks in advance for further info if you have any

 

Erkan

0 Likes
ram1212
New Member
5 0 0

hi did you find the solution?

0 Likes
larroll-cewis
New Member
1 0 0

Did you already check for an <a>-tag on your product-grid-item? I'm not sure about the broklyn theme but most themes I know got a link overlaying the complete product-card. Therefor any click on that item will send the customer to the product page. If you remove that link-tag or fix the area it's covering you should be good to go. 

0 Likes
ram1212
New Member
5 0 0

Hi laroll I’m so desperate for the solution I’m yet to try the method u said but there is an issue if we break the a tag and toggle through the variant selector I m not sure whether the price would change accordingly or not

0 Likes