Static

What is a "static" box?

A static box is a box with a set price for all the items inside. This is added to cart as a single line item and expanded in the Shopify order and in Skio post checkout.

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

Fetch Box Information

get-classic-box

get-classic-box

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

Body

application/json

productVariantPlatformIdstring

Example: "45123148874011"

Response

200

Body

application/json

okboolean

ClassicBoxV2object

Request

JavaScriptCurl

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

Response

{
  "ok": false,
  "ClassicBoxV2": {
    "platformId": "text",
    "title": "text",
    "currencyCode": "text",
    "imageSrc": "text",
    "selectableProductVariants": [
      {
        "platformId": "text",
        "imageSrc": "text",
        "productSlug": "text",
        "productTitle": "text",
        "productVariantTitle": "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 the static box product.

The structure should include _isClassicBoxV2: true as well as a list of product variants and their quantities. See below:

_isClassicBoxV2: true (required)
Ice Cream - Matcha:2
Ice Cream - Vanilla:2
Ice Cream - Chocolate:2
_pvgid://shopify/ProductVariant/44658179670306:2 
_pvgid://shopify/ProductVariant/44658179703074:2
_pvgid://shopify/ProductVariant/44658179735842:2

Example add to cart data

{
  quantity: item.quantity,
  id: item.id,
  selling_plan: selectedSellingPlan.id,
  properties: {
    _isClassicBoxV2: true (required)
    Ice Cream - Matcha:2
    Ice Cream - Vanilla:2
    Ice Cream - Chocolate:2
    _pvgid://shopify/ProductVariant/44658179670306:2 
    _pvgid://shopify/ProductVariant/44658179703074:2
    _pvgid://shopify/ProductVariant/44658179735842:2
  }
}