<script src="https://app.selektable.com/widgets/embed.js" data-store-id="store_xxx" async></script>

<button
  type="button"
  class="selektable-try-on"
  id="selektable-btn"
  data-product-id="{{ product.selected_or_first_available_variant.id }}"
  data-product-image="{{ product.selected_or_first_available_variant.featured_image | default: product.featured_image | image_url: width: 1024 | prepend: 'https:' }}"
>
  View in your room
</button>

<script>
document.getElementById('selektable-btn').addEventListener('click', function() {
  var btn = this;
  Selektable.open('widget_abc123', {
    productId: btn.dataset.productId,
    productTitle: {{ product.title | json }},
    productImage: btn.dataset.productImage,
    productUrl: {{ shop.url | append: product.url | json }},
    productImages: [
      {% for image in product.images limit: 5 %}
      {
        id: {{ image.id }},
        src: {{ image.src | image_url: width: 1024 | prepend: 'https:' | json }},
        alt: {{ image.alt | json }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ],

    // Cart integration using Shopify AJAX API
    onAddToCart: async function(product, qty) {
      const response = await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: product.id, quantity: qty })
      });
      return { success: response.ok };
    },

    onViewCart: function() {
      window.location.href = '/cart';
    },

    onCheckout: function() {
      window.location.href = '/checkout';
    }
  });
});
</script>

<script>
document.addEventListener('variant:changed', function(e) {
  var btn = document.getElementById('selektable-btn');
  if (btn && e.detail && e.detail.variant) {
    btn.dataset.productId = e.detail.variant.id;
    if (e.detail.variant.featured_image) {
      btn.dataset.productImage = e.detail.variant.featured_image.src;
    }
  }
});
</script>

.selektable-try-on {
  /* Match your theme's button styles */
  display: inline-block;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
}