Apply Volume Discounts

Volume discounts allow for merchants to provide a discount depending on how many eligible item is in a cart / subscription.

Front End Script

Below is the front-end code that will fetch a list of rules from the Skio API and select the eligible volume discount rule that would apply. Upon hitting the checkout button, a discount code will automatically be added to the cart to apply the volume discount.

For Shopify Plus, we recommend creating a custom script that matches the setup in Skio to automatically apply the discount.

Volume discounts will be updated to use Shopify Functions, which will work for both Plus and non-Plus merchants in the near future.

---

Create this file assets/skio-volume-discount.js and copy in the large code block below.

On all pages that have a checkout button, make sure to include this script using this script include.

<script src="{{ 'skio-volume-discount.js' | asset_url }}" defer></script>

Make sure that the selectorwill match all checkout buttons

skio-volume-discount.js

 /**
 * Setup: add the below script include to pages that have a checkout button
 * 
 * <script src="{{ 'skio-volume-discount.js' | asset_url }}" defer="defer"></script>
 * 
 * Make sure the selector below covers all checkout buttons
 */

// scope variables
(() => {
  const selector = '#checkout'
  
  const checkoutHandler = async (event) => {
    if (!window.skio_ran_tier_discount && event.target.matches(selector)) {
      event.preventDefault()
  
      // Get Skio rules and the current cart
      const [{rules}, cart] = await Promise.all([
        (await fetch(`https://api.skio.com/storefront-http/get-rules-by-domain-or-hostname?domain=${window?.Shopify?.shop}`)).json(), 
        (await fetch('/cart.js')).json()
      ])
    
      // console.log('rules', rules)
      // console.log('cart', cart)
    
      // Check each rule to find the eligible rule 
      // with the largest min quantity
      let largestMinQuantity = {
        value: -1,
        index: -1,
      }
      rules.forEach((rule, index) => {
        if (rule.code &&
            largestMinQuantity.value < rule.minQuantityToDiscount
        ) {
          // Gets the count of eligible items in the cart for this rule
          const eligibleCount = cart.items.reduce(
            (aggregate, item) => rule.productVariantIds.some(gid => gid.includes(item.id)) ? 
                aggregate + item.quantity : aggregate 
            , 0)
          if (rule.minQuantityToDiscount <= eligibleCount) {
            largestMinQuantity.value = rule.minQuantityToDiscount
            largestMinQuantity.index = index
          }
        }
      })
    
      const rule = largestMinQuantity.index > -1 ? rules[largestMinQuantity.index] : null
      // console.log(rule)
      
      // Apply code
      if (rule) await fetch(`/discount/${rule.code}`)
      
      window.skio_ran_tier_discount = true
      
      event.target.click()
    }
  }
  
  // Event delegation
  document.body.addEventListener('click', checkoutHandler)
})()