{% raw %}{% comment %} Add to product.liquid or main product section {% endcomment %}
<script type="text/javascript">
  if (typeof window.rybbit !== 'undefined' && {{ product | json }}) {
    const rybbitProduct = {{ product | json }};
    const rybbitCurrentVariant = {{ product.selected_or_first_available_variant | json }};

    window.rybbit.event('view_item', {
      item_id: rybbitCurrentVariant.sku || rybbitCurrentVariant.id,
      item_name: rybbitProduct.title,
      item_variant: rybbitCurrentVariant.title === 'Default Title' ? null : rybbitCurrentVariant.title,
      price: parseFloat(rybbitCurrentVariant.price) / 100, // Price is in cents
      currency: {{ cart.currency.iso_code | json }}
    });
  }
</script>{% endraw %}

{% raw %}{% comment %} Add near your product form or Add to Cart button in product.liquid/product form section {% endcomment %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const addToCartForm = document.querySelector('form[action="/cart/add"]'); // Common selector for product forms
  const addToCartButton = document.getElementById('add-to-cart-button') || addToCartForm?.querySelector('[type="submit"]');

  const trackAddToCart = function() {
    if (typeof window.rybbit !== 'undefined' && {{ product | json }}) {
      const rybbitProduct = {{ product | json }};
      const rybbitCurrentVariant = {{ product.selected_or_first_available_variant | json }};
      let quantity = 1;
      const quantityInput = addToCartForm?.querySelector('[name="quantity"], input[type="number"]'); // Common quantity input selectors
      if (quantityInput && quantityInput.value) {
        quantity = parseInt(quantityInput.value, 10);
      }

      window.rybbit.event('add_to_cart', {
        item_id: rybbitCurrentVariant.sku || rybbitCurrentVariant.id,
        item_name: rybbitProduct.title,
        item_variant: rybbitCurrentVariant.title === 'Default Title' ? null : rybbitCurrentVariant.title,
        price: parseFloat(rybbitCurrentVariant.price) / 100,
        currency: {{ cart.currency.iso_code | json }},
        quantity: quantity > 0 ? quantity : 1
      });
    }
  };

  if (addToCartButton) {
    addToCartButton.addEventListener('click', function(event) {
      // Delay slightly to allow form submission/validation if needed, or track on form submit
      // For themes with AJAX add to cart, this might need to hook into the theme's specific JS events.
      setTimeout(trackAddToCart, 100); // Basic click tracking
    });
  } else if (addToCartForm) {
     addToCartForm.addEventListener('submit', function(event) {
        trackAddToCart(); // Track on form submission
     });
  }
});
</script>{% endraw %}

{% raw %}{% comment %} Add to cart.liquid, near the checkout button logic {% endcomment %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const checkoutButton = document.getElementById('checkout-button') || document.querySelector('[name="checkout"], form[action$="/checkout"] [type="submit"]'); // Common selectors

  if (checkoutButton && typeof window.rybbit !== 'undefined' && {{ cart | json }}) {
    checkoutButton.addEventListener('click', function() {
      const rybbitCart = {{ cart | json }};
      let items = [];
      rybbitCart.items.forEach(function(item) {
        items.push({
          item_id: item.sku || item.variant_id,
          item_name: item.product_title,
          item_variant: item.variant_title === 'Default Title' ? null : item.variant_title,
          price: parseFloat(item.final_price) / 100,
          quantity: item.quantity
        });
      });

      window.rybbit.event('begin_checkout', {
        currency: rybbitCart.currency,
        value: parseFloat(rybbitCart.total_price) / 100,
        items: items
      });
    });
  }
});
</script>{% endraw %}

analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data.checkout;

  // Keep the payload small — Rybbit rejects event properties over 2048 chars
  // (serialized JSON). Send compact per-item data for large carts.
  const items = (checkout.lineItems || []).map((li) => ({
    id: li.variant?.sku || li.variant?.id,
    qty: li.quantity,
    price: li.variant?.price?.amount,
  }));

  fetch("https://app.rybbit.io/api/track", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    keepalive: true,
    body: JSON.stringify({
      type: "custom_event",
      site_id: "YOUR_SITE_ID",
      event_name: "purchase",
      // `properties` must be a JSON string (max 2048 chars).
      properties: JSON.stringify({
        transaction_id: checkout.order?.id || checkout.token,
        value: checkout.totalPrice?.amount,
        currency: checkout.currencyCode,
        items: items,
      }),
    }),
  });
});