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

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
10926 2147 2283

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

tim
Shopify Partner
3911 395 1440

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.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
10926 2147 2283

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>

 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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 Partner
3911 395 1440

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.
I can be reached via e-mail tairli@yahoo.com
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
10926 2147 2283

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- 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
10926 2147 2283

Very welcome! 

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

tim
Shopify Partner
3911 395 1440

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.
I can be reached via e-mail tairli@yahoo.com
EPuck
Tourist
6 0 1

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