# Flows

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

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

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

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

```php
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:

```php
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();
```


---

# Agent Instructions: 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:

```
GET https://docs.northcommerce.com/north-commerce/for-developers/flows.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.