custom-cart-logic.js

{% if item.properties._free_product %}
  <span class="cart-item__price free-item-label">FREE</span>
{% else %}
  <span class="cart-item__price">
    {{ item.final_line_price | money }}
  </span>
{% endif %}



/* =========================================
   DAWN AUTO FREE PRODUCT - FINAL FIXED
========================================= */

const MAIN_VARIANT_ID = 46665975562417;
const FREE_VARIANT_ID = 45484760629425;

let isProcessing = false;

/* Get Cart */
async function getCart() {
  const res = await fetch('/cart.js');
  return await res.json();
}

/* Refresh Drawer Properly */
async function refreshDrawer() {

  const response = await fetch('/?sections=cart-drawer');
  const data = await response.json();

  const drawer = document.querySelector('cart-drawer');
  if (!drawer) return;

  const parser = new DOMParser();
  const html = parser.parseFromString(data['cart-drawer'], 'text/html');

  const newDrawer = html.querySelector('cart-drawer');

  drawer.innerHTML = newDrawer.innerHTML;
}

/* Sync Logic */
async function syncFreeProduct() {

  if (isProcessing) return;
  isProcessing = true;

  const cart = await getCart();

  let mainExists = false;
  let freeLine = null;

  cart.items.forEach((item, index) => {

    if (item.id === MAIN_VARIANT_ID) {
      mainExists = true;
    }

    if (
      item.id === FREE_VARIANT_ID &&
      item.properties &&
      item.properties._free_product
    ) {
      freeLine = index + 1;
    }

  });

  // Add free product
  if (mainExists && !freeLine) {

    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: FREE_VARIANT_ID,
        quantity: 1,
        properties: { _free_product: "true" }
      })
    });

    await refreshDrawer();
  }

  // Remove free product
  if (!mainExists && freeLine) {

    await fetch('/cart/change.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        line: freeLine,
        quantity: 0
      })
    });

    await refreshDrawer();
  }

  isProcessing = false;
}


/* Watch Drawer Changes */
document.addEventListener('DOMContentLoaded', function () {

  const drawer = document.querySelector('cart-drawer');

  if (!drawer) return;

  const observer = new MutationObserver(() => {
    syncFreeProduct();
  });

  observer.observe(drawer, {
    childList: true,
    subtree: true
  });

});