Let's debug the Smart Cart!

Note: Previous versions of this article used Rebuy.libraries.$ to show the smart cart. Rebuy.libraries.$ will soon be deprecated, and your solution will need to be updated. Instructions on how to update this can be found below.

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 the cart or clicks the 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 an overlay (which 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 mode 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

All of this can be done from the Smart Cart settings page in just a few steps!

If Smart Cart doesn't open when clicking the cart icon

Open up the developer tools (right-click, inspect element), and inspect the element to find the element for the cart icon. Use a CSS selector of your choice to target the element, and insert it into the code here:

document.querySelector('INSERT-SELECTOR-HERE').addEventListener('click', () => {
Rebuy.SmartCart.show();
});

and paste that into the "Ready" callback in the Smart Cart Advanced settings (bottom of the page). In our example here, the selector is .header__icon--cart

Make sure the native cart is closed when Smart Cart closes

Since we are using CSS to only hide the native cart, it is technically still open when the smart cart opens. For this reason, we need to be sure that the native cart properly closes when we close Smart Cart. If the native cart is not properly closed, users may not be able to scroll properly when the Smart Cart is closed.

Open up the developer tools (right-click, inspect element), and find the element for the close icon on the native cart. Use the selector and add that to this code:

document.querySelector('INSERT-SELECTOR-HERE').click();

Add this to the "hide" callback in the Smart Cart Advanced settings. In our example here, the selector is .drawer__close

Hiding The Native Cart Drawer

Open up the developer tools (right-click, inspect element), and find the parent element that contains the entire cart. Then, in the "Custom CSS" section of the Smart Cart settings, add the selector and use this code:

.smart-cart--enabled INSERT-SELECTOR-HERE { display: none; }

In this example, the selector used is #CartDrawer
Note: Be sure to include a space between the .smart-cart--enabled and your selector.

With that, the Smart Cart should open and close as expected, and the native cart behind it is hidden!

Note: If you've used this example below, you will need to update the use of Rebuy.libraries.$ since it will soon be deprecated.

If the below solution is working for you, you can easily swap this code:

Rebuy.libraries.$('.cart-icon').click(function(){ 
// show Smart Cart once the icon is clicked
Rebuy.SmartCart.show();
});

for this:

document.querySelector('.cart-icon').addEventListener('click', () => { 
// show Smart Cart once the icon is clicked
Rebuy.SmartCart.show();
});

This will remove the usage of jQuery and use vanilla JavaScript instead.

Implementation Example (soon to be deprecated)

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 refer to 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 the 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.libraries.$', 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?