Integrando Producto Personalizado Customily a Tienda Vtex

En este caso vamos a mostrarles un ejemplo práctico de la implementación de customily con Vtex para productos personalizados.

En la plataforma de customily podrán realizar personalizaciones de productos sin mayor esfuerzo y con todo el soporte por parte de ellos.

Lo primero es que hay que colocar el iframe que customily facilita


<iframe src="https://preview.customily.com/productViewer?product=81018015-9372-4cbc-89a7-b820d4d23d4e&set=8A315F55-7A43-41CF-BF04-E6CD8B601D4F" style="width:100%; height:750px"></iframe>


Puedes revisar la documentación de customily:
https://help.customily.com/en/article/integrating-customily-into-any-ecommerce-using-an-iframe

Donde nos dice que debemos colocar este código:

window.addEventListener("message", function (event) {
 if (event.data.action === "add-to-cart") {
  id=event.data.personalizationGUID
  // Añadimos este codigo generado por customily
  // a nuestro pedido
  var item = {
   id: 221907,   //idsku
   quantity: 1,  //cantidad
   seller: '1'   //id de la tienda
  };

  //Agregamos nuestro producto a la bolsa
  vtexjs.checkout.addToCart([item], null, 1).done(function(orderForm) {
   //Aquí puede haber cualquier otro código como el de desplegar la
   // bolsa de compra con el nuevo articulo personalizado

   // Y finalmente colocamos el id que nos genera customily dentro de las notas de                                    // cliente del pedido       vtexjs.checkout.getOrderForm().then(function(orderForm) {
   var obs = 'Texto informativo en detalles de la compra'
   return vtexjs.checkout.sendAttachment('openTextField', { value: obs });
  }).done(function(orderForm) {
   console.log("openTextField preenchido com: ", orderForm.openTextField);
  });
 }
}, false);

Cuando el cliente haya terminado la compra en el pedido se mostrará así:

Hasta el momento hemos obtenido el código necesario para consultar en la plataforma de customily el pedido y se lo hemos añadido al pedido de compra, pero eso no es todo tenemos que tener en cuenta otra variable:

Que el usuario después de añadir el producto a la bolsa lo elimine antes de realizar la compra, para esto tenemos que realizar un script que borre el id que habíamos agregado en el orderform.

Hay diversas partes desde donde podríamos eliminar el producto de la bolsa de compras, donde por lo general son 2, pero podrían ser menos o más:

1. Bolsa de compras: este aparece en todo el sitio y es donde podemos ir viendo que productos hemos agregado y la cantidad.
2. En el checkout.

En el primer caso es común que se cree un subtemplate donde van a estar contenidos todos los scripts generales del sitio y aquí es donde tenemos que agregar el script donde borraremos el id de customily del orderform cuando se elimine el producto personalizado de la bolsa.

En la segunda opción es un poco más compleja puesto que modificar los scripts del checkout puede ser contraproducente para la tienda, por eso tenemos que estar muy pendientes en todos los cambios que hagamos aquí.


1. Script Eliminar Producto Personalizado en bolsa/carrito de compras




2. Script Eliminar Producto Personalizado en Checkout










orderform: Es un objeto que contiene la información que será enviada a vtex cuando se realice la compra, contiene un identificador único, este id y los datos de este orderfomr son formateados después de cada compra.


Encuentra más información de métodos api en checkout:
https://github.com/vtex/vtex.js/tree/master/docs/checkout