Sectioned

What is a "sectioned" box?

A sectioned box is a group of dynamic boxes. This allows for you to create unique experiences where there are different discounts and quantity limitations for each "section". For example you could require a minimum of 4 items for bar soap, and a minimum of 1 item for shampoo. Like a dynamic box, all child items must be added to cart individually.

Fetch box information

get-sectioned-box

post

get-sectioned-box

Body

application/json

sectionedBoxIdstringOptionalExample: d16739a1-e74e-4125-8ced-c2d62c145c41

Responses

200Success

application/json

post

/storefront-v2-http/get-sectioned-box

HTTPcURLJavaScriptPython

POST /storefront-v2-http/get-sectioned-box HTTP/1.1
Host: api.skio.com
Content-Type: application/json
Accept: */*
Content-Length: 57

{
  "sectionedBoxId": "d16739a1-e74e-4125-8ced-c2d62c145c41"
}

200Success

{
  "ok": true,
  "sectionedBox": {
    "dynamicBoxes": [
      {
        "boxId": "text",
        "currencyCode": "text",
        "fixedDiscountTier": {},
        "percentDiscountTier": {
          "ANY_ADDITIONAL_PROPERTY": "text"
        },
        "priceRange": {
          "max": 1,
          "min": 1,
          "discountBase": "text"
        },
        "selectableProductVariants": [
          {
            "productTitle": "text",
            "productImageSrc": "text",
            "productPlatformId": "text",
            "productHandle": "text",
            "productVariants": [
              {
                "platformId": "text",
                "productVariantTitle": "text",
                "imageSrc": "text",
                "price": 1
              }
            ]
          }
        ]
      }
    ],
    "sellingPlanGroup": {
      "ANY_ADDITIONAL_PROPERTY": {
        "title": "text",
        "interval": "text",
        "intervalCount": 1,
        "priceAdjustmentType": "text",
        "priceAdjustmentAmount": 1,
        "variantMapping": {
          "ANY_ADDITIONAL_PROPERTY": {
            "adjustedPrice": 1,
            "planId": "text"
          }
        }
      }
    },
    "settings": {
      "header": "text",
      "subheader": "text"
    },
    "theme": {
      "header": "text",
      "subHeader": "text",
      "primaryButtonBgSelected": "text",
      "primaryButtonTextSelected": "text"
    },
    "sectionTitle": "text",
    "footerTitle": "text",
    "optional": true
  }
}

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
_dynamicBoxSectionId: the section box ID

Example add to cart data

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