Shopify Speed Optimization

{% comment %} Native Shopify Product Bundle Coded Natively {% endcomment %}
<div class="product-bundle-grid">
  {% for product in collections.bundle-items.products limit: 3 %}
    <div class="bundle-item" data-product-id="{{ product.id }}">
      <img src="{{ product.featured_image | img_url: '100x' }}" alt="{{ product.title }}">
      <p>{{ product.title }} - {{ product.price | money }}</p>
      <input type="checkbox" checked class="bundle-item-select" data-variant-id="{{ product.first_available_variant.id }}">
    </div>
  {% endfor %}
</div>
<button id="add-bundle-to-cart" class="btn-premium">Add Bundle (Save 15%)</button>

<script>
document.getElementById('add-bundle-to-cart')?.addEventListener('click', async () => {
  const items = Array.from(document.querySelectorAll('.bundle-item-select:checked')).map(el => ({
    id: parseInt(el.dataset.variantId),
    quantity: 1
  }));
  
  if (items.length) {
    const res = await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items })
    });
    const cart = await res.json();
    // Trigger native AJAX cart drawer reload
    window.refreshCartDrawer?.();
  }
});
</script>