How to trigger cart drawer slide with URL change?

Technical Q&A
1

I need the Cart Drawer to slide open if the Shopify store URL contains a given path, such as:

*/cart

The Cart Drawer toggle needs to respond to that URL path appearing when the URL changes.

2

This would be odd to do for the actual cart page given you would likely see the content twice. If you do want to do it on the cart page then you’d also need to look at altering the template to show something else.

Now without know the theme or the code in your site it’s hard to give much guidance here but the general thinking would be:

  • find the code that opens the cart slider now. you’ll need to know what the function is called
  • add some new code that looks at the current url. where you put that will be determined by the running order and priority you have in mind.
  • if your url pattern is seen (maybe it’s as simple as saying if url contains cart) then fire that function you found earlier.
3

"

  • add some new code that looks at the current url. where you put that will be determined by the running order and priority you have in mind."

Please give me an example of how you would “…[look] at the current url.”

Is it possible to read the URL from inside Shopify? Because I am making jQuery functions to do that and it is not responding.

The idea is, this function is triggered solely based on what is in the URL. It has nothing at all to do with the Shopify HTML or user events.

Thanks a lot for the help.

4

vanilla JS would looks something like this

 
 function openCartDrawer() {
   if (window.location.pathname === '/cart') {
     document.getElementById('cart-drawer').classList.add('is-open');
   }
}

Jquery would look something like this

$(document).ready(function() {
if (window.location.pathname == "/cart") {
$('.cart-drawer').addClass('is-visible');
}
});
5

Hello @geo3arKt82 ,

Hope you are doing well!

In Shopify, we have multiple templates which will redirect on the basis of URLs provided.

For the home page, we have an Index template, for the cart page, we have a Cart template, and so on.

So, Let us know do you want the customer should redirect to the cart page along with the drawer or if it should remain on the home page along with the drawer.

All the best,

CedCommerce

6

Thanks, Nyshawn. My question was where to put this code in Shopify- an index file somewhere or something? Because I have jQuery in a _documents folder listening and running a console log if the route changes and it doesn’t respond. Do you have an example of how to run it?

7

I threw it in layout/theme.liquid as a tag and it works.