Guide for 3rd party for Dynamic Box API

Outline

• Overview
• Fetching Skio Dynamic Build a Box data from the API 
• Data structure of our endpoint response 
• How to build with the API 

Overview

This article contains data related to using the Skio Dynamic Build a Box feature, without the need to use the Skio frontend Build a Box flow (i.e. custom flow). For the standard Dynamic Build a Box documentation, please see here: https://help.skio.com/hc/en-us/articles/17739784884635-Dynamic-build-a-box-setup-guide .

Fetching Skio Dynamic Build a Box data from the API

Endpoint

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

Just need to send a POST request, with a JSON body like {"productPlatformId": "7194276266047"}

Data structure of our endpoint response

Example response when fetching Dynamic Build a Box data below:

{ 
  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 
  }
};

How to build with the API / how does the customer choice gets passed through the checkout etc

The third party developer would need to implement the user experience of selecting items of the box. Once selected, simply call the cart API to add the lines to cart, with the following custom properties:

_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 (from API response)