Multiple upsell products on cart (form error)

Kos
New Member
2 0 0

Hi there,

I am trying to add 2 upsell products to the cart page, so when customer clicks "add to basket" then the product should be added to cart and page needs to be refreshed. I have no problem to display both products, but for some reason only one <form> appears (for the 2nd product). Is there a reason why <form> works only for one product?

Kos_0-1625106994504.png

 

cart-upsell.liquid (to display both products)

 

{%- assign cart_upsell_product_one = all_products['a-r-london-pj'] -%}
{%- assign cart_upsell_product_two = all_products['shirred-waist-denim-skirt'] -%}

{% if cart.items != empty %}
<div class="cart-upsell__wrapper">
    <div class="page-header">
        <h2 class="majortitle">You may also want</h2>
    </div>
    <div class="cart-upsell__products flexible-layout column-full">
        <div class="column-half">
            <div class="cart-upsell__product-box">
                {%- unless cart_upsell_product_one.empty? -%}
                    {% include 'cart-upsell-product', {product: cart_upsell_product_one} %}
                {%- endunless -%}
            </div>
        </div>
        <div class="column-half">
            <div class="cart-upsell__product-box">
                {%- unless cart_upsell_product_two.empty? -%}
                    {% include 'cart-upsell-product', {product: cart_upsell_product_two} %}
                {%- endunless -%}
            </div>
        </div>
    </div>
</div>

{% endif %}

 

 

cart-upsell-product.liquid (to display product <form>)

 

 

<div class="product-upsell-area">
    <div class="product-image">
        <a href="{{ product.url }}">
            <img src="{{ product.featured_image | img_url: 'master' }}"/>
        </a>
    </div>
    <div class="product-text">
        <a href="{{ product.url }}">
            <h4 class="product-name">
                {{ product.title }}
            </h4>
        </a>
      {% assign variant = product.selected_or_first_available_variant  %}
      <span class="price theme-money">{{ variant.price | money }}</span>
      {% if product.variants.size == 1 and product.compare_at_price_max > product.price_min %}
      <span class="was-price theme-money">{{ variant.compare_at_price | money }}</span>
      {% endif %}
      
      {% if product.available %}
        {% form 'product', product, class: 'form', data-product-id: product.id, data-enable-history-state: 'true' %}
          <div class="input-row">
            {% if product.variants.size > 1 %}

            <div class="option-selectors">
                {% for option in product.options_with_values %}
                <div class="selector-wrapper cf">
                  <label {% if option.name == 'default' %}class="hidden"{% endif %} for="option-{{ option.name | handle }}">
                    {{ option.name }}
                  </label>
                <span class="styled-select">
                    <select name="id" class="original-selector">
                        {% for variant in product.variants %}
                        <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected="selected"{% endif %} data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}" {% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}disabled{% endif %}>{{ variant.title | escape }} {% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}(out of stock){% endif %}</option>
                        {% endfor %}
                    </select>
                  </span>
                </div>
                {% endfor %}
              </div>

            {% else %}
            <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

            {% unless product.variants.first.title contains 'Default' %}
            <label class="singleopt">
              {% for option in product.options %}
              {% assign opt_idx = 'option' | append: forloop.index %}
              {{ option }}: {{ product.variants.first[opt_idx] }}<br/>
              {% endfor %}
            </label>
            {% endunless %}

            {% endif %}
              
          </div>

          <div class="input-row quantity-submit-row ">
            <span class="quantity-submit-row__submit">
              <input class="button" type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
            </span>

           
          </div>


          {% if product.variants.size == 1 %}
          {% if product.variants.first.inventory_management == 'shopify' and product.variants.first.inventory_quantity < 1 %}
          <div class="backorder">
            <p><span class="selected-variant">{{ product.title }}</span> {{ 'products.product.backorder' | t }}</p>
          </div>
          {% endif %}
          {% else %}
          <div class="backorder hidden">
            <p><span class="selected-variant"></span> {{ 'products.product.backorder' | t }}</p>
          </div>
          {% endif %}
        {% endform %}

        {% else %}

        <p><em>{{ 'products.product.product_unavailable' | t }}</em></p>

        {% endif %}
      </div>

    </div>

 

 

Thanks in advance.

0 Likes
IonStorm
Excursionist
37 0 3

If you never figure this out you could use /cart/add.js

0 Likes