> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Wix eCommerce: Side Cart

## Article: Wix eCommerce: Side Cart

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/supported-wix-app-pages/wix-e-commerce/wix-e-commerce-side-cart.md

## Article Content:

# Wix eCommerce (Checkout & Orders): Side Cart

The following slots and APIs are available when building a [site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) for the [Side Cart](https://support.wix.com/en/article/customizing-the-side-cart).

<blockquote class="important">

  <strong>Important:</strong> Some plugins may not support automatic addition upon installation, even with `autoAddToSite` enabled. In that case, you must:
  - [Create a dashboard page to manage your site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/build-a-dashboard-page-to-manage-your-site-plugin.md) that calls [`addSitePlugin()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/add-site-plugin.md) to let users add the plugin to the checkout slot.
  - Release at least 1 version of your app so the site plugin extension is registered with Wix for `addSitePlugin()` to work properly.
  
</blockquote>

## Slots

The following image shows slots in the Side Cart, into which users can add plugins.

![side-cart-slots](https://wixmp-833713b177cebf373f611808.wixmp.com/images/21988d019e35da602895bbae036886bc.png)

The slots are represented by the following `placement` object:

```json
  {
    "appDefinitionId": "<WIX_ECOMMERCE_APP_ID>",
    "widgetId": "<SIDE_CART_WIDGET_ID>",
    "slotId": "<SELECTED_SLOT_ID>"
  }
```

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](#slots). </br> Supported values: <br /> <ul><li>`"side-cart:header:after-1"`</li><li>`"side-cart:lineItems:after-1"`</li><li>`"side-cart:customer-input:after-1"`</li><li>`"side-cart:footer:actions:before-1"`</li><li>`"side-cart:footer:actions:after-1"`</li></ul> |

For example, for your widget to appear before the header in the Side Cart use the following object in your configuration:

```json
{
  "appDefinitionId": "1380b703-ce81-ff05-f115-39571d94dfcd",
  "widgetId": "49dbb2d9-d9e5-4605-a147-e926605bf164",
  "slotId": "side-cart:header:before"
}
```

## Side Cart plugin APIs

Use the following APIs to integrate with the plugin's host:

- [eCommerce Current Cart API](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/purchase-flow/cart/introduction.md)
- [eCommerce frontend API](https://dev.wix.com/docs/sdk/frontend-modules/ecom/introduction.md)

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

```javascript
import { currentCart } from "@wix/ecom";
import { ecom } from "@wix/site-ecom";

$w.onReady(function() {
  // Get properties for the current cart.
  currentCart.getCurrentCart()
    .then((cart) => {
      const cartId = cart._id;
      const cartLineItems = cart.lineItems;
    });
    
  // Add selected items to the cart on button click.
  $w('#addItems').onClick(async () => {
    const itemsToAdd = $w('#itemsToChoose').value;
    await currentCart.addToCurrentCart({lineItems: itemsToAdd });

    // Call refreshCart() to refresh the cart components.
    await ecom.refreshCart();
  })
});
```

## 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:

* [eCommerce APIs](https://dev.wix.com/docs/api-reference/business-solutions/e-commerce/introduction.md)
* [Stores APIs](https://dev.wix.com/docs/api-reference/business-solutions/stores/introduction.md) 

## 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 `4px` baseline 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-1`          | `30px`              | `70px`      |
  | `side-cart:line-items:after-1`      | `50px`              | `150px`     |
  | `side-cart:customer-input:after-1`  | `24px`              | `150px`     |
  | `side-cart:footer:actions:before-1` | `50px`              | `70px`      |
  | `side-cart:footer:actions:after-1`  | `50px`              | `70px`      |