On rare occasions, the Remove button and/or the quantity selector buttons do not work correctly with bundles that are added to the cart.

There are a couple of possible reasons for this:

Your theme is using the product ID to update the product quantity inside the cart
A third-party app is modifying the behavior of these buttons.

We'll explain each reason in more detail below. However, please be aware that as this is a third-party issue, we're not able to provide any additional support, other than the advice on this page. If you think your theme or a third-party app may be causing the issue, please contact the respective developer for assistance.

Theme using product ID to update the product quantity

When your 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 adds 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's therefore worth checking to see if any cart-related apps have been installed which could be interfering with Kitenzo.

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 that will run when the button is clicked. In most circumstances, there should not be any.

To check this on Google Chrome:

Step 1: Right-click and select Inspect.

Step 2: Open up the Developer tools.

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

Step 4: Click the Event Listeners tab on the bottom right.