This guide provides instructions on how to integrate our widgets into your native cart. It's important to note that Rebuy doesn't offer support for the native cart, so this guide serves as a reference for how you could potentially enable the widgets, but we cannot guarantee success.
To receive comprehensive support for our widgets and your cart, it's necessary to switch to the Smart Cart solution. Our Smart Cart is a cart flyout powered by Rebuy, which is highly intuitive and doesn't require developers to customize. In contrast to the native cart, it offers greater user-friendliness. To get started with Smart Cart, check out our help docs.
If you're a developer who wishes to incorporate Rebuy widgets into a native cart, you can follow the steps below:
To start: Navigate to Smart Cart > and create a new Cart Flyout Widget. Name it accordingly! We have set our favorite layout by default but you can edit this.
Next, set the layout (as a starting point) to the following settings:
Layout: Products to show 2
For all screen sizes, set Display Style to: Line
Deselect Display as carousel
Set grid columns to 1
Next, your goal is to find the file in your theme that is the cart drawer/cart flyout file
To do this, one way is to export your theme, and use a local code editor to find this file.
To know what you're searching for, please first use the following trick. In your web browser of choice, select the webpage inspector tool, point to an item in your cart, and use this to direct your search for finding out which file is the cart drawer file.
Now, add the Rebuy widget div code like this:
Find your themes update function!
We've compiled a list of some of the most common themes update functions to use in Rebuy Event listeners. Generally, you can just include the method found in the widget's advanced settings. These methods vary from theme to theme as versions are different at times! We recommend reaching out to the themes developers if you are unable to find it. A good starting place is by searching for /cart/add in the downloaded theme file.
Remember: These are just ones that we have found over time and do not have access to all themes functions! If you are choosing not to use the smart cart, the responsibility is to search these out for yourself! You got this, Hacker!
Theme Name: "Impulse"
Search for the buildCart function in theme.js and add this to the bottom of the function below the if (openDrawer === true) condition.
$(`[data-rebuy-id="xxxx"]`).remove(); $(".ajaxcart__product").last().append('<div data-rebuy-id="xxxx"></div>'); if(window.Rebuy){ Rebuy.init(); }
Add this to the cart drawer widget's "add" event listener under "Advanced" in the widget settings:
$(‘body’).trigger(‘added.ajaxProduct’); //If that doesn't work try this one $('body').trigger('added.ajaxProduct', this.$addToCart); //Or this one! document.dispatchEvent(new CustomEvent('ajaxProduct:added', { detail: { product: product } }));
Theme Author: "Shopify + BentoSMB"
CartJS.addItem(Rebuy.Cart.cart);
Theme Name: "Prestige"
Add the below code snippet to the "Add" callback of the widgets Advanced settings.
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true }));
Used the script below in theme.liquid in order to get the widget to render when initial add to cart and adding to cart from widget. There may be a better way so use with caution…
<script> var initRebuy = () => { setTimeout(function(){ Rebuy.init(); }, 500); }; document.addEventListener('rebuy:cart.change', function(event){ initRebuy(); }); </script>
Theme Name: "Turbo"
In app.js.liquid, find function refreshCart(cart) and add this event listener above it:
document.addEventListener("rebuy:cart.change", function() { refreshCart(Rebuy.Cart.cart); });
//Placement for some Turbo themes has been in the header.liquid file after the tag. <ul class="cart_items js-cart_items"></ul> //You may need to remove properties/attributes in header.liquid {% assign first_character = p.first | slice: 0 %} {% unless p.last == blank or first_character == '_' %} {{ p.first }}: {{ p.last }} {% endunless %} //As well as in app.js within the refreshCart function block if(item.properties) { $.each(item.properties, function(title, value) { if (value && title[0] != '_' && value[0] != '_') { cart_items_html += '<div class="line-item">' + title +': ' + value + '</div>'; } }); }
For more on removing cart properties checkout this doc: Hiding cart properties.
Theme Name: "Impulse"
$('body').trigger('added.ajaxProduct');
Theme Name: "Parallax"
//Find function refreshCart(cart) in app.js.liquid and add this event listener above this method. document.addEventListener('rebuy.add', function () { refreshCart(Rebuy.Cart.cart) });
Theme Name: "Modular"
Cart.buildCart(Rebuy.Cart.cart); /*Find the buildCart Method, potentially in shop.js.liquid. May or may not need the setTimout method but this is has worked so that the widget did not get removed when adding to cart.*/ setTimeout(() => { $("#CartItems").append('<div data-rebuy-id="XXXX"></div>'); Rebuy.init(); }, 500);
Theme Name: "Motion"
document.dispatchEvent(new CustomEvent('cart:build')); //And added this to the bottom of cart-drawer.liquid <script> document.addEventListener('cart:updated', function(event){ Rebuy.init() }); </script> //Alternative: $('body').trigger('added.ajaxProduct', Rebuy.Cart.cart); //Include in the buildCart() function if needed: setTimeout(function(){ $(".drawer__scrollable").append('<div data-rebuy-id="XXXX"></div>'); Rebuy.init(); }, 750)
Hey Senior Cart Drawer
//1) This serves to update the Slide Cart. if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.updateSlideCart(); } //2) This is to open and update the Slide Cart. if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.getSlideCart(); } //3) Initialize the event for the Add to Cart button if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.addToCartSlideCart(); } //4) Initialize the event for the Quick Buy Button if(typeof window.HSSLIDECART !== 'undefined') { HsCartDrawer.getQuickBuyButton(); }
Theme Name: "Super Theme VB (Vasta) Theme"
VastaShop.Cart.getAllItems() .then(function(cart, status) { if ('success' === status) { VastaShop.Cart.current = cart; render_cart_drawer(VastaShop.Cart.current, jQuery('.list-products'), 0, ''); update_shipping_bar(cart.total_price, cart.item_count); } }).catch(function(err) { console.log(err); });
Theme Name: "Starter"
$.get('/pages/mini-cart', response => $('[js-mini-cart]').replaceWith(response)); var productAddedToCart = new CustomEvent('cart.productAdded', { bubbles: true }); document.body.dispatchEvent(productAddedToCart)
Again, this guide outlines the steps for integrating our widgets into your native cart. However, it's important to remember that Rebuy doesn't provide support for the native cart. As a result, this guide is only a reference for potentially enabling the widgets, and success cannot be guaranteed.
For complete support with your widgets and cart, it's advisable to migrate to the Smart Cart solution. Our Smart Cart, which is powered by Rebuy, is exceptionally user-friendly and doesn't necessitate developer customization. It provides a higher level of user-friendliness compared to the native cart.