Solved

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

EPuck
Tourist
6 0 1

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

 

 

Cart Drawer.png

Accepted Solutions (2)
Dan-From-Ryviu
Shopify Partner
7543 1454 1452

This is an accepted solution.

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

<style>
body:has(.drawer.active) #BackToTop {
opacity: 0;
}
</style>

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

tim
Shopify Expert
3323 249 1198

This is an accepted solution.

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

Screenshot 2024-03-05 at 4.18.59 pm.png

 

This is the code I'd use instead:

 

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

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7543 1454 1452

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 <head>

<style>
body:has(.drawer.active) your-back-button-class-or-id {
opacity: 0;
}
</style>

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

EPuck
Tourist
6 0 1

Dan,

 

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

tim
Shopify Expert
3323 249 1198

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
EPuck
Tourist
6 0 1

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

 

 

Dan-From-Ryviu
Shopify Partner
7543 1454 1452

This is an accepted solution.

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

<style>
body:has(.drawer.active) #BackToTop {
opacity: 0;
}
</style>

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

EPuck
Tourist
6 0 1

Dan,

 

Thank you. That works well. 

Dan-From-Ryviu
Shopify Partner
7543 1454 1452

Very welcome! 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

tim
Shopify Expert
3323 249 1198

This is an accepted solution.

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

Screenshot 2024-03-05 at 4.18.59 pm.png

 

This is the code I'd use instead:

 

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

 

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
EPuck
Tourist
6 0 1

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