Fluent Commerce Logo
Docs
Sign In

Displaying fulfilment line item details in Fluent Store's PACK screen

How-to Guide

Author:

Randy Chan

Changed on:

7 May 2025

Key Points

  • Step by step to demonstrate how to add fulfilment line details into the PACK screen.
  • This is a configuration change only. Hence,  no custom component is required.
No alt text provided

Steps

Step arrow right iconSteps to add fulfilment line item details into Pack Screen

  • Update waves manifest in setting: fc.mystique.manifest.store.fragment.waves
  • Update LANGUAGE_EN-AU setting
  • refresh the STORE screen and test the outcome


Step arrow right iconUpdate waves manifest in setting: fc.mystique.manifest.store.fragment.waves

In the setting: `fc.mystique.manifest.store.fragment.waves` go to the "PACK" section where the is used for the pack screen:

No alt provided

Go to the `fc.list` section, and add the following code as part of the props:

1{
2    "component": "fc.list",
3    "dataSource": "waveById.fulfilments",
4    "props": {
5        "row": {
6            "expansion": {
7                "toggle": true,
8                "descendants": [
9                    {
10                        "component": "fc.list",
11                        "dataSource": "node.items.edges",
12                        "props": {
13                            "attributes": [
14                                {
15                                    "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.productRef.heading",
16                                    "value": "{{node.orderItem.product.ref}}"
17                                },
18                                {
19                                    "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.productName.heading",
20                                    "value": "{{node.orderItem.product.name}}"
21                                },
22                                {
23                                    "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.filledQuantuity.heading",
24                                    "value": "{{node.filledQuantity}}"
25                                },
26                                {
27                                    "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.imageUrl.heading",
28                                    "value": "{{img node.orderItem.product.attributes.byName.imageUrl width=50 margin='0.5em'}}"
29                                },
30                                {
31                                    "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.gtin.heading",
32                                    "value": "{{node.orderItem.product.gtin}}"
33                                }
34                            ]
35                        }
36                    }
37                ]
38            }
39        },
40        "attributes": [
41            {
42                "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.order.heading",
43                "value": "{{node.order.ref}}"
44            },
45            {
46                "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.customer.heading",
47                "value": "{{node.order.customer.firstName}} {{node.order.customer.lastName}}"
48            },
49            {
50                "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.orderType.heading",
51                "value": "{{node.order.type}}"
52            },
53            {
54                "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.fulfilmentStatus.heading",
55                "value": "{{node.status}}"
56            },
57            {
58                "label": "i18n:fc.sf.ui.waves.detail.list.fulfilments.column.giftMessage.heading",
59                "value": "{{node.order.attributes.byName.GIFTMESSAGE}}"
60            }
61        ]
62    }
63}
64




Step arrow right iconUpdate LANGUAGE_EN-AU setting

Add the following name value pairs to the LANGUAGE_EN-AU setting:

1{
2    "translation": {
3        "fc.sf.ui.waves.detail.list.fulfilments.column.productRef.heading": "Product Ref",
4        "fc.sf.ui.waves.detail.list.fulfilments.column.productName.heading": "Product Name",
5        "fc.sf.ui.waves.detail.list.fulfilments.column.filledQuantuity.heading": "Filled QTY",
6        "fc.sf.ui.waves.detail.list.fulfilments.column.imageUrl.heading": "Image",
7        "fc.sf.ui.waves.detail.list.fulfilments.column.gtin.heading": "GTIN",

Step arrow right iconRefresh the STORE screen and test the outcome

Go to STORE and refresh the browser to test the PACK screen:

Displaying fulfilment line item details in Fluent Store's PACK screen

Displaying fulfilment line item details in Fluent Store's PACK screen