Create subscription bundling with Shopify Checkout Integration

{% assign bundle_min = 0 %}
{% assign bundle_max = 12 %}

{% assign bundle_min = 0 %}
{% assign bundle_max = 12 %}
<link rel="stylesheet" href="{{ 'component-cart-notification.css' | asset_url }}" media="print" onload="this.media='all'">
    <link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
        <section class="page-width">
            <div class="product grid bundle grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
                <div class="grid__item product__media-wrapper">
                    <slider-component class="slider-mobile-gutter">
                        <div class="grid bundle-grid" data-bundle-min="{{ bundle_min }}" data-bundle-max="{{ bundle_max }}" data-subscription-price="{{ bundle_subscription_price }}" data-onetime-price="{{ bundle_onetime_price }}">
                            {% for variant in product.variants %}
                                <div class="grid__item bundle-product-grid-item">
                                    <div class="grid bundle-item" data-variant-id="{{ variant.id }}" data-qty="0">
                                        <img src="{{ variant.image.src | img_url: '200x200' }}" alt="{{ variant.title }}" class="bundle_img">
                                            <div class="h3">{{ variant.title }}</div>
                                            {% if variant.available == false %}
                                                <span class="h6 block">Out of stock</span>
                                            {% else %}
                                                <div class="bundle-item-selector">
                                                    <span class="minus">
                                                        <button class="btn" disabled>-</button>
                                                    </span>
                                                    <span class="bundle_quantity">0</span>
                                                    <span class="plus">
                                                        <button class="btn">+</button>
                                                    </span>
                                                </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </slider-component>
                    </div>
                    <div class="product__info-wrapper grid__item">
                        <div id="ProductInfo-{{ section.id }}" class="product__info-container{% if
                                section.settings.enable_sticky_info %} product__info-container--sticky{% endif %}">
                            {%- assign product_form_id = 'product-form-' | append: section.id -%}
                            {%- for block in section.blocks -%}
                                {%- case block.type -%}
                                    {%- when '@app' -%}
                                        {% render block %}
                                    {%- when 'text' -%}
                                        <p class="product__text{% if block.settings.text_style == 'uppercase' %}
                                                caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}">
                                            {{ - block.settings.text - }}
                                        </p>
                                    {%- when 'title' -%}
                                        <h1 class="product__title">
                                            {{ product.title | escape }}
                                        </h1>
                                    {%- when 'price' -%}
                                        <div class="no-js-hidden bundle-price price--large" id="price-{{ section.id }}"></div>
                                        <div class="bundle-qty">
                                            Items:
                                            <span class="current-qty">0</span>
                                            of
                                            {{ bundle_max }}
                                        </div>
                                        {%- form 'product', product, data-productid: product.id, id: 'product-form-installment',
class: 'installment caption-large' -%}
                                            <input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.selected_or_first_available_variant.id }}">
                                                {{ form | payment_terms }}{%- endform -%}
                                            {%- when 'description' -%}
                                                {%- if product.description != blank -%}
                                                    <div class="product__description rte">
                                                        {{ product.description }}
                                                    </div>
                                                {%- endif -%}
                                                …
                                            {%- when 'buy_buttons' -%}
                                                <product-form class="product-form">
                                                    {%- form 'product', product, data-productid: product.id, id: product_form_id, class:
'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                                                        <input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.selected_or_first_available_variant.id }}">
                                                            <div class="product-form__buttons bundle-add-to-cart">
                                                                <button id="bundle-add-to-cart" type="submit" name="add" class="product-form__submit button button--full-width {% if
                                                                    block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}" disabled>
                                                                    {%- if product.selected_or_first_available_variant.available -%}
                                                                        {{ 'products.product.add_to_cart' | t }}
                                                                    {%- else -%}
                                                                        {{ 'products.product.sold_out' | t }}
                                                                    {%- endif -%}
                                                                </button>
                                                            </div>
                                                        {%- endform -%}
                                                    </product-form</div> {%- endcase -%} {%- endfor -%}
                                                </div>
                                            </div>

Bundle = {
  Defaults: {
    // Convenience functions to reference various important divs within the build.
    // If you structure your HTML differently than our example build, you can alter these
    // functions to reference the correct divs.
    getBundleDiv: function () {
      return $(".bundle");
    },
    getBundleGridDiv: function () {
      return Bundle.Defaults.getBundleDiv().find(".bundle-grid");
    },
    getBundleDetailsDiv: function () {
      return Bundle.Defaults.getBundleDiv().find(".bundle-details");
    },
    getAddToCartDiv: function () {
      return $("#bundle-add-to-cart");
    },
    getWidget: function () {
      return ReChargeWidget.getWidgets()[0];
    },
  },
  Utils: {
    // Utilty functions used throughout the rest of the build
    generateGuid: function () {
      // Generates a unique guid to be used for the bundle_id
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    calculateBundleQuantity: function ($bundle) {
      // Calculates the total number of items selected on the page.
      // Will loop through all grid items and sum up the total bundle
      // quantity based on the data-qty attribute of each variant.
      // 1.) $bundle = top level bundle div of the grid matrix
      var bundle_qty = 0;
      $bundle.find(".bundle-item").each(function () {
        bundle_qty += Number($(this).attr("data-qty"));
      });
      return bundle_qty;
    },
    isSubscription: function (widget) {
      // Determines whether the user has selected the One-time purchase
      // or Subscribe and Save option on the ReCharge widget
      return widget.subscriptionActive == true;
    },
    updateBundleQuantity: function ($item, increment) {
      // Main function to handle quantity manipulation. Pass in the grid
      // item along with the quantity to increment or decrement. Then it will
      // determine the current and new item/bundle quantities. Then it checks
      // constraints, and if valid, update all necessary data attributes,
      // interface output, and enable/disable any buttons.
      // 1.) $item = the clicked plus or minus .bundle-item parent div
      // 2.) increment = the amount to increase or decrease the quantity
      // Get bundle parent reference and min/max numbers
      var $bundle = $item.closest(".bundle-grid");
      var bundle_min = Number($bundle.attr("data-bundle-min"));
      var bundle_max = Number($bundle.attr("data-bundle-max"));
      // Calculate current item and bundle quantity
      var bundle_qty = Bundle.Utils.calculateBundleQuantity($bundle);
      var item_qty = Number($item.attr("data-qty"));
      // Calculate the new bundle and item quantities with the increment added
      var new_bundle_qty = bundle_qty + increment;
      var new_item_qty = item_qty + increment;
      // Check constraints to make sure we can perform the action
      if (
        Bundle.Constraints.isItemGreaterThanZero(new_item_qty) &&
        Bundle.Constraints.isBundleGreaterThanMin(new_bundle_qty, bundle_min) &&
        Bundle.Constraints.isBundleLessThanMax(new_bundle_qty, bundle_max)
      ) {
        //Update quantities
        $item.attr("data-qty", new_item_qty);
        $item.find(".bundle_quantity").html(new_item_qty);
        $(".current-qty").html(new_bundle_qty);
        //Toggle the Add to Cart Button if max items is reached
        var is_disabled = Bundle.Constraints.isBundleEqualMax(
          new_bundle_qty,
          bundle_max
        )
          ? false
          : true;
        Bundle.Defaults.getAddToCartDiv().prop("disabled", is_disabled);
        //Update plus/minus button's disabled property
        $bundle.find(".bundle-item").each(function () {
          var item_qty = $(this).attr("data-qty");
          var is_disabled = Bundle.Constraints.isBundleEqualParam(
            new_bundle_qty,
            bundle_max
          )
            ? true
            : false;
          $(this).find(".plus").find(".btn").prop("disabled", is_disabled);
          var is_disabled =
            Bundle.Constraints.isBundleEqualParam(new_bundle_qty, bundle_min) ||
            Bundle.Constraints.isBundleEqualParam(item_qty, 0)
              ? true
              : false;
          $(this).find(".minus").find(".btn").prop("disabled", is_disabled);
        });
      }
    },
    updatePrice: function () {
      var widget = Bundle.Defaults.getWidget();
      var is_subscription = Bundle.Utils.isSubscription(widget);
      var $bundle = Bundle.Defaults.getBundleGridDiv();
      var bundle_subscription_price = $bundle.attr("data-subscription-price");
      var bundle_onetime_price = $bundle.attr("data-onetime-price");
      //If subscription option is clicked, display discounted subscription price
      //Otherwise, display full bundle price
      if (is_subscription) {
        $(".bundle-price").html(bundle_subscription_price);
      } else {
        $(".bundle-price").html(bundle_onetime_price);
      }
    },
  },
  Constraints: {
    // Requirement functions to determine whether the user is
    // performing an action that is forbidden
    isItemGreaterThanZero: function (qty) {
      // Check that the item quantity doesn't fall below zero
      // 1.) qty = item quantity of the variant
      if (qty < 0) {
        console.log("Item quantity cannot be less than 0.");
        return false;
      }
      return true;
    },
    isBundleGreaterThanMin: function (qty, min) {
      // Check that the bundle quantity doesn't fall below the minimum quantity
      // 1.) qty = total bundle quantity of the page
      // 2.) min = minimum value the bundle quantity can't fall below
      if (qty < min) {
        console.log("Quantity cannot be less than the minimum.");
        return false;
      }
      return true;
    },
    isBundleLessThanMax: function (qty, max) {
      // Check that the bundle quantity doesn't go above the maximum quantity
      // 1.) qty = total bundle quantity of the page
      // 2.) max = maximum value the bundle quantity can't rise above
      if (qty > max) {
        console.log("Quantity cannot be greater than maximum.");
        return false;
      }
      return true;
    },
    isBundleEqualMax: function (qty, max) {
      // Check that the bundle quantity is equal to the maximum quantity
      // 1.) qty = total bundle quantity of the page
      // 2.) max = maximum value the bundle quantity can't rise above
      return qty == max ? true : false;
    },
    isBundleEqualParam: function (qty, param) {
      // Check that the bundle quantity is equal to param
      // 1.) qty = total bundle quantity of the page
      // 2.) param = value to compare qty against
      return qty == param ? true : false;
    },
  },
  Cart: {
    // Functions used when adding the bundle to the cart and removing a bundle from the cart
    processAddToCart: function () {
      // Top level function tied to the Add to Cart button.
      // Function will check constraints to make sure we can
      // add the bundle to the cart, then it will generate
      // the cart array and make the AJAX call to Shopify's API.
      // Once added to cart, we redirect to the /cart page.
      // Get bundle parent, bundle max value, and total bundle quantity values
      var $bundle = Bundle.Defaults.getBundleGridDiv();
      var qty = Bundle.Utils.calculateBundleQuantity($bundle);
      var bundle_max = Number($bundle.attr("data-bundle-max"));
      // Ensure we can process the cart, and if not, break out of function
      if (!Bundle.Constraints.isBundleEqualMax(qty, bundle_max)) {
        console.log(
          "Cannot process Add to Cart. Qty does not equal max total."
        );
        return;
      }
      //Generate the product array to pass to AJAX call
      var widget = Bundle.Defaults.getWidget();
      var items = Bundle.Cart.generateCart($bundle, widget);
      // Ensure there are items to add to cart, and if so, make
      // API call and redirect to /cart page
      if (items.length > 0) {
        Bundle.Cart.processToCart(items);
      } else {
        console.log("No items available to add to cart.");
      }
    },
    generateCart: function ($bundle, widget) {
      // Check that the bundle quantity is equal to param
      // 1.) $bundle = top level bundle div of the grid matrix
      // 2.) widget = the ReCharge widget object tied to the page
      var cart = [];
      var is_subscription = Bundle.Utils.isSubscription(widget);
      // bundle_id that we will pass to each product object as a
      // line item property to associate them to this bundle
      var bundle_id = Bundle.Utils.generateGuid();
      // Determine whether the user has the One-time purchase or
      // Subscribe & Save purchase type option selected. If Subscribe
      // & Save, generate the shipping interval unit_type and frequency
      // that are passed through on ReCharge orders.
      if (is_subscription) {
        var selling_plan = widget.state.sellingPlanId;
      }
      // Loop through each product grid item
      $bundle.find(".bundle-item").each(function () {
        // If item's quantity is greater than 0, add
        // to the cart array
        var qty = $(this).attr("data-qty");
        if (Number(qty) > 0) {
          var variant_id = $(this).attr("data-variant-id");
          // Pass the variant_id, quantity, and bundle_id
          // for each grid item we process
          var item = {
            id: variant_id,
            quantity: qty,
            properties: {
              bundle_id: bundle_id,
            },
          };
          // If this is a Subscribe & Save bundle, pass in the
          // ReCharge properties too
          if (is_subscription) {
            item["selling_plan"] = selling_plan;
          }
          cart.push(item);
        }
      });
      return cart;
    },
    processToCart: function (items) {
      // Makes API call to add bundle items to cart. If the
      // call is successful, redirect to /cart page. If error,
      // display the error to the console.
      // 1.) items = the product array to be passed to the Shopify
      // API. Bundle.Cart.generateCart() function builds this array.
      $.ajax({
        type: "POST",
        url: "/cart/add.js",
        data: {
          items: items,
        },
        dataType: "json",
        success: function () {
          window.location.href = "/cart";
        },
        error: function (jqXHR, text_status, error_thrown) {
          console.log(text_status, error_thrown);
        },
      });
    },
    removeBundleItems: function (bundle_id) {
      // Removes all bundle items from cart when user clicks remove on cart page
      // Get current cart contents
      jQuery.getJSON("/cart.js", function (cart) {
        // Create new updates object to send to cart update AJAX call
        // Loop through each cart item
        // If the item's bundle id matches the id passed in,
        // add the cart item key along with quantity of 0 to the data object
        let bundle_items = [];
        let qty = 0;
        let data = { updates: {} };
        cart.items.forEach((item, i) => {
          if (
            item.properties.bundle_id &&
            item.properties.bundle_id == bundle_id
          ) {
            data.updates[item.key] = 0;
          }
        });
        // API call to update the cart contents and set the bundle item quantities to 0
        $.ajax({
          type: "POST",
          url: "/cart/update.js",
          data: data,
          dataType: "json",
          success: function () {
            window.location.href = "/cart";
          },
        });
      });
    },
  },
  init: function () {
    // Initialization function to register all click handlers
    // Registers each grid item's minus button
    $("body").on("click", ".bundle .minus", function () {
      var item = $(this).closest(".bundle-item");
      Bundle.Utils.updateBundleQuantity(item, -1);
    });
    // Registers each grid item's plus button
    $("body").on("click", ".bundle .plus", function () {
      var item = $(this).closest(".bundle-item");
      Bundle.Utils.updateBundleQuantity(item, 1);
    });
    // Registers the page's Add to Cart button
    $("body").on("click", "#bundle-add-to-cart", function () {
      event.preventDefault();
      Bundle.Cart.processAddToCart();
    });
    // Registers function to handle price change when user changes subscription vs one-time
    $("body").on("change", ".rc-widget input", function () {
      Bundle.Utils.updatePrice();
    });
    // Registers each cart bundle item's remove button
    $("body").on("click", ".cart__remove-bundle", function () {
      var bundle_id = $(this)
        .closest(".cart__remove-bundle")
        .attr("data-bundle-id");
      Bundle.Cart.removeBundleItems(bundle_id);
    });
  },
};
// Call the init() function to register click handlers
Bundle.init();

{% assign bundles_displayed = '' | split:',' %}

{%- for item in cart.items -%}
    {%- if item.properties['bundle_id'] -%}
        {%- unless bundles_displayed contains item.properties['bundle_id'] -%}
            {%- assign bundles_displayed = item.properties['bundle_id'] | concat: bundles_displayed -%}
            {%- render 'cart-item-bundle', item: item, cart: cart, current_bundle_id:
item.properties['bundle_id'] -%}
        {%- endunless -%}
    {%- else -%}

<img class="cart-item__image" src="{{ item.image | img_url: '150x' }}" alt="{{ item.image.alt | escape }}" loading="lazy" width="75" height="{{ 75 | divided_by: item.image.aspect_ratio | ceil }}">

{%- for item in cart.items -%}
    {%- if item.properties['bundle_id'] == current_bundle_id -%}
        <div class="product-option">
            <dt>{{ item.variant.title }}:
            </dt>
            <dd>{{ item.quantity }}</dd>
        </div>
    {%- endif -%}
{%- endfor -%}

{%- if property.last != blank and property_first_char != '_' and property.first != 'bundle_id' -%}

{% assign bundle_price = 0 %}
...
{%- for item in cart.items -%}
    {%- if item.properties['bundle_id'] == current_bundle_id -%}
        {%- assign bundle_price = item.price | times: item.quantity | plus: bundle_price -%}
        <div class="product-option">
            <dt>{{ item.variant.title }}:
            </dt>
            <dd>{{ item.quantity }}</dd>
        </div>
    {%- endif -%}
{%- endfor -%}
...
<span class="price price--end">
    {{ bundle_price | money }}
</span>

<cart-remove-button class="cart__remove-bundle" data-bundle-id="{{ current_bundle_id }}">
    <a href="{{ item.url_to_remove }}" class="button button--tertiary" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
        {% render 'icon-remove' %}
    </a>
</cart-remove-button>

removeBundleItems : function (bundle_id) {
    // Removes all bundle items from cart when user clicks remove on cart page
    // Get current cart contents
    jQuery.getJSON('/cart.js', function (cart) {
        // Create the data object for the cart update AJAX call
        // Loop through each cart item
        // If the item's bundle id matches the id passed in, add the
        // cart item key along with a quantity of 0 to the data object
        let bundle_items = [];
        let qty = 0;
        let data = {
            updates: {}
        };
        cart
            .items
            .forEach((item, i) => {
                if (item.properties.bundle_id && item.properties.bundle_id == bundle_id) {
                    data.updates[item.key] = 0;
                }
            })
            // API call to update the cart contents and set the
            // bundle item quantities to 0
            $
            .ajax({
                type: 'POST',
                url: '/cart/update.js',
                data: data,
                dataType: 'json',
                success: function () {
                    window.location.href = '/cart';
                }
            });
    });
}

// Registers each cart bundle item's remove button
$('body').on('click', '.cart__remove-bundle', function () {
    var bundle_id = $(this).closest('.cart__remove-bundle').attr('data-bundle-id');
    Bundle.Cart.removeBundleItems(bundle_id);
});

class CartRemoveButton extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("click", (event) => {
      event.preventDefault();
      if (this.dataset.index) {
        this.closest("cart-items").updateQuantity(this.dataset.index, 0);
      }
    });
  }
}