Does anyone know the code snippet that can be added to Replo to activate the slide out cart drawer on the new Horizon themes?

This post is now synced! Check it out here: Activate Slide Out Cart Drawer with Replo Code Snippet ⤵️ Any future comments will be automatically posted to the thread

<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 Cui, 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');
      });
  });

Works perfectly thank you @Carissa Cui!!