Jump to content

Cart quantity inconsistencies with custom CSS

Recommended Posts

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)

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}
}

 

Edited by awd113
Link to comment

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

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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.

Link to comment

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;}

 

Link to comment
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:

image.gif.c30b0535dbc2ab42ae2a4718218159e7.gif

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. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

@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. 

Link to comment

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

Link to comment

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.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.