Dynamic

This gives a developer outline on how to setup a custom Dynamic BAB instead of using the default template provided by Skio

What is a dynamic box?

A dynamic box is a box that can have variable pricing based on the items added to the box. Because of this, dynamic boxes need each child item to be added to cart.

For more information on setting up a dynamic build-a-box in Skio you can read our help article here.

Fetch Box Information

get-dynamic-box

get-dynamic-box

POSThttps://api.skio.com/storefront-http/get-dynamic-box

Body

application/json

productPlatformIdstring

Response

200

Body

application/json

okboolean

DynamicBoxobject

Request

JavaScriptCurl

const response = await fetch('https://api.skio.com/storefront-http/get-dynamic-box', {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      "productPlatformId": "8272457924891"
    }),
});
const data = await response.json();

Response

{
  "ok": false,
  "DynamicBox": {
    "boxId": "text",
    "currencyCode": "text",
    "sizeInterval": [],
    "selectableProductVariants": [
      {
        "productTitle": "text",
        "productImageSrc": "text",
        "productPlatformId": "text",
        "productHandle": "text",
        "productVariants": [
          {
            "platformId": "text",
            "productVariantTitle": "text",
            "imageSrc": "text",
            "price": 0
          }
        ]
      }
    ],
    "settings": {
      "header": "text",
      "otuHeader": "text",
      "subheader": "text",
      "otuSubheader": "text",
      "hideLearnMore": false,
      "ignoreOneTime": false,
      "displayByVariant": false,
      "editableQuantity": false,
      "hideChildPriceCP": false,
      "ignoreBoxDiscount": false,
      "customerPortalTitle": "text"
    },
    "theme": {
      "header": "text",
      "subHeader": "text",
      "groupHeader": "text",
      "bodyText": "text",
      "discountBodyText": "text",
      "primaryButtonBgSelected": "text",
      "primaryButtonTextSelected": "text",
      "primaryButtonBgDefault": "text",
      "primaryButtonTextDefault": "text",
      "primaryButtonBorderSelected": "text",
      "primaryButtonBorderDefault": "text",
      "cartButtonBg": "text",
      "cartButtonText": "text",
      "cartButtonBgDisabled": "text",
      "cartButtonTextDisabled": "text",
      "cartBg": "text",
      "cartBorder": "text",
      "badgeBgSelected": "text",
      "badgeTextSelected": "text",
      "badgeBgDefault": "text",
      "badgeTextDefault": "text",
      "progessBar": "text",
      "progressBarCircleText": "text",
      "progressBarInnerCircle": "text",
      "progressBarOuterCircle": "text",
      "progessBarDefault": "text",
      "progressBarInnerCircleDefault": "text",
      "progressBarOuterCircleDefault": "text",
      "progressBarCircleTextDefault": "text",
      "variantSelectorBg": "text",
      "variantSelectorHighlightBg": "text",
      "quantityAdjustButtonBg": "text",
      "quantityBg": "text",
      "priceMarkerDefault": "text",
      "priceMarkerActive": "text"
    }
  }
}

Front End Setup

The API request made will give you the appropriate data for each individual product available in the box and it's variants. You can use this information to display product cards and allow your customers to add different products to their cart.

Below is a list of different components or functionality you should include in order to create a successful build a box template:

• Product Cards

  • Quantity Selector

  • Price Display

• "Cart" - way to display selected products before actually adding to cart

• Subscription Toggle

  • This information can be pulled from the sellingPlanGroup object in the dynamic box fetch request. Display each option available for subscription as we as an option to purchase once as well

  • When adding to cart, each child product will need to have a selling_plan provided. In most cases the selling_plan ID will be the same for each of the child products and should come through the above API request

• Quantity Limitations

  • The API will return either a sizeRange or sizeInterval that can be used to restrict customers on the front end to ensure the correct number of products is added to cart

  • Keep in mind, this doesn't restrict quantities in the cart so additional logic may need to be added to your cart to ensure this works properly

Adding to Cart

In order for Skio's backend to recognize that a BAB has been added to cart, certain line item properties need to be added to each product in a dynamic build a box.

_dynamicBoxIndex: 0 (this is used to differentiate when there's multiple box of the same id in the cart. Usually just set it to 0. In rare cases for the second box of the same id, set to 1. Increment for further boxes.)
_dynamicBoxId: the box id

Example add to cart data

{
  quantity: item.quantity,
  id: item.id,
  selling_plan: selectedSellingPlan.id,
  properties: {
    _dynamicBoxIndex: boxIndex,
    _dynamicBoxId: boxId
  }
}