Extend MinCart with javascript

Introduction

One of our goal is to offer a developer-friendly application that enables you to tailor and extend its functionalities to meet your specific needs.

This documentation serves as a temporary basic guide on how you can extend MinCart using JavaScript. It's a starting point for developers looking to integrate more advanced and custom features into their Shopify stores. We're working on a more robust documentation, which will be released in the future.

Extending MinCart

MinCart exposes the "mincart" object on the window and offers a couple of events that you can listen to react to what MinCart is doing. Here's a commented example of the main events and how to get the current product min quantity.

JavaScript Snippet

/**
 * This event means that MinCart has loaded your limit settings from web storage or 
 * from our server.
 * 
 * For faster limits calculation, we store the limits in webstorage after fetching
 * them from our server. This allows us the lock the checkout without having to 
 * wait for our servers to repond.
 *
 * After calculating the limits from the webstore we still get the limits from
 * our server to make sure the limit settings haven't changed.
 *
 * This means that the limits-loaded and limits-calculation events will be triggered 
 * 2 times on page load.
 */
document.addEventListener("mincart:limits-loaded", event => {
  const mincart = event.detail.mincart;
  console.log("limits loaded!");
  console.log(mincart.limits);

  mincart.limits.forEach(limit => {
    const currentProductIsLimitTarget = limit.items.some(limitTargetItem => {
      /**
       * mincart.itemIsLimitTarget is used to check if a specific item is the target
       * of one of the limit targets.
       *
       * Function parameters:
       * @param {object} item - the item object
       * @param {object} limitTargetItem - the limit target item object
       * @param {string} limitType - the limit type
       * return true if the item is included in the limit, false otherwise
       *
       * mincart.currentProduct is only available on the product page. (if you are
       * doing a variant limit type, you will need to manually add the property
       * "variant_id" to specify the current selected variant)
       */
      return mincart.itemIsLimitTarget(mincart.currentProduct, limitTargetItem, limit.type)
    });

    /**
     * Items can be excluded from the price, from the quantity, from the unique 
     * items quantity or from the weight on a single limit.
     * 
     * mincart.itemIsExcludedFromType checks if the specified item is excluded from one of
     * these specific types on the specified limit.
     *
     * @param {object} item - the item object
     * @param {object} limit - the limit object
     * @param {string} type - the type of limit (price, quantity, item, weight)
     * @returns true if the item is excluded from the limit for the given type, false otherwise
     */
    const currentProductIsExcluded = mincart.itemIsExcludedFromType(mincart.currentProduct, limit, "quantity");

    if (currentProductIsLimitTarget && !currentProductIsExcluded) {
      console.log("Current product min quantity", limit.min_quantity);
    }
  });
});

/**
 * This event means that MinCart has started calculating the limits to see if they
 * are respected or not.
 *
 * This will be triggered after the limits are loaded or when the cart is updated.
 */
document.addEventListener("mincart:limits-calculation-started", event => {
  const mincart = event.detail.mincart;
  console.log("limits calculation started!");
  console.log(mincart.limits);
});

/**
 * This event means that MinCart has finished calculating the limits to see if they
 * are respected or not.
 *
 * This will be triggered after the limits are loaded or when the cart is updated.
 * 
 * after this event all the limits will have a "isRespected" boolean that lets
 * you know if the limit is currently respected or not.
 */
document.addEventListener("mincart:limits-calculation-finished", event => {
  const mincart = event.detail.mincart;
  console.log("limits calculation done!");
  console.log(mincart.limits);
});

Conclusion

This snippet is a basic example of how you can start extending MinCart's functionality. We encourage you to modify and expand upon this example to suit your store's unique requirements.

Stay tuned for our upcoming comprehensive documentation, which will provide more detailed guidance on extending MinCart. In the meantime, if you have any questions or need further assistance, please feel free to reach out to our support team.

Updated on: 19/11/2023