Activate Slide Out Cart Drawer with Replo Code Snippet | Reploverse
\n\nTry this one out and let me know if it works! There hasn't been any official documentation around slide out carts for Horizon yet, so will have to test around until something hits 🙂","author":{"@type":"Person","name":"Carissa C.","url":"/user/4123df53-6522-4ebe-b9b0-f62c790063cc"},"datePublished":"2025-05-22T21:01:04.466264+00:00","dateModified":"2025-05-22T21:01:04.466264+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}},{"@type":"Comment","text":"Thanks Carissa C., that isn't working for the version I'm using (Savor, but I presume it is the same across all horizon themes). Please let me know if you find a working version to activate the slide out cart. Thanks!","author":{"@type":"Person","name":"Liam","url":"/user/c1353a9e-2be2-42d0-a417-329c5c960d0d"},"datePublished":"2025-05-23T11:11:43.570984+00:00","dateModified":"2025-05-23T11:11:43.570984+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}},{"@type":"Comment","text":"Ok we tested this one, it should work:\n\nfetch('/cart.js')\n .then(response => response.json())\n .then(cart => {\n fetch('/?snippets_id=cart-drawer')\n .then(response => response.text())\n .then(text => {\n const sectionInnerHTML = new DOMParser().parseFromString(text, 'text/html');\n const cartFormInnerHTML = sectionInnerHTML.querySelector('cart-items-component').innerHTML;\n document.querySelector('cart-items-component').innerHTML = cartFormInnerHTML;\n document.querySelector('cart-drawer-component > button').click();\n document.querySelector('.cart-bubble__text-count').innerHTML = cart.item_count;\n document.querySelector('cart-icon').classList.add('header-actions__cart-icon--has-cart');\n document.querySelector('.cart-bubble').classList.remove('visually-hidden');\n });\n });\n","author":{"@type":"Person","name":"Carissa C.","url":"/user/4123df53-6522-4ebe-b9b0-f62c790063cc"},"datePublished":"2025-05-27T18:23:11.909055+00:00","dateModified":"2025-05-27T18:23:11.909055+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Works perfectly thank you Carissa C.!!","author":{"@type":"Person","name":"Liam","url":"/user/c1353a9e-2be2-42d0-a417-329c5c960d0d"},"datePublished":"2025-05-27T20:17:55.03106+00:00","dateModified":"2025-05-27T20:17:55.03106+00:00","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]}
<script>
document.addEventListener('DOMContentLoaded', function() {
var cartButton = document.querySelector('.cart-button');
var cartDrawer = document.querySelector('.cart-drawer');
if (cartButton && cartDrawer) {
cartButton.addEventListener('click', function() {
cartDrawer.classList.toggle('open');
});
}
});
</script>
Try this one out and let me know if it works! There hasn't been any official documentation around slide out carts for Horizon yet, so will have to test around until something hits 🙂
Thanks Carissa C., that isn't working for the version I'm using (Savor, but I presume it is the same across all horizon themes). Please let me know if you find a working version to activate the slide out cart. Thanks!
