Buenas tardes, comunidad
Estoy construyendo una aplicación dónde necesito tomar los datos que están en el carrito, ¿cómo podría hacer esta integración? Estuve consultando las API y probando con el orderForm, pero no me queda claro cómo funciona, cada que hago una consulta con orderForm desde mi aplicación me está trayendo un orderFormId distinto con items vacíos, ¿alguno tiene una idea de qué podría funcionar para este caso?
Hola @marmarquez tudo bem?
Podrías enviar capturas de sua screen y más detalles de la aplicación?
Pero, yo tengo algunas sugerencias para que puedas probar de tu lado. Seguinte:
Para acceder a los datos del carrito en VTEX e integrarlos en tu aplicación, puedes utilizar la API orderForm. Esta API es responsable de gestionar el carrito de compras de los usuarios.
El orderFormId es un identificador único del carrito de compras de un usuario. Se crea cuando se genera un nuevo carrito o cuando haces una nueva solicitud sin especificar el orderFormId existente. Si estás recibiendo un orderFormId diferente en cada solicitud, probablemente estés creando un nuevo carrito cada vez, en lugar de acceder al carrito existente.
orderFormId existente:orderFormId que se almacena, generalmente en una cookie o en el localStorage.orderFormId para asegurarse de que está consultando el carrito correcto.orderForm con el orderFormId:orderFormId en tu solicitud para obtener los datos del carrito.GET /api/checkout/pub/orderForm/{orderFormId}
orderFormId:orderFormId, guárdalo y úsalo para futuras interacciones hasta que el pedido se finalice o el usuario vacíe el carrito.Si encuentras algún error al intentar acceder al orderForm, por favor, infórmanos para que podamos ayudarte.
Espero que esta información te ayude.
Hasta luego,
Estevão.
Gracias, Estevao! Me aclaras un montón.
Es una aplicación para gestionar devoluciones, construida con JS. Necesitamos crear un modo de traer items agregados al carrito, y cuando hago la peticion al API con el orderForm me crea estos id nuevos, por cada petición.
La cuestión aquí sería extraer ese dato del orderFormId de las cookies, entonces 
@marmarquez De nada!
Parece que el problema está relacionado con que cada vez que haces una solicitud a la API del orderForm, se genera un nuevo orderFormId, lo que provoca inconsistencias en los ítems del carrito. Para resolver esto, puedes extraer el orderFormId existente de las cookies del navegador antes de hacer la solicitud.
orderFormId de las Cookies: Primero, necesitas acceder al orderFormId que está almacenado en las cookies del navegador. En JavaScript, puedes hacerlo de la siguiente manera:function getOrderFormId() {
const cookies = document.cookie.split('; ');
const orderFormCookie = cookies.find(row => row.startsWith('checkout.vtex.com/orderFormId='));
return orderFormCookie ? orderFormCookie.split('=')[1] : null;
}
Este código buscará la cookie que contiene el orderFormId y lo devolverá.
orderFormId en las Solicitudes: Una vez que tengas el orderFormId, puedes usarlo en las solicitudes a la API del orderForm para asegurarte de que estás accediendo al carrito correcto:const orderFormId = getOrderFormId();
if (orderFormId) {
fetch(`/api/checkout/pub/orderForm/${orderFormId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => console.error('Error:', error));
} else {
console.error('orderFormId no encontrado en las cookies.');
}
orderForm Consistente: Siempre que hagas una nueva solicitud a la API del orderForm, utiliza el mismo orderFormId extraído de las cookies. Esto debería mantener el estado del carrito consistente en lugar de generar un nuevo carrito en cada solicitud.Otro Ejemplo de código en JavaScript para capturar el orderFormId:
function getOrderFormIdFromCookies() {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
const [name, value] = cookie.trim().split('=');
if (name === 'checkout.vtex.com') {
const orderFormData = JSON.parse(decodeURIComponent(value));
return orderFormData.orderFormId;
}
}
return null;
}
const orderFormId = getOrderFormIdFromCookies();
if (orderFormId) {
console.log('OrderForm ID:', orderFormId);
} else {
console.log('OrderForm ID no encontrado en las cookies.');
}
Este código recorre las cookies del navegador, localiza la cookie específica que almacena el orderFormId y la devuelve. Esta función se puede utilizar en las páginas de tu sitio antes de que el usuario entre en el checkout, permitiéndote capturar el orderFormId actual.
Mira si esto te ayuda!
ufff! Muchas gracias! Súper claro! Voy a probarlo como dices.
Te cuento si resulta 
Hola, Estevao!
Estoy probando de la manera que me dijiste, pero dentro de la lista de cookies que trae no obtiene la de checkout.vtex.com, por tanto no estoy logrando obtener el orderFormId 
Además, estoy haciendo la prueba desde una app custom que estoy creando, porque al obtener el orderFormId debo enviarlo a mi aplicación.
Hola @marmarquez
Entiendo. Si no puedes obtener el orderFormId de la cookie checkout.vtex.com, esto puede deberse a varios factores, como la configuración de cookies o los permisos de tu aplicación custom.
Una alternativa sería usar la API de checkout de VTEX para capturar el orderFormId. Cuando haces una solicitud para crear un nuevo orderForm, se genera el orderFormId. Aquí tienes cómo hacerlo:
async function getOrderFormId() {
try {
const response = await fetch('/api/checkout/pub/orderForm', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
});
const data = await response.json();
return data.orderFormId;
} catch (error) {
console.error('Error al obtener el OrderFormId:', error);
}
}
// Usando la función para obtener el orderFormId y enviarlo a tu aplicación
getOrderFormId().then(orderFormId => {
if (orderFormId) {
console.log('OrderForm ID:', orderFormId);
// Enviar a tu aplicación
} else {
console.log('No fue posible obtener el OrderForm ID.');
}
});
``
Este enfoque crea un nuevo orderForm si aún no existe uno, y captura el orderFormId. De esta manera, puedes enviar el orderFormId directamente a tu aplicación.
Prueba esta versión y me avisas.
At.te,
Estevão.Ya lo intenté de esta forma pero el orderFormId que se genera es distinto al que está en la cookie, porque genera un nuevo orderFormId para este request.
Estoy intentando replantear el problema, intentando capturar los sku de los productos que están agregados al carrito, sabes si hay alguna forma de hacer esto con algun context, request de API o algo asi? Estaba revisando el context de order items pero no he visto nada que me permita capturar los sku.
Mi objetivo es poder capturar los sku añadidos al carrito y poderlos pasar a mi aplicativo externo.
Hola @marmarquez Hmmmm Entiendo.
Cuando haces una solicitud al orderForm y recibes un orderFormId diferente al que está en las cookies, esto ocurre porque el pedido en VTEX se trata de forma stateless (sin estado). Por lo tanto, en cada nueva petición, si no se pasa correctamente el orderFormId, la API puede generar uno nuevo.
Para capturar los SKUs de los productos en el carrito y pasarlos a una aplicación externa, puedes seguir los siguientes pasos:
orderForm sin necesidad de hacer una petición API separada. Este contexto es vtexjs.checkout.orderForm. Puedes acceder a él directamente en el frontend de la tienda y ya contendrá el orderFormId correcto y los artículos en el carrito, incluidos sus SKUs.Ejemplo:vtexjs.checkout.getOrderForm()
.then(orderForm => {
const skus = orderForm.items.map(item => item.id);
console.log(skus); // Aquí tienes todos los SKUs añadidos al carrito
});
orderFormId directamente desde la cookie, asegúrate de que tu aplicación tiene permiso para acceder a cookies de terceros (cross-site). Esto puede ser complicado debido a las configuraciones modernas de privacidad de los navegadores.$(window).on('orderFormUpdated.vtex', function(event, orderForm) {
const skus = orderForm.items.map(item => item.id);
console.log('SKUs en el carrito:', skus);
});
/api/checkout/pub/orderForms/simulation) puede utilizarse para predecir los artículos en el carrito y puede devolver detalles sobre los SKUs, pero no es el método más eficiente para este caso.Si estos enfoques no resuelven el problema, puede que sea necesario ajustar la forma en que tu aplicación custom se está integrando con VTEX para garantizar que el orderFormId sea persistente y esté correctamente asociado a la sesión del usuario.
Ay, gracias por tomarte el tiempo para la respuesta tan detallada, me ayuda bastante.
La 2 y la 4 las veo complicadas, no sé si sean factibles,
La 1, dónde puedo aplicarla? Me dices que desde el front de la tienda, pero para usar vtexjs.checkout.orderForm lo puedo usar desde una app custom tipo react? O desde una pixel app?
Porque lo último que intenté fue hacer la petición al API vtex del orderForm desde una app custom, que estoy testeando en la tienda, y ahora estoy teniendo problemas de CORS.
@marmarquez Hola. Perdon pela demora.
Me alegra que la información te haya sido útil!
vtexjs.checkout.orderForm en una app custom: Puedes utilizar el objeto vtexjs.checkout.orderForm desde el front-end de la tienda en una app custom, incluso si está construida con React. Para ello, debes asegurarte de que tu app está correctamente integrada en la tienda VTEX y tiene acceso al contexto global del front-end. Este contexto ya debería estar disponible en el window, por lo que no necesitas hacer una configuración adicional.Si estás construyendo una Pixel app, el acceso a este objeto también es posible, ya que los píxeles se ejecutan en el front-end de la tienda, lo que significa que tienes acceso al mismo contexto global. En ambos casos, puedes manipular vtexjs.checkout.orderForm directamente.orderForm desde una app custom: Cuando haces peticiones al API desde una app custom, es común encontrarse con problemas de CORS. Esto sucede porque el navegador bloquea peticiones que cruzan dominios a menos que el servidor (en este caso, VTEX) permita esas peticiones desde tu dominio específico.Si estás enfrentando este problema, te recomendaría usar el enfoque vtexjs.checkout.orderForm directamente en el front-end para evitar estos problemas de CORS. Este objeto ya maneja internamente las sesiones de usuario y evita la necesidad de hacer peticiones directas al API desde tu app custom.En caso de que necesites hacer una petición directa, asegúrate de que estás configurando correctamente los encabezados CORS en tu servidor backend, o utiliza una proxy server para evitar el problema.Intenta implementar el enfoque de vtexjs.checkout.orderForm en tu app React o Pixel app, ya que esto te permitirá evitar problemas de CORS y trabajar directamente con los datos del carrito.