Guide for 3rd party for Static Box API

Outline

• Overview
• Fetching Static Build a Box data from the API
• Data structure of our endpoint response
• How does the customer choice get passed through the checkout?

Overview

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

Fetching Static Build a Box data from the API

Endpoint: https://api.skio.com/storefront-http/get-classic-box-v2

Need to send a POST request, with a JSON body like the example below:

{"productVariantPlatformId": "7194276266047", "sellingPlanPlatformId":"878510112"}

Please note that the `sellingPlanPlatformId` variable is optional to provide (could be `undefined`)

Example function for fetching Static Build a Box data below:

const fetchClassicBoxV2Information = async(boxParentProductId, sellingPlanId) => { 
  return new Promise((resolve, reject) => { 
    fetch('https://api.skio.com/storefront-http/get-classic-box-v2', 
      { 
        method: 'POST', 
        body: JSON.stringify(
          { 
            'productVariantPlatformId': boxParentProductId, 
            'sellingPlanPlatformId': sellingPlanId 
          }
        ) 
      }).then(
        (response) => response.json()
      ) .then(
        (response) => { 
          if(!response.ok) throw new Error('Failed to get box'); 
          const { ClassicBoxV2 } = response; 
          resolve(ClassicBoxV2); 
        }
      ).catch((error) => { 
        console.error(error); 
        reject(error); 
      }) 
  }); 
}

Data structure of our endpoint response

{ 
  platformId: string; 
  size: number; 
  title: string; 
  price: number; 
  sellingPlan?: string; 
  currencyCode: string; 
  imageSrc: string; 
  selectableProductVariants: SelectableProductVariantDisplay[]; 
} 
SelectableProductVariantDisplay = { 
  platformId: string; 
  quantity: number; 
  productTitle: string; 
  productVariantTitle: string; 
  imageSrc: string; 
  price: number; 
};

How to build with the API / how does the customer choice get passed through the checkout?

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 custom properties for each child items selected by the customer. Below is an example:

{ 
  "_pvgid://shopify/ProductVariant/44658179670306":2,
  "_pvgid://shopify/ProductVariant/44658179703074":1,
  "_pvgid://shopify/ProductVariant/44658179735842":2 
}