Fluent Commerce Logo
Docs
Sign In

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

Step arrow right iconHow 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]
Fluent Commerce

Fluent Commerce

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.

Fluent Logo