Scaling Jeenax Without App Bloat

/* Native AJAX Cart Drawer Update Handler */
async function updateCartDrawer() {
  try {
    const response = await fetch('/cart.js');
    const cart = await response.json();
    
    // Update drawer item count badges
    document.querySelectorAll('.cart-count').forEach(badge => {
      badge.textContent = cart.item_count;
    });
    
    // Dynamically render cart items container
    const cartItemsContainer = document.getElementById('cart-drawer-items');
    if (cart.items.length === 0) {
      cartItemsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Your cart is empty.</p>';
      return;
    }
    
    cartItemsContainer.innerHTML = cart.items.map(item => `
      <div class="flex gap-4 py-4 border-b border-white/5">
        <img src="${item.image}" class="w-16 h-16 rounded object-cover" alt="${item.product_title}" />
        <div class="flex-1">
          <h4 class="text-xs font-bold text-white">${item.product_title}</h4>
          <p class="text-[10px] text-gray-400">${item.variant_title || ''}</p>
          <div class="flex justify-between items-center mt-2">
            <span class="text-xs text-indigo-400">${item.quantity} x ${Shopify.formatMoney(item.price)}</span>
          </div>
        </div>
      </div>
    `).join('');
  } catch (error) {
    console.error('Error updating cart drawer:', error);
  }
}