Guide - Customise a Pick List

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}