Fluent Commerce Logo
Docs
Sign In

Create a Custom Printable Pack Slip

How-to Guide

Author:

Fluent Commerce

Changed on:

14 May 2025

Key Points

  • The Pack Slip on Fluent Store can be customised via an HTML template.
  • This guide will take you through the setup and fragment changes required to customise the Pack Slip.
No alt text provided

Steps

Step arrow right iconConfigure 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 slip.

The sample configured page query is as follows:

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

Language: json

Name: The sample configured page query is as follows:

Description:

in this example, the additional fields are added for the toAddress: street street2 city state postcode country to the reference query.

Step arrow right iconCreate a setting fc.store.print.packslip

Name

fc.store.print.packslip

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<head>
2<link rel="preconnect" href="https://fonts.googleapis.com">
3<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4</head>
5<style>
6* {
7        margin: 0;
8        padding: 0;
9        text-indent: 0;
10      }
11      body {
12        font-family: "Lato", sans-serif;
13      }
14      hr {
15        border-top: 1px solid black;
16      }
17      h1 {
18        font-size: 24px;
19      }
20      h2 {
21        font-size: 20px;
22      }
23      body {
24        font-size: 16px;
25      }
26      .t2 {
27        font-size: 12px;
28      }
29      h1,
30      .t1 th,
31      .section-title {
32        font-weight: 700;
33      }
34      h2 {
35        font-weight: 500;
36      }
37      body {
38        font-weight: 400;
39      }
40      h1 {
41        line-height: 28.8px;
42      }
43      .t1 th {
44        line-height: 26px;
45      }
46      h2 {
47        line-height: 24px;
48      }
49      span.deliver-to {
50        line-height: 19.2px;
51      }
52      h2 {
53        margin-top: 10px;
54        margin-bottom: 29px;
55      }
56      p.deliver-to,
57      .t1,
58      .section-title-row {
59        margin-top: 24px;
60      }
61      span.deliver-to {
62        margin-bottom: 16px;
63      }
64      span.deliver-to:last-of-type {
65        margin-bottom: 24px;
66      }
67      .section-title-row {
68        padding: 7px 16px 6px 16px;
69      }
70      body {
71        padding: 35px 44px 35px 44px;
72      }
73      .t1 th {
74        padding-bottom: 16px;
75      }
76      .t1 td {
77        padding-bottom: 8px;
78      }
79      .t2 th,
80      .t2 td {
81        padding-top: 9px;
82        padding-bottom: 9px;
83      }
84      .t2 th:first-child,
85      .t2 td:first-child {
86        padding-left: 16px;
87      }
88      .t2 th:last-child,
89      .t2 td:last-child {
90        padding-right: 20px;
91      }
92      .t1,
93      .t2 {
94        width: 100%;
95        border-collapse: collapse;
96        text-align: left;
97      }
98      .section-title-row {
99        background-color: #d7d8d9;
100      }
101      span.deliver-to {
102        display: block;
103      }
104      .t2 tr {
105        border-bottom: 1px solid #000;
106      }
107      .t2 th:last-child,
108      .t2 td:last-child {
109        text-align: right;
110      }
111      .section-title {
112        text-transform: uppercase;
113      }
114      @media print {
115        #pagebreak {
116          float: none;
117          break-after: page;
118        }
119      }
120</style>
121<div style="text-align:center; font-size:20px; font-weight:bold"></div>
122<div style="margin-top:50px">
123{{#each waveById.fulfilments.edges}}
124<div id="pagebreak">
125<div style="margin-top:35px"></div>
126<h1>Pack Slip</h1>
127    <h2>
128      {{#if (eq node.order.type 'HD')}} Home Delivery {{else}}{{#if
129      (eq node.order.type 'CC')}}Click & Collect {{else}}
130      {{node.order.type}} {{/if}} {{/if}}
131    </h2>
132<hr />
133<p class="deliver-to">
134      <span class="deliver-to">
135  Customer Name:
136        {{node.order.customer.firstName}}
137        {{node.order.customer.lastName}}
138      <br />Email: {{node.order.customer.primaryEmail}}<br />Phone Number: {{node.order.customer.primaryPhone}}</span
139      >
140 {{#if (eq node.order.type 'HD')}}
141      <span class="deliver-to">
142        {{node.toAddress.street}}
143        {{node.toAddress.street2}}<br />
144        {{node.toAddress.city}}
145        {{node.toAddress.state}}
146        {{node.toAddress.postcode}}<br />
147        {{node.toAddress.country}}<br />
148      </span>
149{{/if}}
150    </p>
151<hr />
152<table cellspacing="0" class="t1">
153      <thead>
154        <tr>
155          <th>Order Ref</th>
156          <th>Fulfilment Id</th>
157        </tr>
158      </thead>
159      <tbody>
160        <tr>
161          <td>{{node.order.ref}}</td>
162          <td>{{node.id}}</td>
163        </tr>
164      </tbody>
165    </table>
166    <section>
167      <div class="section-title-row">
168        <span class="section-title">Products</span>
169      </div>
170      <table cellspacing="0" class="t2">
171        <thead>
172          <tr>
173            <th>Product Description</th>
174            <th>Requested Quantity</th>
175            <th>Filled Quantity</th>
176          </tr>
177        </thead>
178        <tbody>
179          {{#each node.items.edges}}
180          <tr>
181            <td>
182              {{node.orderItem.product.ref}}, {{node.orderItem.product.name}}
183            </td>
184<td> {{node.requestedQuantity}}</td>
185            <td>{{node.filledQuantity}}</td>
186          </tr>
187          {{/each}}
188        </tbody>
189      </table>
190    </section>
191 <section>
192      <div class="section-title-row">
193        <span class="section-title"> return information </span>
194      </div>
195      <table cellspacing="0" class="t2">
196        <tr>
197          <th></th>
198        </tr>
199      </table>
200    </section>
201    <section id="pagebreak">
202      <div class="section-title-row">
203        <span class="section-title"> contact us </span>
204      </div>
205      <table cellspacing="0" class="t2">
206        <thead>
207          <tr>
208            <th>Phone: 02 1234567</th>
209            <th>Email: support@retailercompany.com.au</th>
210          </tr>
211        </thead>
212      </table>
213    </section>
214    </table>
215</div>
216</div>
217{{/each}}

Language: html

Name: HTML Example

Description:

[Warning: empty required content area]



Step arrow right iconConfigure the Waves fragment to include the “Custom Pack Slip“ 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 second step of the wizard (PACK 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.packslip.custom.label",
5        "setting": "fc.store.print.packslip",
6        "behavior":"print"
7    }
8}

Language: json

Name: Code sample

Description:

Please make sure to add label/value to your language setting.

Make sure the JSON is validated.

Step arrow right iconTesting the outcome

Once you have successfully updated the waves fragment with the Custom Pack Slip button, now create/ update the waves fragment setting on your account. Manifest documents should be stored as a JSON Setting at the Account context.

You can now log on to Fluent Store with your location username and password. Select a Wave in the status "PACK" or Create a new Wave. You should then be able to see the “Custom Pack Slip” button on the PACK step of the Wave.

No alt providedNo alt providedNo alt providedNo alt providedNo alt providedNo alt provided