Guide - Customise a Pick List
How-to Guide
Author:
Fluent Commerce
Changed on:
13 Dec 2023
Key Points
- How to customise a Pick List
Steps
How to customise a Pick List
The customisation of pick and pack list is driven by the PICK_N_PACK_CUSTOM_PICK_LIST setting which has an HTML snippet.
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>Language: html
Name: Click to expand the Pick & Pack HTML
Description:
[Warning: empty required content area]NOTE: When creating the PICK_N_PACK_CUSTOM_PICK_LIST setting ensure that all apostrophes are escaped to be JSON conform and are in a single line. The DEFAULT_INVENTORY_CATALOGUE setting is required to define the product catalogue reference. However, it has been noticed that PICK_N_PACK_CUSTOM_PICK_LIST setting works without it when the GLOBAL_INVENTORY_ENABLED setting is set.
Create PICK_N_PACK_CUSTOM_PICK_LIST setting via REST:
PUT {{fluentApiHost}}/api/v4.1/settings/retailer/{{retailer_id}}/PICK_N_PACK_CUSTOM_PICK_LIST
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}Language: json
Name: Click to expand the PICK_N_PACK_CUSTOM_PICK_LIST Payload code
Description:
[Warning: empty required content area]The following fields are available in the custom HTML:
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}Language: json
Name: custom HTML
Description:
[Warning: empty required content area]
