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);
});

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.

Updated on: 18/12/2024