Activate Slide Out Cart Drawer with Replo Code Snippet

·

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

✅

1

4 comments

· Sorted by newest

Liam
·
·
Works perfectly thank you Carissa C.!!
🙌1

Carissa C.

·

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

🙌1

Liam
·
·
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!

Carissa C.

·

<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 🙂

Loading comments

Liam
·
·
Works perfectly thank you Carissa C.!!
🙌1

Carissa C.

·

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

🙌1

Liam
·
·
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!

Carissa C.

·

<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 🙂