Using a slide-out cart / cart drawer / custom mini cart

Some themes and apps provide a built-in cart experience that isn't a full page - these carts usually slide out from somewhere on the page after a product is added, instead of redirecting to a different page.

To use a slide-out cart in a Replo page, there are usually two steps:

1. Make sure your Add Product to Cart interaction has both "redirect to cart" and "redirect to checkout" disabled
2. Depending on the theme or cart app you'r using, you generally need to trigger the cart to slide out via Javascript. To do this, Add a Run Javascript interaction and make sure it triggers after the Add Product to Cart interaction.
   
   The Javascript will need to refresh the cart contents and open the cart - what Javascript you run will depend on your theme or app.

Example Javascript Snippet

Below is a non-exhuastive list of Javascript snippets we've found that work today. Generally it's best to consult the cart app or theme's documentation (or if you have a custom developed theme, the developer who wrote it) to find this right Javascript to run. If that and/or the below doesn't help, Replo support is always here to help.

Cart Apps

Rebuy

Rebuy Personalization Engine has a great SmartCart with tons of features. Usually, Rebuy's SmartCart doeson't need any additional configuration to open when a product is added to the cart - as long as neither "Redirect to Checkout" or "Redirect to Cart" is checked, the smart cart should open. If for whatever reason you need the Javascript, it's very simple:

Rebuy.SmartCart.show()

Learn more about Rebuy on Replo's Rebuy Integration docs.

Monster Upsells

Monster Upsells offers a very customizable slide-out cart.

fetch("/cart.js")
.then(res => res.json())
.then(cart => {
   window.monster_atc({id: cart.items?.[0].id, quantity: 0});
   window.openCart();
})

Slide-Cart & Cart Upsells

Slide-Cart offers a simple and powerful slide-out cart.

window.SLIDECART_UPDATE();
window.SLIDECART_OPEN();

Shopify.theme.jsAjaxCart.showDrawer()
Shopify.theme.jsAjaxCart.updateView()

fetch("/cart.js")
.then(res => res.json())
.then(cart => document.documentElement.dispatchEvent(
     new CustomEvent('cart:refresh', {
          bubbles: true,
          detail: { cart: cart, openMiniCart: true }
    })
))

fetch("/cart/update.js", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ updates: {}, sections: ["cart-drawer", "cart-icon-bubble"] })}).then((res) => res.json()).then((cartData) => { document.querySelector("cart-drawer").renderContents(cartData); document.querySelector("cart-drawer.drawer").classList.remove("is-empty"); });

const cartDrawerSlide = document.querySelector("#cart-drawer"); fetch('/?section_id=cart-drawer').then(d=>d.text()).then(text=>{ const sectionInnerHTML = new DOMParser().parseFromString(text, 'text/html'); const cartFormInnerHTML = sectionInnerHTML.getElementById('cart-drawer').innerHTML; cartDrawerSlide.innerHTML = cartFormInnerHTML; }); setTimeout(function(){ cartDrawerSlide.setAttribute('open','') }, 500);

window.cart.add(null, true);