Description:

Cart scaffolding is a data zone component used on the cart page, that gives structure to any other cart components you place inside of it as well as allows you to control the states of all the child components from one place. 

Shopify Prerequisites

• N/A

Shipcode Configuration

ADDING THE COMPONENT TO A LAYOUT

• To add the Cart Scaffolding component, navigate to the components panel, select the Libraries tab in the header, then find the component in the Shopify Template Library accordion.
• • Drag and drop it onto your desired layout
  • Navigate to the structure panel and right click on the layer to open the context menu, then select Detach Instance
  • • Detaching the component from the Shopify Template Library allows you to add new components inside of it
    • • When you add new cart components inside the scaffolding component, you will want to add them inside of the Success Slot in the structure panel

CONFIGURATION OPTIONS

When you have other cart components like Cart Items, Cart Summary, and Checkout Button inside the success slot, you can use the scaffolding component toggles (available when selecting the parent layer and navigation to the interactions panel) to simulate different states on the canvas so you can visually see that state on the canvas while you make style changes without having to toggle on the state per child component.

Editing the Cart Scaffolding component comes with four different simulation options: Empty state, Error state, Loading state, and Max Quantity (only helpful when you have other cart components nested in the success slot). If you do not have any other cart components in your scaffolding component, you will not see anything on the canvas when toggling various states.

EMPTY STATE

• The empty state is shown when your cart has no items and will only be relevant when you have the other cart components nested inside the scaffolding success slot.
• To edit the error state, select the scaffolding component’s first layer and navigate to the Interactions panel, then set the Simulate Empty State to ‘True’—this will simulate the empty state on the canvas for you to visually see your empty state while you make edits. When you’re done, navigate back to the scaffolding component and turn the toggle back to ‘False’

ERROR STATE

• The error state is shown when customers have items in their cart that are no longer available and they need to remove those items from their cart before continuing to checkout. This state also affects the checkout button until the remove actions are resolved.
• To edit the error state, select the scaffolding component’s first layer and navigate to the Interactions panel, then set the Simulate Error State to ‘True’—this will simulate the error state on the canvas for you to visually see your error state while you make edits. When you’re done, navigate back to the scaffolding component and turn the toggle back to ‘False’

LOADING STATE

• The loading state is shown to customers while the page is loading in. 
• To edit the loading state, select the scaffolding component’s first layer and navigate to the Interactions panel, then set the Simulate Loading State to ‘True’—this will simulate the loading state on the canvas for you to visually see your loading state while you make edits. When you’re done, navigate back to the scaffolding component and turn the Loading State toggle back to ‘False’
• • Note: If you style the loading states per child component, the scaffolding component will take precedence.

MAX QUANTITY STATE

• The Max Quantity state is shown when a cart item has reached the max inventory available for the selected variant and will only be relevant when you have the Cart Items and Checkout Button components nested inside the scaffolding success slot.
• To edit the error state, select the scaffolding component’s first layer and navigate to the Interactions panel, then set the Simulate Max quantity State to ‘True’—this will simulate the max quantity state on the canvas for you to visually see it while you make edits. When you’re done, navigate back to the scaffolding component and turn the toggle back to ‘False’.