skio
Help CenterAdmin API Docs
  • 👋Getting Started
  • 💻App Block Setup
    • What are app blocks?
    • Plan Picker
  • ✏️Manual Theme Setup
    • Manual install process
    • Auto-login to Skio from Shopify Account
  • 📏Rules
    • Rules API
    • Apply Volume Discounts
  • 📦Build-a-Box
    • Static
    • Dynamic
    • Sectioned
  • 🛍️Selling Plan
    • Getting Selling Plan Information
  • 👾Extras
    • Subscription Tags
    • One-click Checkout / Buy Now
    • Redirect Old Customer Portals
  • ❓Troubleshooting
    • Selling Plan Cannot Be Applied to Variant
  • 🛒Shopify API References
    • Liquid Docs
    • AJAX API Docs
    • Storefront GraphQL API Docs
Powered by GitBook
On this page
  1. Build-a-Box

Dynamic

This gives a developer outline on how to setup a custom Dynamic BAB instead of using the default template provided by Skio

PreviousStaticNextSectioned

Last updated 1 year ago

What is a dynamic box?

A dynamic box is a box that can have variable pricing based on the items added to the box. Because of this, dynamic boxes need each child item to be added to cart.

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

Fetch Box Information

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

Example add to cart data

{
  quantity: item.quantity,
  id: item.id,
  selling_plan: selectedSellingPlan.id,
  properties: {
    _dynamicBoxIndex: boxIndex,
    _dynamicBoxId: boxId
  }
}
📦
here
  • What is a dynamic box?
  • Fetch Box Information
  • POSTget-dynamic-box
  • Front End Setup
  • Adding to Cart

get-dynamic-box

post

get-dynamic-box

Body
productPlatformIdstringOptionalExample: 8272457924891
Responses
200Success
application/json
post
POST /storefront-http/get-dynamic-box HTTP/1.1
Host: api.skio.com
Content-Type: application/json
Accept: */*
Content-Length: 37

{
  "productPlatformId": "8272457924891"
}
200Success
{
  "ok": true,
  "DynamicBox": {
    "boxId": "text",
    "currencyCode": "text",
    "fixedDiscountTier": {},
    "percentDiscountTier": {
      "ANY_ADDITIONAL_PROPERTY": "text"
    },
    "sizeRange": {},
    "sizeInterval": [
      1
    ],
    "priceRange": {},
    "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",
      "otuHeader": "text",
      "subheader": "text",
      "otuSubheader": "text",
      "hideLearnMore": true,
      "ignoreOneTime": true,
      "displayByVariant": true,
      "editableQuantity": true,
      "hideChildPriceCP": true,
      "ignoreBoxDiscount": true,
      "customerPortalTitle": "text"
    },
    "theme": {
      "header": "text",
      "subHeader": "text",
      "groupHeader": "text",
      "bodyText": "text",
      "discountBodyText": "text",
      "primaryButtonBgSelected": "text",
      "primaryButtonTextSelected": "text",
      "primaryButtonBgDefault": "text",
      "primaryButtonTextDefault": "text",
      "primaryButtonBorderSelected": "text",
      "primaryButtonBorderDefault": "text",
      "cartButtonBg": "text",
      "cartButtonText": "text",
      "cartButtonBgDisabled": "text",
      "cartButtonTextDisabled": "text",
      "cartBg": "text",
      "cartBorder": "text",
      "badgeBgSelected": "text",
      "badgeTextSelected": "text",
      "badgeBgDefault": "text",
      "badgeTextDefault": "text",
      "progessBar": "text",
      "progressBarCircleText": "text",
      "progressBarInnerCircle": "text",
      "progressBarOuterCircle": "text",
      "progessBarDefault": "text",
      "progressBarInnerCircleDefault": "text",
      "progressBarOuterCircleDefault": "text",
      "progressBarCircleTextDefault": "text",
      "variantSelectorBg": "text",
      "variantSelectorHighlightBg": "text",
      "quantityAdjustButtonBg": "text",
      "quantityBg": "text",
      "priceMarkerDefault": "text",
      "priceMarkerActive": "text"
    }
  }
}