> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/for-developers/flows/add-to-cart.md).

# Add To Cart

You may want to create a custom product grid or product page

## Add To Cart Implementation (Option 1)

The case for add to cart can be the same for product pages or product collection pages. However I want to show two different examples of how to do this for the sake of sharing multiple pathways to the same outcome. 

### Importing Cart\_Quantity\_Flow

At the top of your PHP file you need to import the Cart\_Quantity\_Flow so that you can access the North Commerce functionality

```php
use NorthCommerce\Ui\Flows\Cart_Quantity_Flow;
```

You will then need to create a new instance of `Cart_Quantity_Flow`

```php
$cart_quantity_flow = Cart_Quantity_Flow::instance();
```

Now we can start adding the functionality from the cart\_quantity\_flow. There are a few requirements.

### Add to cart requirements

1. Event *(*[*See Flow Events*](/north-commerce/for-developers/flows/flow-events.md)*)*
2. Trigger
3. Product Variant Id

#### Event

The event is what click event has to happen in order for this functionality to be invoked.

#### Trigger

The trigger event is a predefined functionality that runs specific javascript from our dataAPI on the front end. In the case of add to cart we use plus-one trigger to add one product to cart. This is also universally used `plus one` and `minus one` for managing quantity in the cart. 

#### Product Variant Id

In North Commerce every product is defined by a product variant id. So every product has a product variant id and this is what gets added to a cart and is what is referenced as a line item in North Commerce. Even if the product doesnt have any product options or traditional variants it still has a `solo product variant id` You can query products via [`entityAccess`](/north-commerce/for-developers/php-api/basic-entity-access-usage.md) . 

### Final Add To Cart Button

```
<button class="nc-img-view-product js-add-to-cart-button"
    <?php $cart_quantity_flow->attr('event', 'click') ?>
    <?php $cart_quantity_flow->attr('trigger', 'plus-one') ?>
    <?php $cart_quantity_flow->attr('product-variant-id', $product['product_variants'][0]['id']) ?>
                 
  >
     <?php echo esc_html_e( 'Add to cart', 'north-commerce' ); ?>
  </button>

```

You can also run custom functions in flows which can be tremeandously helpful especially for add to cart events. [*See Custom Functions In Flows*](/north-commerce/for-developers/flows/custom-functions-in-flows.md)

## Add To Cart Implementation (Option 2)

There may be cases where you need to implement your UI a little differently. Perhaps you are Divi, Elementor, Beaver Builder or another builder and want to build custom blocks we give you the flexibility to implement it in a way that is best for you.

The key difference between this option and option 1 is where you are placing the product variant id and how you are able to get access to it via flows.&#x20;

In the case of North Commerce's \[nc-product] shortcode we set the product variant id as a data attribute on the parent container of the product. In the case where a product has options that need to be selected before we know what the variant id is.&#x20;

```php
<div class="nc-container nc-global-styles"
	data-product-variant-id="<?php echo $solo_product_variant ? $solo_product_variant['id'] : '' ?>"
        // other data attributes
>
...
</div>
```

In the first example we got the product variant from a variable that we were looping over for the collection grid. In this case we need to select the data attribute that we set on our \<div>

```php
<?php $quantity_flow->attr('product-variant-id', '', 'div[data-type=product-overview]:data-product-variant-id') ?>
```

In this example we are getting the data-product-variant-id data attribute. We are being stricy and setting two different selectors and seperatting them with a colon. You can put any selector in there to find what you are looking for.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.northcommerce.com/north-commerce/for-developers/flows/add-to-cart.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.