Wix eCommerce: Side Cart
The following slots and APIs are available when building a site plugin for the Side Cart.
Slots
The following image shows slots in the Side Cart, into which users can add plugins.
The slots are represented by the following placement object:
Provide the following values for each property:
| Key | Value |
|---|---|
appDefinitionId | "1380b703-ce81-ff05-f115-39571d94dfcd" |
widgetId | "49dbb2d9-d9e5-4605-a147-e926605bf164" |
slotId | ID of the slot you want as displayed in the image above. Supported values:
|
For example, for your widget to appear before the header in the Side Cart use the following object in your configuration:
Side Cart plugin APIs
Use the following APIs to integrate with the plugin's host:
The Current Cart API allows you to manage and get information about the current cart. The eCommerce frontend API allows you to interact with the cart's UI elements.
Code example
Related Wix backend APIs
Side Cart plugins usually need to integrate with Wix eCommerce's Cart and Checkout APIs, as well as other backend APIs.
In your site plugin or in your app's server code, you may want to perform actions or implement logic that is dependent on the state of the current cart or related data.
The following Wix APIs may be useful:
Design guidelines
When you create a Side Cart plugin, we recommend following these design guidelines:
-
Make sure your design is responsive for all screen sizes.
-
The Side Cart uses a
4pxbaseline grid for aligning all elements, typography, and spacing between elements. Don't add extra spacing around your plugin design. The slot automatically handles spacing to maintain the Side Cart's uniform layout. -
Give your designs an appropriate height, depending on the slot you use.
Slot Recommended height Max height side-cart:header:after-130px70pxside-cart:line-items:after-150px150pxside-cart:customer-input:after-124px150pxside-cart:footer:actions:before-150px70pxside-cart:footer:actions:after-150px70px