Manejando Attachment (anexos) con VTEX

Quiero compartir la lógica de uso para anexos de servicio con vtex, la principal razón es que los errores que pongo en el post los descubrimos a medida que desarrollábamos la funcionalidad para el cliente, con el equipo llegamos a la conclusión de que habríamos ahorrado tiempo si alguien nos hubiera compartido esto.
Es un proyecto de E-commerce del cual por temas aburridos de contratos no puedo decir el nombre.
Lo interesante del proyecto es que tenia que usar anexos y servicios para que por medio de los anexos se pudiera donar un articulo de la tienda.

El Requerimiento

Los usuarios finales podrian elegir si comprar o donar un articulo de la tienda, entonces en la vitrina de compra cada articulo tendria dos botones uno de comprar y otro de donar.

La Solución
Se nos ocurrio asociar cada producto a un anexo de vtex. Donde el anexo tiene el nombre de la fundación a la cual se donaria el producto. En teoria deberia poder aparecer el anexo en la vitrina de cada producto, igual que en la pagina de producto.

¿Que es una anexo?

Alguna vez han visto esas promociones que dicen mas o menos; Por la compra del celular le regalamos una funda para el celular gratis. Pues la funda es el anexo del producto "celular". Esto se puede usar en miles de maneras en E-commerce.

El inicio del caos

La solucion pensada desde el desconocimiento suena muy funcional pero tiene sus problemas de fondo y justo por eso me parece buena idea documentar nuestras soluciones y nuestros problemas. Muy probablemente le van a servir a alguien mas.

Problema 1
Para saber si un producto tiene o no un anexo (si se puede donar o no) debe primero ser comprado, lo que nos impedia mostar el anexo nombre de la fundación en la pagina de producto o vitrinas de producto.

Solucionamos el primer problema de la siguiente manera:

Debiamos enviar en una especificacion de producto el nombre de la fundacion, de manera que la pudieramos consumir desde el front llamando al api de ProductSearch de vtex.

En teoria con eso solucionabamos el problema de mostar el nombre de la fundacion (que en realiadad era un anexo agregado a cada producto). el pseudoproblema es que agregabamos un paso de mas a la creacion de producto en vtex. Ahora el cliente tenia que tener presente ese campo nuevo al momento de crear cada producto, no solamente debia agregar el anexo, tambien debia llenar la especifiación de producto.

Problema 2
el API de vtex no permite comprar y luego donar un producto. El API no recibe el mismo ID de producto dos veces y como debes comprar el producto para luego agregar el anexo pues lo que hacia el api de compra de vtex es actualizar el producto que ya tengo en el carrito de compra.

Ejemplo practico.

FUNCIONAMIENTO ESPERADO

• 1. Usuario agrega al carrito el producto con ID 10.
• 2. Tengo (1) producto con ID 10 en el carrito de compras
• 3. Usuario nuevamente agrega el producto con ID 10 pero esta vez para donar (con anexo)
• 4. Tengo (2) productos con ID 10 en el carrito de compras, el primero seria un producto para comprar normal (sin anexo) el segundo seria el mismo producto pero esta vez para donar (con anexo)

FUNCIONAMIENTO PROBLEMA

• 1. Usuario agrega al carrito el producto con ID 10.
• 2. Tengo (1) producto con ID 10 en el carrito de compras
• 3. Usuario nuevamente agrega el producto con ID 10 pero esta vez para donar (con anexo)
• 4. En el carrito de compras queda solo 1 producto con anexo, lo que sucede es que vtex actualizó el producto con ID 10 y le agrego el anexo.

Nuestra solucion

Primero agregar el producto al carrito

var item = {
  id: 10,
  quantity: 1,
  seller: '1'
};
vtexjs.checkout.addToCart([item], null, 3)
  .done(function(orderForm) {
    alert('Item adicionado!');
    console.log(orderForm);
});

Item es el objeto que contiene;

• ID: El Id del producto que voy a agregar al carrito.
• QUANTITY: La cantidad de ese producto.
• SELLER: Almacen del producto, en este caso siempre sera (1), Este dato pueda variar si la tienda es un marketplace.

Luego de tener el producto en el carrito, hacemos un llamado a getOrderForm de vtex, para asi revisar si el producto tiene anexo. Que basicamente es revisar que la propiedad "attachmentOfferings" llegue con datos.

Si es asi, quiere decir que el producto es para donación, las validaciónes o pasos que hicimos son los siguientes.

• Guardar los productos que estan en el carrito en el localstorage.
• Vaciar el carrito con el metodo removeItems()
• Comprar el producto que sa va donar con el metodo addToCart()
• Agregar el anexo al producto que acabamos de comprar con el metodo addItemAttachment()
• Enviar todos los productos del localstorage al carrito de compras nuevamente con el metodo addToCart()

Esa es la logica que desarrollamos, muy probablemente luego ponga el codigo aqui, ahora mismo queria documentar la logica de la solucion sobre todo por tiempo.

Toda la documentacion de los metodos que usamos esta aqui.
https://github.com/vtex/vtex.js/tree/master/docs/checkout