Guide - Customise a Pick List
How-to Guide
Author:
Fluent Commerce
Changed on:
13 Dec 2023
Key Points
- How to customise a Pick List
Docs
Author:
Fluent Commerce
Changed on:
13 Dec 2023
How to customise a Pick List
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.
1<style>
2 .CustomLabel .items th {
3 padding: 0 3px 2px 3px;
4 text-align: left;
5 vertical-align: bottom;
6 }
7
8 .CustomLabel .items td {
9 padding: 5px 4px;
10 font-size: 12px;
11 }
12
13 .CustomLabel .items div.qty {
14 text-align: center;
15 border-radius: 50%;
16 font-size: 22px;
17 font-weight: bold;
18 border: 2px solid black;
19 width: 34px;
20 height: 34px;
21 line-height: 27px;
22 }
23
24 .CustomLabel .items div.qty.qty-1 {
25 text-align: center;
26 padding: 0;
27 font-size: inherit;
28 font-weight: normal;
29 border: 0;
30 }
31
32 .CustomLabel .items td.product-image {
33 width: 80px
34 }
35
36 .CustomLabel .items td.product-barcode {
37 width: 140px
38 }
39
40 .CustomLabel .items div.soh {
41 text-align: center;
42 border-radius: 50%;
43 font-size: 13px;
44 font-weight: bold;
45 border: 1px solid black;
46 width: 30px;
47 height: 30px;
48 line-height: 27px;
49 }
50</style>
51
52<div style="text-align:center; font-size:18px; font-weight:bold">Printed Pick List</div>
53<div style="font-size:12px; padding-bottom:10px;">{{date}}</div>
54<div style="width:180px; display:inline-block"></div>
55<div style="display:inline-block; margin-left:20px; padding-left:20px; border-left: 1px solid silver; font-size:35px; line-height: 35px; vertical-align: middle;">Pick List</div>
56<div style="margin-top:30px; font-weight:bold; font-size:16px;">Wave {{wave.id}}</div>
57<div style="margin-top:10px">
58 <table class="items">
59 <tr style="font-size:15px">
60 <th>Qty</th>
61 <th>Size</th>
62 <th>Colour</th>
63 <th>Description</th>
64 <th>Price</th>
65 <th>Dept</th>
66 <th>Item Code</th>
67 <th>SOH</th>
68 <th></th>
69 <th></th>
70 </tr>
71 {{#items}}
72 <tr style="border-top: 1px solid silver">
73 <td>
74 <div class="qty qty-{{requiredQty}}">{{requiredQty}}</div>
75 </td>
76 <td style="text-align:center">{{sku.attributes.size}}</td>
77 <td>{{sku.attributes.colour}}</td>
78 <td>{{sku.name}}</td>
79 <td>${{sku.orderPriceWithTax}}</td>
80 <td>{{sku.category.name}}</td>
81 <td>{{sku.skuRef}}</td>
82 <td>
83 <div class="soh">{{sku.onHand}}</div>
84 </td>
85 <td class="product-image"><img src="{{sku.imageUrlRef}}"/></td>
86 <td class="product-barcode">
87 <div style="text-align:center">
88 <img class="barcode" style="height:100%" jsbarcode-fontsize="15" jsbarcode-width="1" jsbarcode-height="50" jsbarcode-value="{{sku.references.BARCODE}}"/>
89 </div>
90 </td>
91 </tr>
92 {{/items}}
93 </table>
94</div>1{
2 "setting": {
3 "key": "PICK_N_PACK_CUSTOM_PICK_LIST",
4 "value": "<style>\r\n .CustomLabel .items th{\r\n padding: 0 3px 2px 3px;\r\n text-align:left;\r\n vertical-align:bottom;\r\n }\r\n\r\n .CustomLabel .items td{\r\n padding: 5px 4px;\r\n font-size: 12px;\r\n }\r\n\r\n .CustomLabel .items div.qty{\r\n text-align: center;\r\n border-radius: 50%;\r\n font-size: 22px;\r\n font-weight: bold;\r\n border: 2px solid black;\r\n width: 34px;\r\n height: 34px;\r\n line-height: 27px;\r\n }\r\n\r\n .CustomLabel .items div.qty.qty-1 {\r\n text-align: center;\r\n padding: 0;\r\n font-size: inherit;\r\n font-weight: normal;\r\n border: 0;\r\n }\r\n\r\n .CustomLabel .items td.product-image {\r\n width: 80px\r\n }\r\n\r\n .CustomLabel .items td.product-barcode {\r\n width: 140px\r\n }\r\n\r\n .CustomLabel .items div.soh{\r\n text-align: center;\r\n border-radius: 50%;\r\n font-size: 13px;\r\n font-weight: bold;\r\n border: 1px solid black;\r\n width: 30px;\r\n height: 30px;\r\n line-height: 27px;\r\n }\r\n\r\n </style>\r\n <div style=\"text-align:center; font-size:18px; font-weight:bold\">Printed Pick List</div>\r\n <div style=\"font-size:12px; padding-bottom:10px;\">{{date}}</div>\r\n <div style=\"width:180px; display:inline-block\"></div>\r\n <div style=\"display:inline-block; margin-left:20px; padding-left:20px; border-left: 1px solid silver; font-size:35px; line-height: 35px; vertical-align: middle;\">Pick List</div>\r\n <div style=\"margin-top:30px; font-weight:bold; font-size:16px;\">Wave {{wave.id}}</div>\r\n <div style=\"margin-top:10px\">\r\n <table class=\"items\">\r\n <tr style=\"font-size:15px\">\r\n <th>Qty</th>\r\n <th>Size</th>\r\n <th>Colour</th>\r\n <th>Description</th>\r\n <th>Price</th>\r\n <th>Dept</th>\r\n <th>Item Code</th>\r\n <th>SOH</th>\r\n <th></th>\r\n <th></th>\r\n </tr>\r\n {{#items}}\r\n <tr style=\"border-top: 1px solid silver\">\r\n <td><div class=\"qty qty-{{requiredQty}}\">{{requiredQty}}</div></td>\r\n <td style=\"text-align:center\">{{sku.attributes.size}}</td>\r\n <td>{{sku.attributes.colour}}</td>\r\n <td>{{sku.name}}</td>\r\n <td>${{sku.orderPriceWithTax}}</td>\r\n <td>{{sku.category.name}}</td>\r\n <td>{{sku.skuRef}}</td>\r\n <td><div class=\"soh\">{{sku.onHand}}</div></td>\r\n <td class=\"product-image\"><img src=\"{{sku.imageUrlRef}}\" /></td>\r\n <td class=\"product-barcode\">\r\n <div style=\"text-align:center\">\r\n <img class=\"barcode\" style=\"height:100%\" jsbarcode-fontsize=\"15\" jsbarcode-width=\"1\" jsbarcode-height=\"50\" jsbarcode-value=\"{{sku.references.BARCODE}}\"/>\r\n </div>\r\n </td>\r\n </tr>\r\n {{/items}}\r\n </table>\r\n </div>",
5 "type": "LOB"
6 }
7}1{
2 date: <current date>,
3 wave: { id: {{wave id}} }
4 items: [ requiredQty: {{orderItem.requestedQty}}
5 sku: {
6 attributes: {
7 <all attributes in sku will be listed here eg>
8 size: "3",
9 colour: "L"
10 },
11 category: {
12 categoryId: "3",
13 categoryRef: "51", name: "Jumper"
14 }, // first category
15 imageUrlRef: "http://abc/img.jpg",
16 name: "sku1",
17 productRef: "ref",
18 skuRef: "ref2",
19 onHand: 4, // inventory position onHand at the corresponding location
20 orderPrice: 30, //orderItem.price
21 orderPriceWithTax: 31, //orderItem.price + orderItem.taxPrice
22 references: {
23 <all attributes in sku will be listed here eg>
24 "BARCODE": "523452"
25 }
26 }
27
28 ]
29}