Second 'Add to cart' button on product page adds wrong product

CorbinEZ
New Member
1 0 0

Hi,

I have added an extra section on our product pages that shows product that the customer might be interested in.

Everything works except for one thing, the most important: the add to cart button.

When a customer uses the add-to-cart button it doesn't add te right product. Instead of the 'upsell product' the main product will be added to the cart.

 

We have a Dutch store but I think it will be understandable.

On this page you see one of our products. On the right bottom part you will see the "Handig bij" section that shows 3 products. When the customer clicks on the add to cart button (In Winkelwagen) it adds the main product of this page (Voetplaat rond).

What did I do wrong?

 

The upsell products are shown by this small part of code:

{%- include 'product-item', product: product, grid_classes: '1/3--lap 1/3--desk 1/3--wide', show_add_to_cart: true -%}

 

product-item is the standard code we use for showing products on collection pages. I think the following part of the code might be interesting for our error.

{%- if template.name == 'collection' or template == 'search' or show_add_to_cart -%}
      {%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
        {%- assign product_form_classes = 'product-item__action-list button-stack' -%}
      {%- else -%}
        {%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
      {%- endif -%}

      {%- form 'product', product, class: product_form_classes -%}
        <input type="hidden" name="quantity" value="1">
        <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

        {%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
          {%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
        {%- else -%}
          {%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
        {%- endif -%}

        {%- if product.available -%}
          {%- if product.selected_or_first_available_variant.sku contains 'STB' or product.selected_or_first_available_variant.sku contains 'STK' or product.selected_or_first_available_variant.sku contains 'AB' or product.selected_or_first_available_variant.sku contains 'BP-' or product.selected_or_first_available_variant.sku contains 'RF-' -%}
            <button type="button" class="{{ quick_buy_classes }}" onclick="location.href='{{ filtered_variant.url | default: product.url | within: collection }}'">Bekijk product</button>
          {%- else -%}
            {%- if product.variants.size == 1 -%}
              <button type="submit" class="{{ quick_buy_classes }}" data-action="add-to-cart">{{ 'collection.product.add_to_cart' | t }}</button>
            {%- else -%}
              <button type="button" class="{{ quick_buy_classes }}" data-action="open-modal" data-secondary-action="open-quick-view" aria-controls="modal-quick-view-{{ section.id }}" data-product-url="{{ product.url }}">{{ 'collection.product.choose_options' | t }}</button>
            {%- endif -%}
          {%- endif -%}
        {%- else -%}
          <button class="{{ quick_buy_classes | replace: 'button--primary', 'button--disabled' }}" disabled>{{ 'collection.product.sold_out' | t }}</button>
        {%- endif -%}

        {%- if section.settings.show_quick_view == 'list_grid' -%}
          {%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
        {%- else -%}
          {%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
        {%- endif -%}

        <button type="button" class="{{ quick_view_classes }}" data-action="open-modal" data-secondary-action="open-quick-view" aria-controls="modal-quick-view-{{ section.id }}" data-product-url="{{ product.url }}">{{ 'collection.product.quick_view' | t }}</button>
      {%- endform -%}
    {%- endif -%}

 

Anyone who could help me out here?

0 Likes