Tu hogar,
más verde
que nunca

{% comment %} sections/featured-products.liquid {% endcomment %}

<section class="featured-products">
  <h2>{{ section.settings.title }}</h2>
  <div class="product-grid">
    {% for product in section.settings.collection.products
       limit: section.settings.limit %}
      {% render 'product-card', product: product %}
    {% endfor %}
  </div>
</section>

{% comment %} snippets/product-card.liquid {% endcomment %}

<div class="product-card">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         alt="{{ product.featured_image.alt | escape }}"
         loading="lazy" width="400" height="400">
    <h3>{{ product.title }}</h3>
  </a>

  {% if product.compare_at_price > product.price %}
    <span class="price--sale">{{ product.price | money }}</span>
    <s>{{ product.compare_at_price | money }}</s>
  {% else %}
    <span>{{ product.price | money }}</span>
  {% endif %}

  <button data-variant-id="{{ product.variants.first.id }}"
          class="btn-cart js-add-to-cart">
    {% if product.available %}Añadir{% else %}Agotado{% endif %}
  </button>
</div>

// assets/cart.js — Ajax Cart sin recarga de página

async function addToCart(variantId, quantity = 1) {
  const res = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      items: [{ id: variantId, quantity }]
    })
  });
  const cart = await res.json();
  updateCartUI(cart);
  openCartDrawer();
}

async function updateQuantity(lineItemKey, quantity) {
  const res = await fetch('/cart/change.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ id: lineItemKey, quantity })
  });
  const cart = await res.json();
  updateCartUI(cart);
}

function updateCartUI(cart) {
  document.querySelector('.cart-count').textContent = cart.item_count;
  document.querySelector('.cart-total').textContent =
    formatMoney(cart.total_price);
}

// Delegación de eventos para botones dinámicos
document.addEventListener('click', e => {
  const btn = e.target.closest('.js-add-to-cart');
  if (btn) addToCart(btn.dataset.variantId);
});

// config/settings_schema.json — Botánica Viva

[
  {
    "name": "Colores de la marca",
    "settings": [
      {
        "type": "color", "id": "color_primary",
        "label": "Verde principal",
        "default": "#2d6a4f"
      },
      {
        "type": "color", "id": "color_accent",
        "label": "Terracota (acento)",
        "default": "#e07a5f"
      },
      {
        "type": "color", "id": "color_bg",
        "label": "Fondo crema",
        "default": "#fefae0"
      }
    ]
  },
  {
    "name": "Tipografía",
    "settings": [
      {
        "type": "font_picker", "id": "font_heading",
        "label": "Fuente títulos",
        "default": "playfair_display_n7"
      },
      {
        "type": "font_picker", "id": "font_body",
        "label": "Fuente texto",
        "default": "lato_n4"
      }
    ]
  },
  {
    "name": "Redes Sociales",
    "settings": [
      { "type": "text", "id": "social_instagram",
        "label": "Instagram" },
      { "type": "text", "id": "social_tiktok",
        "label": "TikTok" }
    ]
  }
]