Skip to main content

Create a Fixed-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 fixed-price 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 fixed-price bundle in your store. (See Creating a customizable bundle)
  • You have basic knowledge of HTML and JavaScript.

Explanation​

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

The product that we will add to the cart is the BYO Meal Box (Multi-step). If you click the link, you'll 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 _rb_id Property​

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 fixed-priced bundles rely on a property called _rb_id. This property is a random string we (Recharge) generate that is associated with the Bundle selection. You can get an _rb_id value for your selections by calling the getBundleId function.

Note: Not passing the _rb_id property in the cart line item or using something different to the getBundleId method will result in the bundle not getting its selections extracted when the order is created.

Example Code​

This is the code that was used in the live example:

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

<script>
  document.getElementById('addToCart').addEventListener('click', async () => {
    const bundleProductData = {
      variantId: '41291293425861',
      productId: '7134322196677',
      sellingPlan: 743178437
    }
  
    // This creates the bundle object containing the selections
    // we'll pass this object to `getBundleId`.
    const bundle = {
      "externalVariantId": bundleProductData.variantId,
      "externalProductId": bundleProductData.productId,
      "selections": [
        {
          "collectionId": "285790863557",
          "externalProductId": "7200062308549",
          "externalVariantId": "41504991412421",
          "quantity": 2
        },
        {
          "collectionId": "288157827269",
          "externalProductId": "7200061391045",
          "externalVariantId": "41510929465541",
          "quantity": 2
        }
      ]
    };
  
    const rbId = await recharge.bundle.getBundleId(bundle);
    // Adds the value directly to the cart
    const cartData = {
      items: [{
        id: bundleProductData.variantId,
        quantity: 1,
        selling_plan: bundleProductData.sellingPlan,
        properties: { _rb_id: rbId },
      }]
    };
    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>