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.


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

Did this answer your question?