Extiende MinCart con JavaScript - Extend MinCart with javascript

Introducción

Uno de nuestros objetivos es ofrecer una aplicación amigable para desarrolladores que te permita personalizar y extender sus funcionalidades para satisfacer tus necesidades específicas.

Esta documentación sirve como una guía básica temporal sobre cómo puedes extender MinCart utilizando JavaScript. Es un punto de partida para los desarrolladores que buscan integrar funciones avanzadas y personalizadas en sus tiendas Shopify. Estamos trabajando en una documentación más robusta, que será lanzada en el futuro.

Extendiendo MinCart

MinCart expone el objeto "mincart" en la ventana y ofrece algunos eventos a los que puedes escuchar para reaccionar a lo que MinCart está haciendo. Aquí tienes un ejemplo comentado de los principales eventos y cómo obtener la cantidad mínima de producto actual.

Fragmento de JavaScript

/**
 * Este evento significa que MinCart ha cargado tus configuraciones de límites desde el almacenamiento web
 * o desde nuestro servidor.
 * 
 * Para un cálculo más rápido de los límites, almacenamos los límites en el almacenamiento web después de 
 * obtenerlos de nuestro servidor. Esto nos permite bloquear el pago sin tener que esperar la respuesta 
 * de nuestros servidores.
 *
 * Después de calcular los límites desde el almacenamiento web, seguimos obteniendo los límites de nuestro 
 * servidor para asegurarnos de que las configuraciones de límite no hayan cambiado.
 *
 * Esto significa que los eventos limits-loaded y limits-calculation se activarán 2 veces al cargar la página.
 */
document.addEventListener("mincart:limits-loaded", event => {
  const mincart = event.detail.mincart;
  console.log("¡límites cargados!");
  console.log(mincart.limits);

  mincart.limits.forEach(limit => {
    const currentProductIsLimitTarget = limit.items.some(limitTargetItem => {
      /**
       * mincart.itemIsLimitTarget se usa para verificar si un artículo específico es el objetivo
       * de uno de los límites.
       *
       * Parámetros de la función:
       * @param {object} item - el objeto del artículo
       * @param {object} limitTargetItem - el objeto del límite objetivo
       * @param {string} limitType - el tipo de límite
       * @returns true si el artículo está incluido en el límite, false en caso contrario
       *
       * mincart.currentProduct solo está disponible en la página del producto. (si estás
       * haciendo un tipo de límite de variante, necesitarás agregar manualmente la propiedad
       * "variant_id" para especificar la variante seleccionada actualmente)
       */
      return mincart.itemIsLimitTarget(mincart.currentProduct, limitTargetItem, limit.type)
    });

    /**
     * Los artículos pueden estar excluidos del precio, de la cantidad, de la cantidad de artículos 
     * únicos o del peso en un solo límite.
     * 
     * mincart.itemIsExcludedFromType verifica si el artículo especificado está excluido de uno de
     * estos tipos específicos en el límite especificado.
     *
     * @param {object} item - el objeto del artículo
     * @param {object} limit - el objeto del límite
     * @param {string} type - el tipo de límite (precio, cantidad, artículo, peso)
     * @returns true si el artículo está excluido del límite para el tipo dado, false en caso contrario
     */
    const currentProductIsExcluded = mincart.itemIsExcludedFromType(mincart.currentProduct, limit, "quantity");

    if (currentProductIsLimitTarget && !currentProductIsExcluded) {
      console.log("Cantidad mínima del producto actual", limit.min_quantity);
    }
  });
});

/**
 * Este evento significa que MinCart ha comenzado a calcular los límites para ver si
 * se respetan o no.
 *
 * Esto se activará después de que los límites se carguen o cuando se actualice el carrito.
 */
document.addEventListener("mincart:limits-calculation-started", event => {
  const mincart = event.detail.mincart;
  console.log("¡cálculo de límites iniciado!");
  console.log(mincart.limits);
});

/**
 * Este evento significa que MinCart ha terminado de calcular los límites para ver si 
 * se respetan o no.
 *
 * Esto se activará después de que los límites se carguen o cuando se actualice el carrito.
 * 
 * después de este evento, todos los límites tendrán un booleano "isRespected" que te permitirá
 * saber si el límite se respeta actualmente o no.
 */
document.addEventListener("mincart:limits-calculation-finished", event => {
  const mincart = event.detail.mincart;
  console.log("¡cálculo de límites completado!");
  console.log(mincart.limits);
});

Conclusión

Este fragmento es un ejemplo básico de cómo puedes comenzar a extender la funcionalidad de MinCart. Te animamos a modificar y ampliar este ejemplo para adaptarlo a los requisitos únicos de tu tienda.

Mantente atento a nuestra próxima documentación completa, que proporcionará una guía más detallada sobre cómo extender MinCart. Mientras tanto, si tienes alguna pregunta o necesitas más ayuda, no dudes en ponerte en contacto con nuestro equipo de soporte.

Actualizado el: 28/10/2024