> 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.