\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}}]}
Does anyone know the code snippet that can be added to Replo to activate the slide out cart drawer on the new Horizon themes?
<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!
Ok we tested this one, it should work:
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
fetch('/?snippets_id=cart-drawer')
.then(response => response.text())
.then(text => {
const sectionInnerHTML = new DOMParser().parseFromString(text, 'text/html');
const cartFormInnerHTML = sectionInnerHTML.querySelector('cart-items-component').innerHTML;
document.querySelector('cart-items-component').innerHTML = cartFormInnerHTML;
document.querySelector('cart-drawer-component > button').click();
document.querySelector('.cart-bubble__text-count').innerHTML = cart.item_count;
document.querySelector('cart-icon').classList.add('header-actions__cart-icon--has-cart');
document.querySelector('.cart-bubble').classList.remove('visually-hidden');
});
});
