Revolutionizing Magento 2 Frontends with Hyvä Themes & Alpine.js

Hyvä Alpine.js Cart Component Code

<!-- Lightweight Hyvä Alpine.js Mini-Cart Component -->
<div x-data="initMiniCart()" @cart-updated.window="fetchCart()" class="relative">
  <button @click="open = !open" class="btn-cart">
    Cart (<span x-text="cart.summary_count">0</span>)
  </button>
</div>

<script>
function initMiniCart() {
  return {
    open: false,
    cart: {},
    fetchCart() {
      fetch('/customer/section/load/?sections=cart')
        .then(res => res.json())
        .then(data => this.cart = data.cart);
    }
  }
}
</script>