# Basket

## Commands

### `open`

Opens the basket.

<pre class="language-javascript"><code class="lang-javascript"><strong>instance.basket.open();
</strong></code></pre>

### `close`

Closes the basket.

```javascript
instance.basket.close();
```

### `getState`

Gets the current state of the basket.

```javascript
// You can either await the result of the command
const result = await instance.basket.getState();

// OR pass a callback
instance.basket.getState((result) => {
    // YOUR CODE HERE
});
```

The command will return an object with the following properties:

| Property | Type      | Description                  |
| -------- | --------- | ---------------------------- |
| `isOpen` | `boolean` | Is the basket currently open |

### `addProduct`

Adds a product to the basket. The command accepts a single argument, consisting of the properties below:

| Property      | Type     | Description                          |
| ------------- | -------- | ------------------------------------ |
| `title`       | `string` | Product title                        |
| `description` | `string` | Product description                  |
| `productId`   | `string` | Product Id                           |
| `price`       | `number` | Product price                        |
| `originPage`  | `number` | Page where the product is located on |
| `quantity`    | `number` | Quanity of product to add            |

Below is an example use:

```javascript
instance.basket.addProduct({
    title: 'My product',
    description: 'Product description',
    productId: 'PROD-25B',
    price: '29.95',
    originPage: 6,
    quantity: 1
});
```

## Events

### `onOpened`

This subscription will trigger every time the basket is opened.

<pre class="language-javascript"><code class="lang-javascript"><strong>instance.basket.onOpened(() => {
</strong>    // YOUR CODE HERE
});
</code></pre>

### `onClosed`

This subscription will trigger every time the basket is closed.

<pre class="language-javascript"><code class="lang-javascript"><strong>instance.basket.onClosed(() => {
</strong>    // YOUR CODE HERE
});
</code></pre>

### `onToggled`

This subscription will trigger every time the basket is toggled between open and closed state.

<pre class="language-javascript"><code class="lang-javascript"><strong>instance.basket.onToggled(() => {
</strong>    // YOUR CODE HERE
});
</code></pre>

### `onProductAdd`

This subscription will trigger whenever a product is added to the basket.

{% hint style="warning" %}
**Note:**

Products added through the `addProduct` API command will not trigger this subscription.
{% endhint %}

```javascript
instance.basket.onProductAdd((product) => {
    // YOUR CODE HERE
});
```

The callback contains a value/result of the product that was added, containing the following properties:

| Property      | Type     | Description                                          |
| ------------- | -------- | ---------------------------------------------------- |
| `title`       | `string` | Product title                                        |
| `description` | `string` | Product description                                  |
| `productId`   | `string` | Product ID                                           |
| `price`       | `number` | Product price                                        |
| `pageIndex`   | `number` | Page index where the product is located\* (see note) |
| `originPage`  | `number` | Page where the product is located on                 |
| `quantity`    | `number` | Quanity of product added                             |
| `packageSize` | `number` | Number of items per package                          |

{% hint style="info" %}
**Note:**

Please note that `pageIndex` starts at `0`. So the 1st page of your flipbook will have a `pageIndex` of `0`, page 2 a `pageIndex` of `1` and so on. To get the actual pagenumber you should use `originPage` instead.
{% endhint %}