Add to cart from the collection pages

New Member
1 0 0

Hi,

I have ajaxified my cart using this code: https://github.com/carolineschnapp/ajaxify-cart

It works perfectly when im in the product pages but when im in the collection page, it doesnt add the proper products variant in the cart. It adds only the first variant. Can anyone help me plz? 

Thats my cart form code for the "product-grid-item.liquid" snippets: 

 <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
                        {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
                          {% for option in product.options_with_values %}
                            <div class="radio-wrapper js product-form__item">
                              <label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
                                for="ProductSelect-option-{{ forloop.index0 }}">
                                {% comment %}
                                {{ option.name }}
                                {% endcomment %}
                              </label>
                              <fieldset class="single-option-radio"
                                name="{{ option.name }}"
                                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.name }}"
                                    class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
                                    id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">
                                  <label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>
                                {% endfor %}
                              </fieldset>
                            </div>
                          {% endfor %}
                        {% endunless %}

                        <select name="id" id="ProductSelect" class="product-single__variants bcg-transparent 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 }}">
                                {% comment %}ly_code_replace_for_[ variant.title ]_begin{% endcomment %}{% include 'ly-title' with variant %}{{ ly_translation }}{% comment %}ly_code_replace_end{% endcomment %} - {{ variant.price | money_with_currency }}
                              </option>
                            {% else %}
                              <option disabled="disabled">
                                {% comment %}ly_code_replace_for_[ variant.title ]_begin{% endcomment %}{% include 'ly-title' with variant %}{{ ly_translation }}{% comment %}ly_code_replace_end{% endcomment %} - {% comment %}ly_i18n_replace_for_[ 'products.product.sold_out' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.sold_out' | t }}{% endcapture %}{% include 'ly-static-string' with '5462474' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
                              </option>
                            {% endif %}
                          {% endfor %}
                        </select>
                         

                        <div class="product-single__add-to-cart">
                          <button type="submit" name="add" id="AddToCart" class="btn"{% unless product.available %} disabled="disabled"{% endunless %}>
                            <span id="AddToCartText">
                              {% if product.available %}
                                {% comment %}ly_i18n_replace_for_[ 'products.product.add_to_cart' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.add_to_cart' | t }}{% endcapture %}{% include 'ly-static-string' with '5462476' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
                              {% else %}
                                {% comment %}ly_i18n_replace_for_[ 'products.product.sold_out' | t ]_begin{% endcomment %}{% capture ly_template %}{{ 'products.product.sold_out' | t }}{% endcapture %}{% include 'ly-static-string' with '5462474' %}{% if ly_translation %}{% assign escape_content = true %}{% assign ly_template = ly_translation %}{% else %}{% assign escape_content = false %}{% endif %}{% if escape_content %}{{ ly_template | escape}}{% else %}{{ ly_template }}{% endif %}{% comment %}ly_i18n_replace_end{% endcomment %}
                              {% endif %}
                            </span>
                          </button>
                        </div>
                      </form>

My website: zebrasclub.com

0 Likes