Cart quantity inconsistencies with custom CSS

Hi there,

I've recently added some code to a website I'm working on to disable scroll on the homepage to allow for a single 100vh page only. 

This works perfectly on desktop, but on mobile, it is a bit glitchy. It works for the first swipe down, but then if you try again it sort of stutters down and allows you to go past.

I've achieved this by adding the following to the header injection of this page only.

<style>html, body {margin: 0; height: 100vh !important; overflow: hidden}</style>

If anyone has any idea why this doesn't seem to be working on mobile, please let me know 🙂 Happy to try other solutions if this method isn't best practice.

Thank you!

Website Link (pw - aUdio5)

Hi.

Did you remove the code? I don't see the code

Hi all,

I'm having some issues with the quantities that get added to cart / show when user visits the site for the first time. Sometimes it shows '1' but the card is empty, sometimes it adds 2-3, but the user has only added one. Just all kinds of strange things. This issue happens on both mobile and desktop, but much more common on mobile. (note, i've tried clearing cache, different browsers, private mode etc. — all the same problem.)

BUT, when I remove all the custom CSS that relates to the cart, it works fine. So clearly this is something i've done incorrectly. I've included the CSS below, can anyone provide any insight into why this particular CSS breaks this? As far as I can tell it's all font styling and adding some '(' ')', but maybe i'm just misunderstaning how all this works.

Worse case scenario, I can go back to the standard cart icon, but would love to use our custom look if possible.

Thanks in advance!

Site Here (pw:aUdio5)

(note, the cart is hidden on desktop until something is added to it)

/*cart-desktop*/

svg.icon.icon--cart {
  visibility: hidden;}
  
@media screen and (max-width:767px){
.icon-cart-quantity:before {
    content: "Cart";
  font-family: youth-reg;
font-size: 1.2rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}

.header-actions-action--cart {position: fixed; top:4vh; left: 13vw;}

.icon-cart-quantity {min-width: 10em;}

.sqs-cart-quantity {
  font-family: youth-reg;
font-size: 1.3rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;}

.sqs-cart-quantity:after {
  content: ')';
  font-family: youth-reg;
font-size: 1.3rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}

.sqs-cart-quantity:before {
  content: '(';
  font-family: youth-reg;
font-size: 1.3rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}
}

/*cart-mobile*/

@media screen and (min-width:767px){
  
  .icon-cart-quantity:before {
    content: "Cart";
  font-family: youth-reg;
font-size: 1.0rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}

.header-actions-action--cart {position: fixed; top:2.2vw; right: 5vw;}

.icon-cart-quantity {min-width: 10em;}

.sqs-cart-quantity {
  font-family: youth-reg;
font-size: 1.0rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;}

.sqs-cart-quantity:after {
  content: ')';
  font-family: youth-reg;
font-size: 1.0rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}

.sqs-cart-quantity:before {
  content: '(';
  font-family: youth-reg;
font-size: 1.0rem;
  color: #AA7850;
  font-feature-settings: 'ss02' on;
}
}

First, I recommend checking your scripts because you are generating at least 10 errors every second.

Hi Paul, thanks for your comment. I'm not exactly sure what you mean by this sorry. Is this referring to the plugins I have installed or the CSS? And are you suggesting this could be causing the problem with the cart?

Thanks again.

So i've gone back in and deleted all the JS relating to code as well. Now looking, it doesn't seem to have any errors. Phew!

I went to put back in some of the CSS styling, just to make it look a bit nicer (keeping the JS out), and one line seems to break it. The one below.

Any thoughts why this is happening / an alternative I could use?

I'm using this CSS line to change the cart to a single line rather than going over 2:

From:

Cart
(0)

To:

Cart (0)

.icon-cart-quantity {min-width: 10em;}

Hi @tuanphan

Oh yes sorry I removed to try something else. I've put it back in now.

Just a note. This is only happening on Safari (iPhone).

Chrome (iPhone) and Safari (Desktop) work fine.

Thanks!

16 minutes ago, awd113 said:

So i've gone back in and deleted all the JS relating to code as well. Now looking, it doesn't seem to have any errors.

It's difficult to troubleshoot CSS when there are other errors causing the site to do strange things 🙂

I'm still seeing many errors that appear to be generated by a race condition:

If you don't have any code installed (CSS, Code Injection or Code Blocks) then I recommend contacting Squarespace Customer Care. If you do have code, remove it and then add it section by section monitoring for errors. 

@paul2009 Oh sorry, I tried putting back one of the JS plugins just to see which one was the problem. My errors come back with both of them, so they're now both removed once again.

Now that they're gone I'm not getting any of those red (x) errors anymore after clearing cache. Can you see any errors on your end now?

If not then it's just the width of the 'Cart (0)' I need help with if you have any ideas.

Thanks again for your advice, it's very appreciated. 

This issue is super confusing. I finished up yesterday removing any CSS / JS relating to the cart. Stock Squarespace standard.  Loaded it again this morning and it's still having issues. 

The primary issues are:

When adding a product, then removing it, then adding any other product adds 2 quantity. 

Adding any second product while there's another product in the cart adds 2 quantity.

So it's completely fine if you clear cache, then go and add a single product, no problems, as soon as you do anything else to do with the cart though, it does the x2 problem.

Any advice would be greatly appreciated. 

Thank you! :) 

Hi all,

An update on this.

I’ve contacted Squarespace support and they’ve indicated it’s a problem with custom code, but say it may take several days to resolve.

As far as I can tell all custom code to do with the cart has been removed so I’m not 100% sure what’s causing it, but I understand it’s quite complex so it’s likely I’m missing something.

If anyone has any ideas in the meantime about what in the custom code could be causing this it would be very much appreciated as the site is now live and although customers can still purchase, it’s not the best experience when quantities change.

Thanks again!

Note - it seems this page has merged two of my threads / questions into one (one relating to scrolling which is resolved, and one relating to the cart, which is not resolved.