Custom cart trigger

Out of the box, Shoprocket will load a ready to use basket / shopping cart into your page, along with a button (or trigger) to open the cart.

You may wish to add your own cart icon or button into your website header or navigation, which can be easily done by adding a javascript onclick event.

Once you've added your own button, link or icon into your page, bind a javascript click event to it, which will fire the "toggle cart" function on click:

The above example will create a basic button element, with the onlick event of "Shoprocket.cart.toggle()" - when a user clicks this button, the cart will open (or close if it's already open)

Once you have your own cart trigger working, you can hide the default Shoprocket trigger with some custom CSS like this:

You can try this live demo of a JS button here:

toggle cart

You can also manually trigger opening the cart via URL params by appending #/~/cart to the end of your page URL. We also add/remove this URL param automatically when opening/closing the cart.

To create your own cart trigger button that doesn't need custom JS, you can simply set the href value to be /#/~/cart, like this: