skio
Ask or search…
K
Links

Dynamic Build a Box

This gives a developer outline on how to setup a custom Dynamic BAB instead of using the default template provided by Skio
Fetch information about the build a box
Endpoint with example function
/*
* Fetching Dynamic BAB information from Skio
* ENDPOINT: https://api.skio.com/storefront-http/get-dynamic-box
* Parameters: boxParentProductId (the product ID related to the parent product of the box)
*/
const fetchDynamicBoxInformation = async(boxParentProductId) => {
return new Promise((resolve, reject) => {
fetch('https://api.skio.com/storefront-http/get-dynamic-box', {
method: 'POST',
body: JSON.stringify({
'productPlatformId': boxParentProductId,
})
})
.then((response) => response.json())
.then((response) => {
if(!response.ok) throw new Error('Failed to get box');
const { DynamicBox } = response;
resolve(DynamicBox);
})
.catch((error) => {
console.error(error);
reject(error);
})
});
}
Data structure of our endpoint response
{
boxId: string;
platformId: string;
title: string;
currencyCode: string;
imageSrc: string;
fixedDiscountTier?: { [size: string]: string };
percentDiscountTier?: { [size: string]: string };
sizeRange?: number[];
sizeInterval?: number[];
selectableProductVariants: SelectableProductVariantCustomize[];
sellingPlanGroup?: DynamicBoxSellingPlanGroup;
};
SelectableProductVariantCustomize = {
productTitle: string;
productImageSrc: string;
productPlatformId: string;
productHandle: string;
productVariants: {
platformId: string;
productVariantTitle: string;
imageSrc: string;
price: number;
customLabel?: string[];
}[];
};
DynamicBoxSellingPlanGroup = {
[planId: string]: {
title?: string;
interval: SellingPlanInterval;
intervalCount: number;
priceAdjustmentType: SellingPlanPricingPolicyAdjustmentType;
priceAdjustmentAmount: number;
variantMapping: ChildVariantPlanMapping;
allMatch?: boolean; // If all child variants with same selling plan interval has the same pricing policy
}
};
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
  • 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
}
}