Docs
Author:
Fluent Commerce staff
Changed on:
13 Dec 2023
How to customise a Pick ListThe 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]
Copyright © 2024 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
