Smart Bundles

To use smart bundles some prerequisites have to be fulfilled.

Usage with Makaira Storefront or usage with the API for other frontends
Having a configured Smart Bundle
Integration with the cart system

1. Usage with Makaira Storefront

The Makaira Storefront ships with components and utils to be able to represent the Smart Bundles. In case you are already working with the storefront you need to migrate manually from the Storefront template.

Bundle components/utils:

Component	Path	Type
BundlePage	`/frontend/BundlePage`	New
BundleSelection	`/patterns/core/BundleSelection`	New
ProductList	`[/patterns/core/ProductList](https://github.com/MakairaIO/storefront-starter-kit/blob/stable/patterns/core/ProductList/ProductActions.js#L20-L24)`	Change
RequestBuilder	`[/utils/core/RequestBuilder](https://github.com/MakairaIO/storefront-starter-kit/blob/stable/utils/core/RequestBuilder/index.js)`	Change
redirectToBundle	`/utils/core/redirectToBundle`	New
collectBundleFormData	`/utils/core/collectBundleFormData`	New
fetchPageData	`/utils/core/fetchPageData`	Change

To be able to use the Bundle form you need to register the BundlePage.

2. Usage with the API for other frontends

Please use the endpoint <YOUR_MAKAIRA_URL>/enterprise/page with the configured bundle URL to retrieve more data regarding the bundles.

Retrieve a bundle
Passing a bundle URL will respond with all data which are needed to render the bundle page, If the type is a bundle you get data like the number of slots, assigned products, text, images of the bundle.

{
  ...
  url: '<BUNDLE-URL>',  
  ...
}

In the case of a bundle URL, the response contains information like amount of slots, assigned products, text, images to render the bundle.

Modify a bundle
Bundles can be modified by passing the IDs of bundles, slots, and products.

{
  ...
  url: 'BUNDLE_URL',
  bundles: {
    <BUNDLE_ID>: {
    	<SLOT_ID_1>: <PRODUCT_ID_FOR_SLOT_1>,
        <SLOT_ID_2>: <PRODUCT_ID_FOR_SLOT_2>
        ...
    },
    ...
  }
  ...
}

Retrieving a specific slot
To guide the customer through the configuration you can request specific slots.

{
  ...
  url: '<BUNDLE-URL>',  
  slot: <SLOT_ID>
  ...
}

3. Storing the bundle configuration

The configuration of a bundle is stored in a client and a serverside cookie named bundle. Updates of the serverside are handled by the RequestBuilder.

4. Integration into cart systems

The add to cart functionality is not implemented into the Storefront as it is independent of any cart system. Depending on your cart system you can either add all bundle items with one call or one by one. If you're planning to have features on top of bundles like discounts we recommend implementing your own API.

To prevent misconfigurations you are able to validate the configured bundle by <YOUR_MAKAIRA_URL>/smart-bundle/validate.

1. Usage with Makaira Storefront

2. Usage with the API for other frontends

3. Storing the bundle configuration

4. Integration into cart systems

More information