Liquid: Spotlight theme: How do I detect if cart drawer is open?

[EPuck]

I am hoping someone can help me with detecting if the cart is open are not. The problem I am having is i have added a “back to top” button found here in the discussions that works well save it is displayed when the cart is open and sometimes blocks info contained in the cart.

I found where it will choose to display based on scrolling however I want to add an “if” statement to not display it if the cart is open, (please see screenshot).

liquid code example:

function trackScroll() {
var scrolled = window.pageYOffset;
var coords = {{ vertical_offset_for_trigger }};

if (scrolled > coords) {
goTopBtn.classList.remove(‘hide’);
}

if (scrolled < coords) {
goTopBtn.classList.add(‘hide’);
}

}

I would like to add something like:

if (Cart detection code) {
goTopBtn.classList.add(‘hide’);
}

[Dan-From-Ryviu]

Hi @EPuck

Dan here from Ryviu: Product review & QA app.

You don’t need to use JavaScript code to check if the drawer is open. You can use this CSS code to make your back-to-top button not appear if your cart drawer is open. Please add your code to theme.liquid file, after

[tim_tairli]

That’s unnecessary.

Better option is to tune z-index values on your cart drawer and back-to-top button so that drawer overlays the button when open.

Another possibility – when drawer opens theme JS usually adds a class on body (or html) to disable scrolling etc.

You can add a CSS rule based on this to hide BTT button, kinda like:

body.cart-drawer-open .back-to-top-button {
  display: none;
}

Can’t be more specific without seeing your site…

[EPuck]

Hi Tim.

Thank you for the response.

I like the idea of the overlay. The site is https://woodenglenn.com and the preview password is: leulda

[EPuck]

Dan,

Thank you for your suggestion. I will give it a try.

[Dan-From-Ryviu]

Go to Online Store > Themes > Edit code, open theme.liquid file, add this code after

[EPuck]

Dan,

Thank you. That works well.

[Dan-From-Ryviu]

Very welcome!

[tim_tairli]

I’d rather use display: none; instead of opacity:0;

With opacity:0 the element is still there (even though it’s transparent) and may potentially cover some buttons or links preventing them from functioning.

For example, here the button would not be visible but still prevent removing Wine packaging from the cart

This is the code I’d use instead:

body.overflow-hidden #BackToTop {
  display: none;
}

[EPuck]

That sounds like a wise revision. Thank you, I made the update.