Enable Home Delivery shipping label in Dispatch stage of Fluent STORE

Get Started
Functionality
Learning
Extension
Dev Tooling
APIs
Releases

How-to Guide

Extend

Author:

Randy Chan

Changed on:

29 Aug 2025

Key Points

Typically, the HD shipping label is generated by the nominated carrier company or carrier aggregator. The label URL is then stored in OMS for printing.
This guide will take you through the setup to allow the store users to print the shipping label from Fluent STORE.

Steps

Overview

Carrier shipping label

This method is taking the following assumptions:

The labelURL provided by carrier is per consignment/fulfilment.
The labelURL is saved in fulfilment attributes level

Here are the steps to implement a custom click and collect pack label:

Configure the page query in the Waves fragment
Create a setting fc.store.print.hd.label
Configure the Waves fragment to include the “Print Home Delivery Labels“ button
Test the outcome

Configure the page query in the Waves fragment

Add the required fields in the page query of the waves fragment to populate the details on the custom pack label.The sample configured page query is as follows:

1"data": {
2    "query": "query ($id: ID!) {  waveById(id: $id) { items{ edges{  node{ product{name ref  ... on VariantProduct{gtin} attributes{ name type        value } } quantity  }  } } location { id ref } id    ref    status    location {      id      ref    }    fulfilments {      edges {        node {          id     type     ref          status  toAddress{street street2 city state postcode country }  attributes{name value type}        fromAddress {            id            ref          }          toAddress {            id            ref          }          items (first:130) {            edges {              node {                ref                                rejectedQuantity  requestedQuantity     filledQuantity      orderItem{product{... on VariantProduct{ name ref gtin  attributes{name type value} Product:product{ ... on StandardProduct{               __typename       ref                      attributes{                        name                        value                        }    }                }}}}                 }            }          }          order {            id            ref            type            status    attributes{name value type}         fulfilmentChoice {              deliveryType            }            customer {              firstName              lastName              primaryEmail              primaryPhone            }          }          articles {            edges {              node {            id     ref                consignmentArticles(first: 1) {                  edges {                    node {                      consignment {                        id                        ref                        carrier {                          name                        }                        trackingLabel                        status                        updatedOn                      }                    }                  }                }              }            }          }        }      }    }  }}",
3    "variables": {
4        "id": "{{params.id}}"
5    }
6}

Create a setting fc.store.print.hd.label

Name	fc.store.print.hd.label
Value type	`LOB`
LOB value	`<..The HTML template example provide below>`
Context	`RETAILER -or- ACCOUNT`
Context ID	`<RetailerID> -or- 0`

There is a base template to get started with. Please use your preferred HTML editor to edit the fields and layout to your desired outcome.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Carrier Labels</title>
7    <style type="text/css">
8      * {
9        margin: 0;
10        padding: 0;
11        text-indent: 0;
12      }
13      body {
14        padding: 41px 44px 41px 44px;
15        font-family: "Lato", sans-serif;
16      }
17      hr {
18        border-top: 1px solid black;
19      }
20      h1 {
21        font-size: 42px;
22        line-height: 50.4px;
23        margin-bottom: 36px;
24      }
25      h2 {
26        font-size: 20px;
27        font-weight: 700;
28        line-height: 24px;
29        margin-top: 24px;
30        margin-bottom: 24px;
31      }
32      span.deliver-to {
33        display: block;
34        font-size: 16px;
35        line-height: 19.2px;
36        margin-bottom: 16px;
37      }
38      span.deliver-to:last-of-type {
39        margin-bottom: 24px;
40      }
41
42      table {
43        width: 100%;
44        border-collapse: collapse;
45        text-align: left;
46        margin-top: 24px;
47        margin-bottom: 24px;
48      }
49      th {
50        font-size: 16px;
51        font-weight: 700;
52        line-height: 26px;
53        padding-bottom: 16px;
54      }
55      td {
56        padding-bottom: 8px;
57      }
58      .article-ref {
59        font-size: 16px;
60        line-height: 26px;
61        text-align: center;
62        margin-bottom: 4px;
63      }
64      .barcode-ref {
65        text-align: center;
66        margin-bottom: -30px;
67      }
68      .barcode-ref-title {
69        font-weight: 700;
70      }
71      .article-ref > span:first-of-type {
72        font-weight: 700;
73      }
74      .barcode {
75        display: flex;
76        justify-content: center;
77      }
78      .page-break {
79        display: block;
80        page-break-before: always;
81      }
82      .barcodek:last-child {
83        page-break-after: auto;
84      }
85      th {
86        padding-right: 10px;
87      }
88      .nowrap {
89        white-space: nowrap;
90      }
91      th,
92      td {
93        padding-right: 10px;
94      }
95      td {
96        vertical-align: top;
97      }
98      @media print {
99        #pagebreak {
100          float: none;
101          break-after: page;
102        }
103      }
104    </style>
105  </head>
106  <body>
107    <h1>Home Delivery</h1>
108    <hr />
109    <table cellspacing="0">
110      <thead>
111        <tr>
112          <th>Order</th>
113          <th>Fulfilment ID</th>
114           <th>External Label Link</th>
115        </tr>
116      </thead>
117      <tbody>
118{{#each waveById.fulfilments.edges}}
119{{#if (eq node.type 'HD_PFS')}} 
120        <tr>
121          <td>{{{node.order.ref}}}</td>
122          <td>{{{node.id}}}</td>
123          <td>
124<a target="_blank" href="{{node.attributes.byName.labelUrl}}"/>link</a>
125          </td>
126        </tr>
127{{/if}}
128 {{/each}}
129      </tbody>
130    </table>
131
132  </body>
133</html>

Configure the Waves fragment to include the “Print Home Delivery Label“ button

If the Waves fragment has not been configured previously then you will first need to get the content of the baseline waves fragment. Otherwise, if you have already configured the waves fragment on your account, then get the content from your account settings instead.Once you have accessed the baseline waves fragment, copy the content into your preferred text editor.Define the following component to the third step of Wave (DISPATCH stage), just below the component `fc.button.print`

1{
2    "component": "fc.button.print",
3    "props": {
4        "label": "i18n:fc.sf.ui.waves.detail.action.hdLabel.download.label",
5        "setting": "fc.store.print.hd.label",
6        "data": "waveById",
7        "behavior": "newTab"
8    }
9}

Test the outcome

Except as otherwise stated in the Extend Knowledge Content site policy, the content on this page is licensed under the Creative Commons Attribution 4.0 Licence, and any code samples that appear on this page are licensed under the Apache 2.0 Licence, unless any code sample forms part of the Fluent Order Management Platform code. Neither of these licences apply to any content on any other page that can be reached via a link on this page unless otherwise specified on that other page. If you wish to use any of the Extend Knowledge Content, you must do so in compliance with the licenses referred to above and the Extend Knowledge Content site policy, including attribution in the manner set out on this page.

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Carrier Labels</title>
7    <style type="text/css">
8      * {
9        margin: 0;
10        padding: 0;
11        text-indent: 0;
12      }
13      body {
14        padding: 41px 44px 41px 44px;
15        font-family: "Lato", sans-serif;
16      }
17      hr {
18        border-top: 1px solid black;
19      }
20      h1 {
21        font-size: 42px;
22        line-height: 50.4px;
23        margin-bottom: 36px;
24      }
25      h2 {
26        font-size: 20px;
27        font-weight: 700;
28        line-height: 24px;
29        margin-top: 24px;
30        margin-bottom: 24px;
31      }
32      span.deliver-to {
33        display: block;
34        font-size: 16px;
35        line-height: 19.2px;
36        margin-bottom: 16px;
37      }
38      span.deliver-to:last-of-type {
39        margin-bottom: 24px;
40      }
41
42      table {
43        width: 100%;
44        border-collapse: collapse;
45        text-align: left;
46        margin-top: 24px;
47        margin-bottom: 24px;
48      }
49      th {
50        font-size: 16px;
51        font-weight: 700;
52        line-height: 26px;
53        padding-bottom: 16px;
54      }
55      td {
56        padding-bottom: 8px;
57      }
58      .article-ref {
59        font-size: 16px;
60        line-height: 26px;
61        text-align: center;
62        margin-bottom: 4px;
63      }
64      .barcode-ref {
65        text-align: center;
66        margin-bottom: -30px;
67      }
68      .barcode-ref-title {
69        font-weight: 700;
70      }
71      .article-ref > span:first-of-type {
72        font-weight: 700;
73      }
74      .barcode {
75        display: flex;
76        justify-content: center;
77      }
78      .page-break {
79        display: block;
80        page-break-before: always;
81      }
82      .barcodek:last-child {
83        page-break-after: auto;
84      }
85      th {
86        padding-right: 10px;
87      }
88      .nowrap {
89        white-space: nowrap;
90      }
91      th,
92      td {
93        padding-right: 10px;
94      }
95      td {
96        vertical-align: top;
97      }
98      @media print {
99        #pagebreak {
100          float: none;
101          break-after: page;
102        }
103      }
104    </style>
105  </head>
106  <body>
107    <h1>Home Delivery</h1>
108    <hr />
109    <table cellspacing="0">
110      <thead>
111        <tr>
112          <th>Order</th>
113          <th>Fulfilment ID</th>
114           <th>External Label Link</th>
115        </tr>
116      </thead>
117      <tbody>
118{{#each waveById.fulfilments.edges}}
119{{#if (eq node.type 'HD_PFS')}} 
120        <tr>
121          <td>{{{node.order.ref}}}</td>
122          <td>{{{node.id}}}</td>
123          <td>
124<a target="_blank" href="{{node.attributes.byName.labelUrl}}"/>link</a>
125          </td>
126        </tr>
127{{/if}}
128 {{/each}}
129      </tbody>
130    </table>
131
132  </body>
133</html>

Enable Home Delivery shipping label in Dispatch stage of Fluent STORE

Key Points

Steps

Overview

Configure the page query in the Waves fragment

Create a setting fc.store.print.hd.label

Configure the Waves fragment to include the “Print Home Delivery Label“ button

Test the outcome

Randy Chan

Building Blocks

By Type

Helpful Resources

Quick Links