Remove/Quantity Issue on Cart Page

Overview

Occasionally, the remove button and/or the quantity selectors buttons for each product do not work correctly with bundles.

There are a couple of possible reasons for this:

Theme Using Product ID to Update Quantity

When the theme is using the product ID to update the product quantity inside the cart, this is problematic because each instance of a bundle in the cart will share the product ID of the bundle product.

Example:

If a customer added 2x Bundle A, both bundles in their cart will share the product ID of Bundle A. Therefore, if the quantity is updated for one, both instances will be updated.

To fix this, forloop.index should be used instead of item.id wherever the quantity is being changed:

{% for item in cart.items %}
...
<!-- Old -->
<a href="{{ routes.cart_change_url }}?line={{ item.id }}&amp;quantity=0" class="cart__remove">Remove</a>
<!-- New -->
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="cart__remove">Remove</a>
...
{% endfor %}

Third-Party App Interference

Alternatively, sometimes a third-party app might change the behavior of the remove button or quantity selectors, which again can cause issues. It is therefore worth checking to see if any cart-related apps have been installed which could be interfering with Bundle Builder.

Checking for Event Listeners

You can also check for 'event listeners' on the button elements, which may point to a script from a third-party app which will run when the button is clicked - in most circumstances there should be none.

To check this on Chrome:

  1. Right-click and select Inspect.

  2. Open up the Developer tools.

  3. Click Inspect Element at the top-left, and select the element you wish to check.

  4. Click the Event Listeners tab on the bottom-right.