> For the complete documentation index, see [llms.txt](https://docs.antsomi.com/developers-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antsomi.com/developers-guide/website/tracking-events/direct-sample-e-commerce-events/add-a-product-to-the-shopping-cart.md).

# Add a Product to the Shopping Cart

When a user adds a product to their shopping cart on your website, signifying their intent to purchase a specific item.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
web_event.track("product", "add_to_cart", {
    items: [
        {
            type: "product",
            id: "{{product_sku}}",
            name: "{{product_name}}",
            sku: "{{product_sku}}",
            page_url: "{{product_page_url}}",
            image_url: "{{product_featured_image}}",
            price: "{{product_sale_price}}",
            original_price: "{{product_original_price}}",
            main_category: "{{product_main_category}}",
            variant: "{{product_variant_name}}",
            color: "{{product_color}}",
            size: "{{product_size}}",               
            parent_item_id: "{{product_parent_id}}",
            variant: "{{product_variant_name}}",
            status: "active",            
            is_parent: "false",
            quantity: "{{product_quantity}}",
            cdp_source: "Staging" // Staging/Production
        }
    ],
    dims: {
        customers: {
            customer_id: "{{customer_id}}",
            name: "{{customer_name}}",
            email: "{{customer_email}}",
            phone: "{{customer_phone}}",
            cdp_source: "Staging" // Staging/Production
        }
    },
    extra: {
        cart_subtotal: "{{cart_subtotal}}",
        cart_item_count: "{{cart_item_count}}"
    }
});
```

{% endtab %}
{% endtabs %}