Fluent Commerce Logo
Docs
Sign In

Configure complex calculation in Manifest

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

Step arrow right iconGuide

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.

Step arrow right iconTemplates 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)

Step arrow right iconReal 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}

Language: graphqlschema

Name: GraphQL query

Description:

[Warning: empty required content area]

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}

Language: json

Name: Configure Manifest

Description:

[Warning: empty required content area]



Fluent Commerce

Fluent Commerce

Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.

Fluent Logo