OVERVIEW
This article will talk through some troubleshooting steps if your native cart continues to be active while you have Smart Cart active.
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.
TROUBLESHOOTING SMART CART / NATIVE CART
In this video we will talk through some ways to troubleshoot issues with your native cart continuing to be active even when you have Smart Cart enabled and native cart disabled.
HIDING 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!
SMART CART DOESN'T OPEN WHEN CLICKING 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 NATIVE CART CLOSE 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
HIDE 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. You will need to add the specific selector that you find for your store. You will replace "INSERT-SELECTOR-HERE" with the selector of your store.
.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.