Adding some items to cart, it automatically gets doubled?

Technical Q&A
1

HI, Seems like after this weekend, not 100% certain, but we noticed that when you add certain items, the keyed in qty doubles from the original entered value in the cart. Looking for thoughts please.

2

Hey @TonyMil

Welcome to the community! Regarding your issue, I’m pretty sure something caused it because nothing gets broken automatically, it could be a theme update, any code change or any new app you installed.

Additionally, share your store URL as well so that I can have a look and provide you a solution accordingly.

Best,
Moeed

3

Hi @TonyMil,

You could try some troubleshooting. Have you tried your cart on other devices? Have you cleared the cache, cookies and other history of your browsers and then attempted to add something to the cart? What about using another source of internet (if you’re on a phone, try using the WiFi or the phone’s internet)? See if you can use another WiFi somewhere, a local library for instance. Restart (shut it down and count to 10, then power it back up) your device and see if it still happens.

Let us know how you go. If it is still a problem, as @Moeed said, write with a link.

5

thank you. its milspin.com the odd part was that our dashboard changed and showed us “you have your first sale” odd.. I have cleared cache, tested multiple PC’s in our shop and same issue.

IMG_1578
IMG_15781281Ă—354 93.5 KB

Even mobile on iphone intermittently doubles what your adding.

6

This usually happens when the add-to-cart action is being triggered twice — often from a theme script, cart drawer script, or an app that also listens to the same button click.

Since it’s only happening on certain products, I’d check:

  1. Are those products using a different template?

  2. Do they have any special bundle/upsell/quantity app logic?

  3. Was any theme/app update pushed over the weekend?

  4. Does the Network tab show /cart/add.js firing twice when adding the item?

If you can share one affected product URL, it’ll be easier to narrow down whether it’s theme code or an app conflict.

7

Hey @TonyMil

I tired adding different products from different collections, tested multiple quantities and every time I did Add to Cart, it always added the correct quantity in cart.

So, is it happening on any specific product page? Let me know.

Best,
Moeed

8

Huh, I just tried to add a variety of products and it appears to be working correctly. Then tried again it duplicates, but at random which is the really odd part. My customer service staff mentioned we have had people call in and complain, wanted to cancel an item that should not have been there, additional items and I just heard about it, just trying to see how long this has been happening. Appears this may have been happening for a few weeks.

  1. Should be sample template.
  2. Upsell, not quantity only $ discount.
9

I can see that.

I’d do this – create a theme duplicate and ensure it happens in this copy preview.
Then, get a, say clean Dawn and see if this happens in the preview of Dawn.

Then, reach out to theme support:

What happens to me is this – theme JS initializes the product form custom element twice, therefore add-to-cart button handler code is called twice.

Also – have you done anything around product recommendations?
Something shady is going on with it.

The block is there, but renders nothing – this can be related as product recommendations code also processes product forms…

Here is the detailed explanation of what happens – obviously a theme design error:

  1. Page HTML is loaded in the browser, then theme JS which declares the custom element class and processes the <product-form> element.
  2. Then later on, code for related products fetches entire section HTML again and adds it to a hidden div.
    The intention is to parse this element and fetch product recommendations HTML from this div, however:
  3. At this time, the product-form element is added to DOM for the second time and product-form initialization code runs again.
    Because of the sloppy code in constructor it targets the same <product-form> element which is already a part of the page and adds a second hander to the add-to-cart-button.
  4. When visitor clicks add-to-cart those two event handlers fire one after another and add product to cart twice.

I wonder why it does not happen every time though …

I believe that if you remove the product recommendations block from the product section, this will stop happening.
Disable the block by clicking the eye icon and see if duplications stop.

Why this is a sloppy code:

  customElements.define('product-form', class ProductForm extends HTMLElement {
    constructor() {
      super();

      this.sticky = this.dataset.sticky;
      this.form = document.getElementById(`product-form-${this.dataset.section}`);
      this.form.querySelector('[name=id]').disabled = false;
      if (!this.sticky) {
        this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
      }
      this.cartNotification = document.querySelector('cart-notification');
      this.body = document.body;

      this.hideErrors = this.dataset.hideErrors === 'true';
    }
  1. The code runs in constructor, but anything related to custom element descendants manipulation shold be run in connectedCallback;
  2. Code gets form element by using getElementById from entire DOM, rather then getting it from the custom element descendants.