Un widget de recomendaciones puede poner un producto en el carrito del visitante sin salir de la página: el botón Añadir al carrito de la tarjeta ejecuta un breve fragmento de JavaScript que usted guarda una vez para su cuenta, y todos los widgets lo usan. Personyze no puede saber cómo funciona el carrito de su tienda, así que el código es suyo — normalmente unas pocas líneas en torno a la propia solicitud de “añadir” de su carrito.
Dónde está el código
Vaya a Configuración → Configuración de recomendaciones → Seguimiento de productos, abra Producto añadido al carrito y, en Qué hace el widget, despliegue Añadido rápido al carrito. El panel lo marca como Callback del widget de Personyze (no es un tracker): no detecta los añadidos al carrito en su sitio — eso lo hacen las fuentes de encima —, sino que se ejecuta cuando un visitante hace clic en Añadir al carrito dentro de un widget de Personyze.
El recuadro se abre con una plantilla de código. Edítela y pulse Guardar. Hasta que se guarde aquí un código que funcione, el botón falla y el widget muestra su mensaje de error.
Lo que debe hacer el código
| Parte | Qué es |
|---|---|
| La función | El código debe declarar una función llamada add_to_cart. Guardar rechaza cualquier otra cosa con This script must declare function named "add_to_cart()", y un script con errores, con There are errors in script. Algunas opciones de widget y guías antiguas todavía mencionan add_to_cart_for_personyze(); la función a la que se llama es add_to_cart. |
products |
Un array con un objeto por producto: internal_id (el Internal ID del producto en su catálogo, como cadena) y quantity (1 o más). Un widget de pack pasa todos los productos seleccionados en una sola llamada. Las columnas del catálogo que añada en Campos disponibles → Añadir campo viajan en cada objeto con su propio nombre — añada sku y cada producto llega con p.sku. |
arg |
Indefinido salvo que el widget lo defina. Cada widget tiene su propio campo para ello — Quick Add to Cart — Cart Integration Argument o Extra add_to_cart Argument, según la plantilla — para todo lo que varía de un widget a otro, como una variante o una cantidad. |
| Valor devuelto | Una Promise. Una async function la devuelve por usted; cualquier otra cosa falla con add_to_cart() must return Promise object. |
| Éxito | La Promise se resuelve. Personyze registra entonces Producto añadido al carrito para cada producto, atribuido al widget — no tiene que notificarlo usted. |
| Fallo | La Promise se rechaza o la función lanza una excepción. El widget muestra su error en lugar de su confirmación. |
El código se ejecuta en el navegador del visitante, en su sitio, así que una URL relativa como /cart/add llega a su tienda con la propia sesión del visitante. Haga referencia a los objetos globales de su sitio mediante window (por ejemplo window.myCart); el JavaScript moderno sirve, se transpila para los navegadores antiguos.
Un ejemplo mínimo
Una solicitud por producto, una tras otra. Sustituya la URL y el cuerpo por la solicitud real de añadir al carrito de su tienda:
async function add_to_cart(products, arg)
{ // One request per product. If your cart takes several products at once, send one request instead.
for (const {internal_id, quantity} of products)
{ // Replace with your store's real "add to cart" request.
const response = await fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(internal_id) + '&qty=' + quantity
});
if (!response.ok)
{ throw new Error(response.statusText);
}
}
}Lo mismo, con todas las solicitudes enviadas a la vez:
function add_to_cart(products, arg)
{ return Promise.all(products.map(p =>
fetch('/cart/add',
{ method: 'POST',
credentials: 'include',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'product=' + encodeURIComponent(p.internal_id) + '&qty=' + p.quantity
}).then(response =>
{ if (!response.ok)
{ throw new Error(response.statusText);
}
})
));
}Si su código notifica eventos de carrito a Personyze mientras se ejecuta (un personyze.push con un evento de producto, por ejemplo para reflejar el carrito que devuelve su API), Personyze no añade encima su propio Producto añadido al carrito.
Mensajes
Debajo del código, Mostrar mensaje cuando se añada correctamente y Mostrar mensaje cuando falle al añadir añaden cada uno un mensaje para toda la cuenta — Nombre del icono, Texto, Estilo (CSS) y Ocultar después de (segundos), con una vista previa en vivo. Aparece después de cada añadido rápido desde cualquier widget, además de la confirmación que muestra el propio widget.
Quitado rápido del carrito y Añadido rápido a la lista de deseos
- Quitado rápido del carrito — más abajo en el mismo recuadro: código que se ejecuta cuando un visitante hace clic en “Remove from cart” dentro de un widget de Personyze. Debe declarar
remove_from_cart(products, arg); cada producto lleva suinternal_id. - Añadido rápido a la lista de deseos — en el panel Producto añadido a favoritos, en Qué hace el widget: código que se ejecuta cuando un visitante hace clic en “Add to wishlist” dentro de un widget de Personyze. Debe declarar
add_to_wishlist(products, arg).
Ambos siguen las mismas reglas: los mismos argumentos y una Promise que se resuelve si todo va bien. Un widget solo los llama si su diseño tiene ese botón — los corazones de lista de deseos de las plantillas de producto de la galería registran el guardado en Personyze sin ellos.
Relacionado
- Seguimiento de interacciones con productos — detectar vistas, añadidos al carrito y compras en su sitio.
- Product Slider & Grid y Buy Together — widgets con un botón de añadir al carrito.