Wrong Variant being added to Cart

[Stixen]

Hi all, hoping I can get an answer to this as its driving me crazy. 

Everytime I try to add a variant product to the cart it only ever puts the first option in.

In the console I am getting an error that is most definitely the culprit but I have no idea what it means or how
to fix it.
This is the error >

Uncaught TypeError: Cannot set property 'textContent' of null

and the error line is (towards bottom):

 _liveRegionText: function(variant) {
      // Dummy content for live region
      var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

      if (!variant) {
        liveRegionText = theme.strings.unavailable;
        return liveRegionText;
      }

      // Update availability
      var availability = variant.available ? '' : theme.strings.soldOut + ',';
      liveRegionText = liveRegionText.replace('[Availability]', availability);

      // Update pricing information
      var regularLabel = '';
      var regularPrice = theme.Currency.formatMoney(
        variant.price,
        theme.moneyFormat
      );
      var saleLabel = '';
      var salePrice = '';

      if (variant.compare_at_price > variant.price) {
        regularLabel = theme.strings.regularPrice;
        regularPrice =
          theme.Currency.formatMoney(
            variant.compare_at_price,
            theme.moneyFormat
          ) + ',';
        saleLabel = theme.strings.sale;
        salePrice = theme.Currency.formatMoney(
          variant.price,
          theme.moneyFormat
        );
      }

      liveRegionText = liveRegionText
        .replace('[Regular]', regularLabel)
        .replace('[$$]', regularPrice)
        .replace('[Sale]', saleLabel)
        .replace('[$]', salePrice)
        .trim();

      return liveRegionText;
    },

    _updateLiveRegion: function(evt) {
      var variant = evt.variant;
      var liveRegion = this.container.querySelector(
        this.selectors.productStatus
      );



               //error on this line>>>>>>>>
                    liveRegion.textContent = this._liveRegionText(variant);





      liveRegion.setAttribute('aria-hidden', false);

      // hide content from accessibility tree after announcement
      setTimeout(function() {
        liveRegion.setAttribute('aria-hidden', true);
      }, 1000);
    },

 
im using the Debut theme.

Any help would greatly be appreciated.

Cheers

[tim]

It's impossible to diagnose without seeing your shop. Share a link and someone will be able to help you.

[Stixen]

Hi thanks for the reply

the shop is currently in development, 
but the link to the products are :
https://superior-screens.myshopify.com/collections/superior-window-screens
the password to view is chaely

and the error only occurs when you select a different variation from the "width" dropdown.

cheers

[tim · Accepted solution]

Yes,  your swatches are line item properties and do not trigger variant change.

Now, the problem is due to a typo in your product-template  section.

There is a code:

<p class="visually-hidden" data-product-statusaria-live="polite" role="status"></p>
<!--productAccordion-->

which should be 

<p class="visually-hidden" data-product-status aria-live="polite" role="status"></p>
<!--productAccordion-->

(a space is missing before aria-live).

Adding a space back should fix it.

[Stixen]

Holy sheeet man, THANKS SO MUCH!!
I dont understand how that error got in there though, i didnt insert that line, wondering if thats an error in the debut theme, or
is it being inserted by the swatch plugin?.

Anyways thanks again Tim, much appreciated!

[tim]

You can trace it using the "Older versions" dropdown next filename in the theme code editor (unless you've made a theme copy recently -- edit history is discarded for copies), if really interested :)

Could be due to a number of reasons, probably some clumsy mouse move or alike, doubt it's a theme error (you can always download a fresh copy from the theme shop to compare -- I do this all the time when troubleshooting) ...

Would appreciate if you  also like that post :)

[Katya77]

hello guys i am having the same problem and as you suggested i removed the zoom option on the product but still not sorting out the problem.Help me please

[YPSILON]

I am having the same problem with the debut theme and only on mobile or when scaling down the browser window to mobile size on desktop. I need help, getting crazy over this!

[peelorange2020]

https://www.peelorange.com/products/creative-side-table-living-room-small-tea-table-sofa-corner-iron...

Hi team ,

i am also getting the same error , please help 

[MarwinSports]

I am having the same issue as well, any product on my site, any size variant selected there seems to be a visual glitch in the cart, only the smallest or first size variant shows in the cart, but the correct order size is received.  Obviously, some customers are calling or emailing as they cannot add their size so they think to their cart.  marwinsports.com

Thank you for any help!