Custom Drawer Cart Plugin

These code for Custom Drawer Plugin by @Michael

#1. Click link – trigger Custom Drawer Cart Popup

<!-- Trigger Cart popup on clicking Cart link -->
<script>
window.addEventListener('load', function() {
    setTimeout(function() {
        var customCartLinks = document.querySelectorAll('.html-block a[href="/cart"]');
        var mainCartIcon = document.querySelector('#floatingCart a[href="/cart"]');
        
        if (mainCartIcon) {
            customCartLinks.forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    mainCartIcon.click();
                    
                    return false;
                }, true);
            });
        }
    }, 1000);
});
</script>
<style>
div#floatingCart {
   display: flex !important;
  visibility: hidden !important;
}
</style>

#2. Add custom content to Cart Drawer

  onUpdateFunction: function(el, data) {
    var cartSummary = el.one('.cart-summary');
    
    if (cartSummary) {
        if (!cartSummary.one('.custom-text')) {
            var customText = document.createElement('div');
            customText.className = 'custom-text';
            customText.innerHTML = '<p style="margin: 10px 0; text-align: center;">🎉Miễn phí vận chuyển cho đơn hàng trên 500k!</p>';
            
            cartSummary.getDOMNode().appendChild(customText);
        }
    }
}

#2v2. Add content but using Section Loader Plugin

onUpdateFunction: function(el, data) {
      var cartSummary = el.one('.cart-summary');

      if (cartSummary) {
          var existingContent = cartSummary.getDOMNode().querySelector('.custom-loaded-content');

          if (!existingContent) {
              var customContainer = document.createElement('div');
              customContainer.className = 'custom-loaded-content';

              wm$.getFragment('/cart-popup-content', 'section:first-of-type').then(function(fragment) {
                  customContainer.appendChild(fragment);
                  cartSummary.getDOMNode().appendChild(customContainer);
                  wm$.reloadSquarespaceLifecycle([customContainer]);
              }).catch(function(error) {
                  console.error('Error loading cart popup content:', error);
              });
          }
      }
  }