Botón Añadir al carrito#

Cuando la opción Add to cart está activada en Plantillas y opciones de diseño, aparece un botón en cada tarjeta de producto del widget. Al hacer clic no se añade el producto al carrito automáticamente —se lanza un evento JavaScript que tu tienda debe escuchar y gestionar.

Este diseño mantiene SoloSearch desacoplado de cualquier plataforma de ecommerce específica. Tu tienda intercepta el evento y llama a la API de carrito o mecanismo que ya utilice.

El evento#

Cuando el usuario hace clic en el botón Añadir al carrito, SoloSearch lanza un evento DOM personalizado en window:

solosearch:add-to-cart

El objeto detail del evento contiene los datos del producto del feed:

{
  id: "SKU-001",           // ID del producto en el feed
  title: "Running Shoes",
  price: 89.99,
  sale_price: 69.99,       // null si no está en oferta
  url: "https://myshop.com/running-shoes",
  image: "https://myshop.com/images/shoes.jpg",
  brand: "Nike",
  // ...cualquier otro campo indexado en el feed
}

Los campos disponibles dependen de los configurados en los campos del feed.

Escuchar el evento#

Añade un listener de JavaScript en cualquier lugar del código frontend de tu tienda que se ejecute después de cargar la página:

window.addEventListener('solosearch:add-to-cart', function (event) {
  const product = event.detail;

  console.log('Añadir al carrito pulsado:', product.id, product.title);

  // Llama aquí a la API de carrito de tu tienda
});

Confirmar la operación#

Mientras la operación de añadir al carrito está en curso, el widget muestra un spinner en el botón para indicar al usuario que algo está ocurriendo. Una vez que tu tienda haya terminado de añadir el producto al carrito (con éxito o no), debes lanzar un evento de confirmación de vuelta a SoloSearch para que el spinner se detenga:

solosearch:add-to-cart-done

Lánzalo en window cuando la operación del carrito se complete:

window.addEventListener('solosearch:add-to-cart', async function (event) {
  const product = event.detail;

  try {
    await myStore.addToCart(product.id, 1);
  } finally {
    window.dispatchEvent(new CustomEvent('solosearch:add-to-cart-done'));
  }
});

Usar finally asegura que el spinner siempre se detiene, incluso si la petición al carrito falla.

Notas#

• Mapeo del ID de producto: el campo id en el detail del evento es el que tu feed usa como identificador de producto. Asegúrate de que coincide con el ID que espera la API de carrito de tu plataforma. Si difieren, puede que necesites usar un campo de feed diferente (como un cart_id personalizado) y referenciar event.detail.cart_id en su lugar.
• Cantidades y variantes: el evento siempre pasa una cantidad de 1 y no gestiona variantes de producto. Si tus productos tienen variantes (tallas, colores), considera redirigir a la página del producto en lugar de añadir directamente al carrito.
• Feedback de confirmación: después de lanzar solosearch:add-to-cart-done, tu tienda debería actualizar su mini-carrito o mostrar una notificación para que el usuario sepa que la acción funcionó. SoloSearch detiene el spinner pero no proporciona ningún feedback adicional por su cuenta.