Let's debug the Smart Cart!

Hiding the native cart:

Replacing your cart drawer with Rebuy.

Most themes have a built-in cart drawer (slider cart, cart flyout) that slides out after a customer adds a product to cart, or clicks your cart icon. These generally offer a quicker way for the customer to checkout by skipping the cart page entirely, but not all drawers skip the cart page, or have lots of bells and whistles!

Rebuy Developer Helpers

Since most cart drawers have their content (the cart) and a overlay (darkens the rest of the screen and generally makes the screen unscrollable) these will need to be removed. When the Smart Cart is enabled in Rebuy and is either in live more or being previewed, we add a class ".smart-cart--enabled" to the body tag, allowing you to target and apply CSS changes only when the class exists, as well as several smart cart event listeners.

Implementation Example

Place the following code snippet in your theme.liquid file before the closing body tag.

{% render 'rebuy-extensions' %}

Create a new snippet with the name 'rebuy-extensions' and paste in the following code:

Note:

  • You will need to properly select the parent element of the native cart, in this example, it is '#CartDrawer'

  • Not all themes have a page overlay for their native cart but in this particular example, it is '.js-drawer-open'

<style> /* #CartDrawer is element that contains the entire cart drawer */ .smart-cart--enabled #CartDrawer, #PageContainer::after { display: none !important; } /* making sure that scrolling is still enabled after closing the smart cart */ .smart-cart--enabled .js-drawer-open { overflow: scroll !important; } </style>

Smart Cart not showing after clicking the cart icon:

Note:

  • You will need to create a 'rebuy-extensions' snippet file, if you've already done this, move on to the next step

  • If you haven't created a 'rebuy-extensions' snippet file, please reference the Implementation Example for hiding the Native Cart listed above

  • You will need to properly select your cart icon using CSS selectors but in this particular example, it is '.cart-icon'

Within your 'rebuy-extensions' snippet file, paste in the following code: (if you've already pasted in code for the CSS changes above, you can paste the following code below that.)

<script> // once smart cart is loaded and ready document.addEventListener('rebuy:smartcart.ready', function(event){ // If your shop already uses jquery, no need to use 'Rebuy.libaries.$', feel free to replace this with '$' Rebuy.libraries.$('.cart-icon').click(function(){ // show Smart Cart once the icon is clicked Rebuy.SmartCart.show(); }); }); </script>

Example rebuy-extensions.liquid snippet:

To learn more about our Rebuy JS Callbacks, check out this help doc.

Did this answer your question?