Skip to main content

Create a Dynamic-price Bundle Selection

info

You can see a live example in our test store: Live example

Important: The password of this store is bundles

In this example you'll create a set of pre-defined selections for a dynamically-priced bundle.

Pre-requisites​

  • You have a Shopify store.
  • You have access to Bundles in your Recharge account. (See Bundles)
  • You have created and published a dynamically-priced bundle in your store. (See Create a dynamic bundle)
  • You have basic knowledge of HTML and JavaScript.

Explanation​

In this example we will create a page that will select a set of predefined contents to the Shopify Cart in behalf of the customer.

We'll be adding multiple products to the cart that will get bundled as the X product. If you click the link, you will notice that the product normally uses the Recharge bundle widget, but in this case, we want to leverage the power of the bundling engine to create our own selection flow.

There will be a single button that will select two products as part of the bundle:

The Dynamic Bundle Properties​

In checkout orders (i.e., the first order a user creates when subscribing to a product, or the only order if it's a onetime order), the dynamically-priced bundles rely on multiple properties at the cart line item level:

All products belonging to the same bundle should have the same value in the properties.

  • _rc_bundle: This property is a string composed by two parts that are separated by a colon: a random string and the Shopify Product ID of the bundle product.
  • _rc_bundle_variant: This is the Shopify Variant ID of the bundle product.
  • _rc_bundle_parent (Optional): This property is the Shopify handle of the bundle product. This property is used to display the selections as a single line item in the cart.
  • _rc_bundle_collection_id: This is the Shopify Collection ID in which the selected product belongs.

Example Code​

<button id="addToCart">Click to add Bundle selection to cart</button>

<script>
  document.getElementById('addToCart').addEventListener('click', async () => {
    const bundleProductData = {
      productId: '7425871052997',
      variantId: '42184636072133',
      sellingPlan: 2730066117,
      handle: 'byo-dynamic-meal-box',
    }
  
    const bundle = {
      "externalVariantId": bundleProductData.variantId,
      "externalProductId": bundleProductData.productId,
      "selections": [
        {
          "collectionId": "285790863557",
          "externalProductId": "7200062308549",
          "externalVariantId": "41504991412421",
          "quantity": 2,
          "sellingPlan": 2002387141,
        },
        {
          "collectionId": "288157827269",
          "externalProductId": "7200061391045",
          "externalVariantId": "41510929465541",
          "quantity": 2,
          "sellingPlan": 2730098885
        }
      ]
    };
    
    const cartItems = await recharge.bundle.getDynamicBundleItems(bundle, bundleProductData.handle);
    const cartData = { items: cartItems };
  
    await fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(cartData),
    });
  
    window.location.href = '/cart';
  });
</script>