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.


More information