Create a Custom Printable Pack Slip

How-to Guide

Author:

Fluent Commerce

Changed on:

28 Sept 2023

Key Points

The Pack Slip on Fluent Store can be customised via an HTML template.
This guide will take you through the setup and fragment changes required to customise the Pack Slip.

Steps

Overview

To aid with the packing process, Users can print a pack slip which details the items required to complete the fulfilments. Customisable via a setting, the custom pack slip allows for developers to define their own fields and layouts to create a more efficient packing process.

Enabling the Custom Pack Slip

This Custom Pack Slip setting can only be enabled if the

`WAVE_RUBIXIFIED`

setting is set to true. For more information, see Retailer Settings, then make sure the role has GraphQL Permissions.

Step 1: Define the HTML structure

There is a base template to get started with. Please use your preferred HTML editor to edit the fields and layout to your desired outcome.

1<head>
2<link rel="preconnect" href="https://fonts.googleapis.com">
3<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
4<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap" rel="stylesheet">
5</head>
6<style>
7.CustomLabel .items th{
8padding: 0 3px 2px 3px;
9text-align:left;
10vertical-align:bottom;
11}
12.CustomLabel .items td{
13padding: 5px 4px;
14font-size: 12px;
15width: 32px;
16}
17.CustomLabel .items div.qty{
18text-align: center;
19border-radius: 50%;
20font-size: 16px;
21font-weight: bold;
22border: 1px solid black;
23width: 26px;
24height: 26px;
25line-height: 24px;
26}
27.CustomLabel .items div.qty.qty-1 {
28text-align: center;
29font-size: 16px;
30padding: 0;
31font-size: inherit;
32font-weight: normal;
33border: 0;
34}
35.CustomLabel .items td.product-image {
36width: 80px
37}
38.items {
39margin-left: auto;
40margin-right: auto;
41}
42address {
43    font-size: medium;
44    margin-left: auto;
45}
46@media print {
47#pagebreak {
48    float:none;
49    break-after: page; }
50}
51img {
52display: block;
53margin-left: auto;
54margin-right: auto;
55}
56table,td,th {
57border: 1px solid black;
58border-collapse: collapse;
59}
60</style>
61<div style="text-align:center; font-size:20px; font-weight:bold">Custom Pack List - Wave: {{waveById.id}}</div>
62<div style="margin-top:50px">
63{{#each waveById.fulfilments.edges}}
64<div id="pagebreak">
65<div style="margin-top:35px"></div>
66<img 
67        id='qrcode'
68        src="https://api.qrserver.com/v1/create-qr-code/?data=https://www.nike.com/au/&amp;size=100x100"
69        alt=""
70        title="Nike"
71        width="50"
72        height="50" 
73        />
74<div style="margin-top:20px"> </div>
75<address>
76    <p><b>Customer Name:</b> {{node.order.customer.firstName}} {{node.order.customer.lastName}}</p>
77    <p><b>Customer Email:</b> {{node.order.customer.primaryEmail}}</p>
78</address>
79<div style="text-align:center; font-size:15px; font-weight:bold">Order {{node.order.ref}} Packing Slip
80    <div style="margin-top:15px"> </div>
81<table class="items">
82    <tr style="font-size:15px">
83    <th>Item Code</th>
84    <th>Name</th>
85    <th>Quantity</th>
86    <th>Total Price</th>
87    </tr>
88    {{#each node.items.edges}}
89    <tr style="border-top: 1px solid silver">
90        <td style="width: 25%;">{{node.ref}}</td>
91        <td style="width: 25%;">{{node.orderItem.product.name}}</td>
92        <td style="width: 25%;">{{node.orderItem.quantity}}</td>
93        <td style="width: 25%;">{{node.orderItem.currency}} {{node.orderItem.price}}</td>
94    </tr>
95    {{/each}}
96    </table>
97</div>
98</div>
99{{/each}}

Language: json

Name: HTML Example

Description:

[Warning: empty required content area]

Step 2: Configure the page query in the Waves fragment

Add the required fields in the page query of the waves fragment to populate the details on the custom pack slip.

The sample configured page query is as follows:

1query ($id: ID!) {waveById(id: $id) { id ref status location { id ref } fulfilments { edges { node { id ref status fromAddress { id ref } toAddress { id ref } items { edges { node { ref orderItem { product { name summary } quantity price currency attributes { name type value }}}}} order { id ref type status fulfilmentChoice { deliveryType } customer { firstName lastName primaryEmail primaryPhone }} articles { edges { node { ref consignmentArticles(first: 1) { edges {node { consignment { id ref carrier { name } trackingLabel status updatedOn}}}}}}}}}}}}

Language: json

Name: The sample configured page query is as follows:

Description:

[Warning: empty required content area]

Step 3: Add the page break property

To break the content into different pages,

`break-after`

property is used in the CSS.

For example:

1@media print {
2#pagebreak {
3    float:none;
4    break-after: page; }
5}

Language: json

Name: For example:

Description:

[Warning: empty required content area]

Step 4: Add the supported fields

To iterate over the array the following notation is used

`{{#each <field>}} ... iteration happens here... {{/each}}`

For example:

1<table class="items">
2   <tr style="font-size:15px">
3      <th>Item Code</th>
4      <th>Name</th>
5      <th>Quantity</th>
6      <th>Total Price</th>
7    </tr>
8   {{#each node.items.edges}}
9    <tr style="border-top: 1px solid silver">
10        <td style="width: 25%;">{{node.ref}}</td>
11        <td style="width: 25%;">{{node.orderItem.product.name}}</td>
12        <td style="width: 25%;">{{node.orderItem.quantity}}</td>
13        <td style="width: 25%;">{{node.orderItem.currency}} {{node.orderItem.price}}</td>
14       </tr>
15       {{/each}}
16</table>

Language: json

Name: For example:

Description:

[Warning: empty required content area]

Step 5: Adding a QR Code

The base template has made inclusions for adding a QR code out of the box that is useful for the customer to view other products from the same retailer.

The following code generates a QR code with the

`src`

pointing to

`https://www.nike.com/au/`

and the title is “Nike”.

1<img class="center"
2     id='qrcode'
3          src="https://api.qrserver.com/v1/create-qr-code/?data=https://www.nike.com/au/&amp;size=100x100"
4          alt=""
5          title="Nike"
6          width="50"
7          height="50" />

Language: json

Name: code generates a QR code

Description:

[Warning: empty required content area]

Note

Change

`src`

and

`title`

to the value you want to show on the QR code.

Step 6: Create a setting fc.store.print.packslip

Name	fc.store.print.packslip
Value type	`LOB`
LOB value	`<..The HTML template, from Step 1..>`
Context	`RETAILER -or- ACCOUNT`
Context ID	`<RetailerID> -or- 0`

Step 7: Configure the Waves fragment to include the “Custom Pack Slip“ button

If the Waves fragment has not been configured previously then you will first need to get the content of the baseline waves fragment. Otherwise, if you have already configured the waves fragment on your account, then get the content from your account settings instead.

Once you have accessed the baseline waves fragment, copy the content into your preferred text editor.

Define the following component to the second step of the wizard (PACK stage), just below the component

`fc.button.print.download`

1{
2    "component": "fc.button.print",
3    "props": {
4        "label": "i18n:fc.sf.ui.waves.detail.action.packslip.custom.label",
5        "setting": "fc.store.print.packslip",
6        "behavior":"print"
7    }
8}

Language: json

Name: Code sample

Description:

[Warning: empty required content area]

Make sure the JSON is validated.

Note

behavior property can take one of the three values:

```
`print`
```
: Opens the browser's print preview
```
`preview`
```
: Opens the modal preview with the print button that triggers the browser's print action
```
`newTab`
```
: Opens the HTML document in a new tab of the browser

Step 8: Update the Waves fragment setting on your account with your new file

Once you have successfully updated the waves fragment with the Custom Pack Slip button, now create/ update the waves fragment setting on your account. Manifest documents should be stored as a JSON Setting at the Account context.

You can now log on to Fluent Store with your location username and password. Select a Wave in the status "PACK" or Create a new Wave. You should then be able to see the “Custom Pack Slip” button on the PACK step of the Wave.