> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openbridge.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# .add()

> Add items to the cart

```javascript theme={null}
openbridge.cart.add(variantId, quantity)
openbridge.cart.add(variantId, options)
openbridge.cart.add(lines)
```

Adds one or more product variants to the cart.

## Parameters

### Single item (simple)

| Param       | Type     | Required | Description                  |
| ----------- | -------- | -------- | ---------------------------- |
| `variantId` | `string` | Yes      | Product variant GID          |
| `quantity`  | `number` | No       | Quantity to add (default: 1) |

### Single item (with options)

| Param                   | Type     | Required | Description                                   |
| ----------------------- | -------- | -------- | --------------------------------------------- |
| `variantId`             | `string` | Yes      | Product variant GID                           |
| `options.quantity`      | `number` | No       | Quantity to add (default: 1)                  |
| `options.sellingPlanId` | `string` | No       | Selling plan GID for pre-orders/subscriptions |

### Multiple items

| Param   | Type                                               | Required | Description         |
| ------- | -------------------------------------------------- | -------- | ------------------- |
| `lines` | [`CartLineInput[]`](/api/types/cart#cartlineinput) | Yes      | Array of line items |

## Returns

`Promise<`[`ShopifyCart`](/api/types/cart#shopifycart)`>`

## Examples

### Add single item

```javascript theme={null}
await openbridge.cart.add('gid://shopify/ProductVariant/123')
```

### Add with quantity

```javascript theme={null}
await openbridge.cart.add('gid://shopify/ProductVariant/123', 3)
```

### Add multiple items

```javascript theme={null}
await openbridge.cart.add([
    { merchandiseId: 'gid://shopify/ProductVariant/123', quantity: 2 },
    { merchandiseId: 'gid://shopify/ProductVariant/456', quantity: 1 }
])
```

### With product data

```javascript theme={null}
// After fetching a product
const product = await openbridge.products.get('awesome-tshirt')
const variant = product.variants[0]

await openbridge.cart.add(variant.id, 1)
```

### Add to cart button

```javascript theme={null}
document.querySelector('.add-to-cart').addEventListener('click', async (e) => {
    const variantId = e.currentTarget.dataset.variantId
    const quantity = parseInt(e.currentTarget.dataset.quantity) || 1

    await openbridge.cart.add(variantId, quantity)
})
```

### Add with selling plan (pre-order)

Use this to add items with a selling plan attached. When the customer checks out, they'll pay the deposit amount defined in the selling plan.

```javascript theme={null}
await openbridge.cart.add('gid://shopify/ProductVariant/123', {
    quantity: 1,
    sellingPlanId: 'gid://shopify/SellingPlan/456'
})
```

### Add multiple items with selling plans

```javascript theme={null}
await openbridge.cart.add([
    {
        merchandiseId: 'gid://shopify/ProductVariant/123',
        quantity: 1,
        sellingPlanId: 'gid://shopify/SellingPlan/456'
    },
    {
        merchandiseId: 'gid://shopify/ProductVariant/789',
        quantity: 2
    }
])
```

### Check selling plan on cart line

```javascript theme={null}
const lines = openbridge.cart.lines()

lines.forEach(line => {
    if (line.sellingPlanAllocation) {
        console.log('Plan:', line.sellingPlanAllocation.sellingPlan.name)
        console.log('Deposit:', line.sellingPlanAllocation.checkoutChargeAmount.amount)
        console.log('Remaining:', line.sellingPlanAllocation.remainingBalanceChargeAmount.amount)
    }
})
```