Author:
Randy Chan
Changed on:
22 Jan 2025
Copyright © 2024-2026 Fluent Retail Pty Ltd (trading as Fluent Commerce). Unless otherwise expressly stated in a current written agreement with Fluent Commerce or any of its affiliates or on any single page of the docs.fluentcommerce.com site, use of the materials on this site is strictly limited to viewing by individuals over 18 years old for legitimate commercially appropriate reasons; and any downloading, copying or other actions or uses of any kind or by any means of the materials on this site, including by artificial intelligence tools, is strictly prohibited. All other rights reserved.
ContentForm the GraphQL query and add it to the manifest page query
1{ waveById(id: 5002857) { id ref status
2items{ edges{ node{ product{name ref ... on VariantProduct{gtin} attributes{ name type value } } quantity } } }
3 location { id ref } fulfilments { edges { node { id ref status attributes{name value type} fromAddress { id ref } toAddress { id ref } items { edges { node { ref rejectedQuantity requestedQuantity filledQuantity orderItem{product{... on VariantProduct{gtin 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 { ref consignmentArticles(first: 1) { edges { node { consignment { id ref carrier { name } trackingLabel status updatedOn } } } } } } } } } } }}`fc.mystique.manifest.store.fragment.waves `
Configure the print download in the manifest1{
2 "component": "fc.button.print",
3 "props": {
4 "label": "i18n:fc.sf.ui.waves.wizard.pick.customisePicklist",
5 "setting": "fc.store.print.picklist2",
6 "behavior": "preview"
7 }
8}
Add internationalisation values to the LANGUAGE_EN-AU setting` "fc.sf.ui.waves.wizard.pick.customisePicklist":"Customise Pick List",`Create a new setting to store the new HTML template 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>Click & Collect</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 svg {
75 max-height: 110px
76}
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
105 .CustomLabel .items th {
106 padding: 0 3px 2px 3px;
107 text-align: left;
108 vertical-align: bottom;
109 }
110
111 .CustomLabel .items td {
112 padding: 5px 4px;
113 font-size: 12px;
114 width: 32px;
115 }
116
117 .CustomLabel .items div.qty {
118 text-align: center;
119 border-radius: 50%;
120 font-size: 16px;
121 font-weight: bold;
122 border: 1px solid black;
123 width: 26px;
124 height: 26px;
125 line-height: 24px;
126 }
127
128 .CustomLabel .items div.qty.qty-1 {
129 text-align: center;
130 font-size: 16px;
131 padding: 0;
132 font-size: inherit;
133 font-weight: normal;
134 border: 0;
135 }
136
137 .CustomLabel .items td.product-image {
138 width: 80px
139 }
140
141 .CustomLabel .items div.product-barcode {
142 font-family: 'Libre Barcode 20 Text', cursive;
143 font-size: 20px;
144 }
145
146 .CustomLabel .items div.soh {
147 text-align: center;
148 border-radius: 50%;
149 font-size: 13px;
150 font-weight: bold;
151 border: 1px solid black;
152 width: 30px;
153 height: 30px;
154 line-height: 27px;
155 }
156 </style>
157 </head>
158 <body>
159<div style="font-size:16px; padding:10px; text-align:end">{{dateStringFormatter (dateAdd)}}</div>
160<div style="text-align:center; font-size:20px; font-weight:bold">Pick List - Wave: {{waveById.id}}</div>
161<div style="margin-top:50px">
162 {{#each waveById.items.edges}}
163 <table class="items">
164 <tr style="font-size:15px">
165 <th>Qty</th>
166 <th>Size</th>
167 <th>Description</th>
168 <th>Item Code</th>
169 <th>Image</th>
170 <th>Barcode</th>
171 </tr>
172 <tr style="border-top: 1px solid silver">
173 <td>
174 <div class="qty qty- {{node.quantity}} ">{{node.quantity}} </div>
175 </td>
176 <td>{{node.product.attributes.byName.size}}</td>
177 <td>{{node.product.name}}</td>
178 <td>{{node.product.ref}}</td>
179 <td>
180 <img width="80" height="80" src="{{node.product.attributes.byName.imageUrl}}">
181 </td>
182 <td>
183 <div class="barcode">{{{barcode node.product.gtin null true}}}</div>
184 </td>
185 </tr>
186 </table>
187 {{/each}}
188</div>
189
190 </body>
191</html>
