Configure complex calculation in Manifest

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Author:

Fluent Commerce

Changed on:

13 Dec 2023

Key Points

This article describes how to configure complex calculation in Manifest
Target audience: Architect, Partner Developer, Partner BA.

Steps

Guide

The general approach for complex numbers calculation in Manifest should be based on the following steps:

Define the calculation formula.
Get the required data from GraphQL.
You can use templates combination to describe required formula.
Extend Manifest.

Note

Use Logic and Number functions to create custom formulas.

Templates used in the example:

Name	Example	Additional information
currency	`{{ currency 123 'AUD' }}`
add	`{{add 1 2}} // 3`
arrayFieldSum	calculation data: const arr = [{age: 1},{age: 2},{age: 3},] `{{arrayFieldSum arr 'age'}} // 6`	works only in OMS is used to calculate the sum of fields in array items with a given path (path to number in item)

Note

Use `()` multiple times to compile different templates for complex formulas:`"{currency (add 1 2) 'AUD'}}"`

Real Life Example

We want to display the Order Value card containing the following fields:

Items - the sum of all items' values in the order
Shipping - shipping fee (the sum of shipping fees of all deliveries in the order)
Taxes - the sum of order items' taxes
Total - the sum of values above (Items Subtotal + Shipping + Taxes)

Step 1. Get requested data from GraphQL query:

1query (
2  $id: ID!
3  $items_after: String
4  $items_first: Int
5  $fulfilmentChoices_first: Int
6) {
7  orderById(id: $id) {
8    id
9    items(after: $items_after, first: $items_first) {
10      edges {
11        node {
12          id
13          price
14          quantity
15          totalPrice
16          totalTaxPrice
17          taxPrice
18          currency
19        }
20      }
21    }
22    fulfilmentChoices(first: $fulfilmentChoices_first) {
23      edges {
24        node {
25          id
26          fulfilmentPrice
27          currency
28        }
29      }
30    }
31  }
32}

Step 2. Configure Manifest as in the example below:

1{
2    "component": "fc.card.attribute",
3    "props": {
4        "title": "Title",
5        "width": "half",
6        "dataSource": "orderById",
7        "attributes": [
8            {
9                "label": "Items",
10                "template": "{{currency (arrayFieldSum items.edges 'node.totalPrice') items.edges.0.node.currency}}"
11            },
12            {
13                "label": "Shipping",
14                "template": "{{currency (arrayFieldSum fulfilmentChoices.edges 'node.fulfilmentPrice') fulfilmentChoices.edges.0.node.currency}}"
15            },
16            {
17                "label": "Taxes",
18                "template": "{{currency (arrayFieldSum items.edges 'node.totalTaxPrice') items.edges.0.node.currency}}"
19            },
20            {
21                "label": "Total",
22                "template": "{{bold (currency (add (arrayFieldSum items.edges 'node.totalPrice') (add (arrayFieldSum fulfilmentChoices.edges 'node.fulfilmentPrice') (arrayFieldSum items.edges 'node.totalTaxPrice'))) items.edges.0.node.currency ) }}"
23            }
24        ]
25    }
26}

Fluent Commerce

1{
2    "component": "fc.card.attribute",
3    "props": {
4        "title": "Title",
5        "width": "half",
6        "dataSource": "orderById",
7        "attributes": [
8            {
9                "label": "Items",
10                "template": "{{currency (arrayFieldSum items.edges 'node.totalPrice') items.edges.0.node.currency}}"
11            },
12            {
13                "label": "Shipping",
14                "template": "{{currency (arrayFieldSum fulfilmentChoices.edges 'node.fulfilmentPrice') fulfilmentChoices.edges.0.node.currency}}"
15            },
16            {
17                "label": "Taxes",
18                "template": "{{currency (arrayFieldSum items.edges 'node.totalTaxPrice') items.edges.0.node.currency}}"
19            },
20            {
21                "label": "Total",
22                "template": "{{bold (currency (add (arrayFieldSum items.edges 'node.totalPrice') (add (arrayFieldSum fulfilmentChoices.edges 'node.fulfilmentPrice') (arrayFieldSum items.edges 'node.totalTaxPrice'))) items.edges.0.node.currency ) }}"
23            }
24        ]
25    }
26}

Configure complex calculation in Manifest

Key Points

Steps

Guide

Templates used in the example:

Real Life Example

Fluent Commerce

Building Blocks

By Type

Helpful Resources

Quick Links