Configure Printable Pack Slips
How-to Guide
Author:
Yulia Andreyanova
Changed on:
20 Sept 2024
Key Points
- The Pack Slips can be customized using an HTML template.
- This guide outlines the setup and fragment modifications required for generated PDF customization.
Prerequisites
Steps
Define the HTML Structure
Start by defining the basic HTML structure for your document. A base template is available for you to work with, which can be customized using your preferred HTML editor to match your specific layout requirements.
1<!DOCTYPE >
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>
7 Pack Slip - {{#if (eq fulfilmentById.order.type 'HD')}} Home Delivery
8 {{else}} {{#if (eq fulfilmentById.order.type 'CC')}} Click & Collect
9 {{else}} {{fulfilmentById.order.type}} {{/if}} {{/if}}
10 </title>
11 <style type="text/css">
12 * {
13 margin: 0;
14 padding: 0;
15 text-indent: 0;
16 }
17 body {
18 font-family: "Lato", sans-serif;
19 }
20 hr {
21 border-top: 1px solid black;
22 }
23 h1 {
24 font-size: 24px;
25 }
26 h2 {
27 font-size: 20px;
28 }
29 body {
30 font-size: 16px;
31 }
32 .t2 {
33 font-size: 12px;
34 }
35 h1,
36 .t1 th,
37 .section-title {
38 font-weight: 700;
39 }
40 h2 {
41 font-weight: 500;
42 }
43 body {
44 font-weight: 400;
45 }
46 h1 {
47 line-height: 28.8px;
48 }
49 .t1 th {
50 line-height: 26px;
51 }
52 h2 {
53 line-height: 24px;
54 }
55 span.deliver-to {
56 line-height: 19.2px;
57 }
58 h2 {
59 margin-top: 10px;
60 margin-bottom: 29px;
61 }
62 p.deliver-to,
63 .t1,
64 .section-title-row {
65 margin-top: 24px;
66 }
67 span.deliver-to {
68 margin-bottom: 16px;
69 }
70 span.deliver-to:last-of-type {
71 margin-bottom: 24px;
72 }
73 .section-title-row {
74 padding: 7px 16px 6px 16px;
75 }
76 body {
77 padding: 35px 44px 35px 44px;
78 }
79 .t1 th {
80 padding-bottom: 16px;
81 }
82 .t1 td {
83 padding-bottom: 8px;
84 }
85 .t2 th,
86 .t2 td {
87 padding-top: 9px;
88 padding-bottom: 9px;
89 }
90 .t2 th:first-child,
91 .t2 td:first-child {
92 padding-left: 16px;
93 }
94 .t2 th:last-child,
95 .t2 td:last-child {
96 padding-right: 20px;
97 }
98 .t1,
99 .t2 {
100 width: 100%;
101 border-collapse: collapse;
102 text-align: left;
103 }
104 .section-title-row {
105 background-color: #d7d8d9;
106 }
107 span.deliver-to {
108 display: block;
109 }
110 .t2 tr {
111 border-bottom: 1px solid #000;
112 }
113 .t2 th:last-child,
114 .t2 td:last-child {
115 text-align: right;
116 }
117 .section-title {
118 text-transform: uppercase;
119 }
120 @media print {
121 #pagebreak {
122 float: none;
123 break-after: page;
124 }
125 }
126 </style>
127 </head>
128 <body>
129 {{#each fulfilmentById.articles.edges}}
130 <h1>Pack Slip</h1>
131 <h2>
132 {{#if (eq ../fulfilmentById.order.type 'HD')}} Home Delivery {{else}}{{#if
133 (eq ../fulfilmentById.order.type 'CC')}}Click & Collect {{else}}
134 {{../fulfilmentById.order.type}} {{/if}} {{/if}}
135 </h2>
136 <hr />
137 <p class="deliver-to">
138 <span class="deliver-to">
139 {{../fulfilmentById.order.customer.firstName}}
140 {{../fulfilmentById.order.customer.lastName}}
141 </span>
142 <span class="deliver-to"
143 >{{../fulfilmentById.order.customer.primaryEmail}}</span
144 >
145 <span class="deliver-to"
146 >{{../fulfilmentById.order.customer.primaryPhone}}</span
147 >
148 <span class="deliver-to">
149 {{../fulfilmentById.toAddress.street}}
150 {{../fulfilmentById.toAddress.street2}}<br />
151 {{../fulfilmentById.toAddress.city}}
152 {{../fulfilmentById.toAddress.state}}
153 {{../fulfilmentById.toAddress.postcode}}<br />
154 {{../fulfilmentById.toAddress.country}}<br />
155 </span>
156 </p>
157 <hr />
158 <table cellspacing="0" class="t1">
159 <thead>
160 <tr>
161 <th>Order Ref</th>
162 <th>Fulfilment Id</th>
163 <th>Parcel</th>
164 <th>Fulfilment Type</th>
165 </tr>
166 </thead>
167 <tbody>
168 <tr>
169 <td>{{../fulfilmentById.order.ref}}</td>
170 <td>{{../fulfilmentById.id}}</td>
171 <td>
172 {{add @index 1}} of {{../fulfilmentById.articles.edges.length}}
173 </td>
174 <td>{{../fulfilmentById.type}}</td>
175 </tr>
176 </tbody>
177 </table>
178 <section>
179 <div class="section-title-row">
180 <span class="section-title">parcel</span>
181 <span> - ({{uppercase node.name}}, {{node.weight}} KG) </span>
182 </div>
183 <table cellspacing="0" class="t2">
184 <thead>
185 <tr>
186 <th>Product Description</th>
187 <th>Unit Price</th>
188 <th>Quantity</th>
189 </tr>
190 </thead>
191 <tbody>
192 {{#each node.items.edges}}
193 <tr>
194 <td>
195 {{node.orderItem.product.ref}}, {{node.orderItem.product.name}}
196 </td>
197 <td>{{currency node.orderItem.price node.orderItem.currency}}</td>
198 <td>{{node.quantity}}</td>
199 </tr>
200 {{/each}}
201 </tbody>
202 </table>
203 </section>
204 <section>
205 <div class="section-title-row">
206 <span class="section-title"> return information </span>
207 </div>
208 <table cellspacing="0" class="t2">
209 <tr>
210 <th></th>
211 </tr>
212 </table>
213 </section>
214 <section id="pagebreak">
215 <div class="section-title-row">
216 <span class="section-title"> contact us </span>
217 </div>
218 <table cellspacing="0" class="t2">
219 <thead>
220 <tr>
221 <th>Phone: {{../fulfilmentById.order.retailer.supportPhone}}</th>
222 <th>Email: {{../fulfilmentById.order.retailer.supportEmail}}</th>
223 </tr>
224 </thead>
225 </table>
226 </section>
227 {{/each}}
228 </body>
229</html>Language: plain_text
Name: HTML example
Description:
HTML example
Configure the Page Query in the Pack Fragment.
To populate the Pack Slip with the necessary details, you need to define the required fields within the page query of the pack fragment. Here's an example:
1query fulfilmentById($id: ID!) {
2 fulfilmentById(id: $id) {
3 id
4 type
5 order {
6 customer {
7 firstName
8 lastName
9 primaryEmail
10 primaryPhone
11 }
12 retailer {
13 supportPhone
14 supportEmail
15 }
16 type
17 ref
18 }
19 toAddress {
20 street
21 street2
22 city
23 state
24 postcode
25 country
26 }
27 articles {
28 edges {
29 node {
30 name
31 weight
32 items {
33 edges {
34 node {
35 quantity
36 orderItem {
37 price
38 currency
39 product {
40 ... on StandardProduct {
41 ref
42 name
43 }
44 ... on VariantProduct {
45 ref
46 name
47 }
48 ... on GroupProduct {
49 ref
50 name
51 }
52 }
53 }
54 }
55 }
56 }
57 }
58 }
59 }
60 }
61}Language: plain_text
Name: The sample configured page query is as follows:
Description:
[Warning: empty required content area]Add the Page Break Property
To divide the content into separate pages when printing, apply the
`break-after`1@media print {
2#pagebreak {
3 float:none;
4 break-after: page; }
5}Language: plain_text
Name: For example:
Description:
[Warning: empty required content area]This ensures that the content breaks correctly across pages when printed.
Add the Supported Fields
When iterating over an array, you can use the following notation to loop through the data:
1{{#each <field>}}
2 ... iteration happens here...
3{{/each}}Language: plain_text
Name: handlebars
Description:
[Warning: empty required content area]Here’s an example of how to switch context when accessing different data levels:
1<body>
2 {{#each fulfilmentById.articles.edges}}
3 <div class="section-title-row">
4 <span class="section-title">parcel</span>
5 <span> - ({{uppercase node.name}}, {{node.weight}} KG) </span>
6 </div>
7 ...
8 <span class="deliver-to">
9 {{../fulfilmentById.toAddress.street}} <!-- if we need to display information from another part of data tree - we can switch the level with "../" notaion -->
10 {{../fulfilmentById.toAddress.street2}}<br /> <!-- here we are swithcing from fulfilmentById.articles to fulfilmentById.toAddress with ../ -->
11 {{../fulfilmentById.toAddress.city}}
12 {{../fulfilmentById.toAddress.state}}
13 {{../fulfilmentById.toAddress.postcode}}<br />
14 {{../fulfilmentById.toAddress.country}}<br />
15 </span>
16 ...
17 {{/each}}
18</body>Language: plain_text
Name: Example:
Description:
[Warning: empty required content area]Create a Setting 'fc.store.summary.print.pack.slip'
Define the setting for storing your HTML template. Here's how you can do it:
Name | fc.store.summary.print.pack.slip |
Value type | |
LOB value | |
Context | |
Context ID | |
This configuration sets up the template for later use.
