Add To Cart

Adding the add to cart functionality into your custom North Commerce UI

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

use NorthCommerce\Ui\Flows\Cart_Quantity_Flow;

You will then need to create a new instance of Cart_Quantity_Flow

$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)

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 .

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

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.

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.

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