Wrong Variant being added to Cart

Solved
Stixen
Tourist
5 1 1

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

 

0 Likes
tim
Shopify Expert
2846 115 935

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

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Stixen
Tourist
5 1 1

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

0 Likes
tim
Shopify Expert
2846 115 935

This is an 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.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Stixen
Tourist
5 1 1

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!

0 Likes
tim
Shopify Expert
2846 115 935

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 :)

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
Katya77
New Member
3 0 0

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

0 Likes
YPSILON
New Member
3 0 0

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!

0 Likes
peelorange2020
New Member
1 0 0
MarwinSports
New Member
2 0 1

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!

0 Likes