Overlay background when using cart summary

Support
#1

Hi everyone,

I’m working on installing Snipcart to a client’s Webflow site and while I’ve been very pleased with the component overrides and CSS override ability, there’s one thing I’m stuck with…

We’re planning to use the side cart summary for the site, and the general theme of the site is quite light; we’re using a white background for the side cart which is also the background colour for a good portion of the website this will be on, so we had planned to overlay a semi-transparent grey for the rest of the screen and this is the element that I’m stuck on.

I thought I’d just be able to override the side cart component and include a layer which is fixed 100% div with a lower z-index to the cart. The issue is that it doesn’t seem to matter where I nest this element, when I apply this override it just takes over the screen before the cart summary is even displayed.

I also see that there isn’t an event for cart summary open/close that I could tap into for this.

Have I missed something here? What would you do to achieve what I’m after?

Thanks in advance

#2

Hi @iratefox,

You could use the theme.routechanged event for this. There’s an example of how to detect when the cart is opened or closed in the documentation.

Let me know if that helps,

Cheers!

#3

Thanks - I will look into this properly when I get a chance tomorrow and report back, but a quick look at the docs does indicate this is what I’m after.

I had spotted a class named something along the lines of Summary Veil which I thought I could tap into as it may have been what I was after following a quick check of the CSS, but it doesn’t seem that this is ever loaded on the page even though it appears in the default style of the component in the docs - any ideas why this would be? And would that even be what I’m after?

P.s. I had issues trying to even force this into the page via an override to really work it out but I believe this to be an unrelated issue, and one I’m having in general with overriding - some work, some fail, can’t work that out, but if there’s a full example of this cart summary component to review I’d really appreciate that.

Thanks again

#4

I got a chance to look at this and it’s not behaving quite as expected…

I’m using the side-cart and not the full-screen cart implementation and this event only seems to trigger on full-screen open/close. Is there something I’m missing here?

#5

Hi there,

When using the SideCart, there is no event triggered. I can’t commit to an ETA, but I added your use case to our backlog. For now, I would suggest using the fullscreen cart if you need to act when the cart is opened.

For the class named Summary Veil, the override reference doc might not be 100% up to date. Please tell us which component you are trying to override and we will provide the most up-to-date version of it.

1 Like
#6

Hey there,

You could also try a pure CSS approach like demonstrated here : Side cart custom veil - CodeSandbox

Let me know if this works for you,
Cheers!

1 Like
#7

Awesome, thanks!

I spent ages trying this with pure CSS but I was obviously latching onto the wrong class.

Thanks so much

1 Like