Flows

Flows in North Commerce are a way to manage and coordinate different aspects of the e-commerce functionality, particularly in the frontend user interface.

What are North Commerce Flows?

Flows were created so that frontend developers could create virtually any UI without having to fuss with anything else to get North Commerce functionality working. There is one way to "Add To Cart", one way to get cart items, etc so that you can just focus on the UI.

Flows in North Commerce are a way to manage and coordinate different aspects of the e-commerce functionality, particularly in the frontend user interface. They are designed to handle dynamic updates and interactions without requiring full page reloads.

The flows work by using a combination of PHP and JavaScript. On the PHP side, they use the Flow_Manager class to set up data attributes on HTML elements. These attributes are then used by the JavaScript code to manage the dynamic behavior of the page.

How flows work

Flows start in PHP land and this is managed by the Flow_Manager class. Here we enqueue the flow with specific javascript depedencies managed in js_depends function inside of the Flow_Manager

Below is a list of functions that power the flow system. We leverage these functions to echo data attributes in our html that automatically provide reactive functionality to the "ecommerce parts" of a website using North Commerce

public function attr($name, $value, $dest = false) {
	echo $this->get_attr($name, $value);
	if($dest) {
	   echo " ";
	   echo $this->get_link($name, $dest);
    }
}

public function get_attr($name, $value) {
    return $this->get_attr_name($name) . '="' . $this->get_attr_value($value) . '"';
}

public function get_attr_name($name) {
    return 'data-nc-flow-' . $this->name . "-attr-$name";
}

public function get_attr_value($value) {
     return esc_attr($value);
}

Flow Classes

Each "major" ecommerce functionality typically gets its own flow. Each of these flows have their own Flow classes (e.g., Multi_Item_Cart_Flow, Checkout_Shipping_Flow): These extend the abstract Flow class and represent specific functional areas of the application.

The current available flows are:

1. Cart Drawer Flow

2. Cart Quantity Flow

3. Checkout Coordinator Flow

4. Checkout Customer Flow

5. Checkout payment Flow

6. Checkout Shipping Flow

7. Multi Item Cart Flow

8. Single Item Cart Flow

These flows are typically instantiated and used in template files like this:

use NorthCommerce\Ui\Flows\Multi_Item_Cart_Flow;
use NorthCommerce\Ui\Flows\Checkout_Shipping_Flow;
​
$cart_items_flow = Multi_Item_Cart_Flow::instance();
$shipping_flow = Checkout_Shipping_Flow::instance();