Skip to content

Commit 39e991d

Browse files
duncanmccleanduncanmcclean
authored
Packing Slip Improvements (#58)
1 parent 4892f3b commit 39e991d

File tree

2 files changed

+97
-74
lines changed

2 files changed

+97
-74
lines changed

‎resources/views/packing-slip.antlers.html‎

Lines changed: 96 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -5,90 +5,112 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>{{ trans key="Packing Slip for Order #:orderNumber" :orderNumber="order:order_number" }}</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8+
<script>
9+
tailwind.config = {
10+
theme: {
11+
extend: {
12+
fontFamily: {
13+
'inter': ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif']
14+
}
15+
}
16+
}
17+
}
18+
</script>
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
22+
<style>
23+
.items-table {
24+
border-collapse: collapse;
25+
}
26+
.items-table th {
27+
border-top: 2px solid #000;
28+
padding: 10px 8px 5px 8px;
29+
}
30+
.items-table td {
31+
border-bottom: 1px solid #000;
32+
padding: 12px 8px;
33+
}
34+
.items-table tbody tr:last-child td {
35+
border-bottom: 2px solid #000;
36+
}
37+
38+
@media print {
39+
body {
40+
padding: 0 !important;
41+
font-size: 11px !important;
42+
}
43+
.print\\:mt-8 {
44+
margin-top: 30px !important;
45+
}
46+
}
47+
</style>
848
<script>
949
window.addEventListener('load', () => window.print());
1050
</script>
1151
</head>
12-
<body>
13-
<main class="mx-auto flex max-w-4xl flex-col gap-y-10 px-2 py-12">
14-
<header>
15-
<h1 class="mb-3 text-4xl font-bold">{{ trans key="Packing Slip" }}</h1>
16-
<h3 class="text-xl font-semibold text-[#00A63E]">
17-
{{ config:app:name }}
18-
- {{ trans key="Order #:orderNumber" :orderNumber="order:order_number" }}
19-
</h3>
20-
</header>
21-
22-
<div class="grid grid-cols-2">
23-
{{# Billing Address #}}
24-
<div class="py-2">
25-
<h2 class="mb-1 text-lg font-bold text-[#00A63E]">{{ trans key="Bill to:" }}</h2>
26-
<div>
27-
<p>{{ order:customer:name }}</p>
28-
<p>{{ order:billing_line_1 }}</p>
29-
<p>{{ order:billing_line_2 }}</p>
30-
<p>{{ order:billing_city }}</p>
31-
<p>{{ order:billing_state:name }}</p>
32-
<p>{{ order:billing_postcode }}</p>
33-
<p>{{ order:billing_country:label }}</p>
34-
</div>
35-
</div>
52+
<body class="font-inter text-sm leading-relaxed text-black bg-white pt-10 px-5 pb-5 max-w-4xl mx-auto">
53+
<div class="flex justify-between items-start mb-10">
54+
<div class="text-3xl font-semibold">{{ config:app:name }}</div>
55+
<div class="text-right text-base">
56+
<div class="font-semibold mb-1">{{ trans key="Order #:orderNumber" :orderNumber="order:order_number" }}</div>
57+
<div class="text-gray-600">{{ order:date format="F j, Y" }}</div>
58+
</div>
59+
</div>
3660
37-
{{# Shipping Address #}}
38-
<div class="py-2">
39-
<h2 class="mb-1 text-lg font-bold text-[#00A63E]">{{ trans key="Ship to:" }}</h2>
40-
<div>
41-
<p>{{ order:customer:name }}</p>
42-
<p>{{ order:shipping_line_1 }}</p>
43-
<p>{{ order:shipping_line_2 }}</p>
44-
<p>{{ order:shipping_city }}</p>
45-
<p>{{ order:shipping_state:name }}</p>
46-
<p>{{ order:shipping_postcode }}</p>
47-
<p>{{ order:shipping_country:label }}</p>
48-
</div>
61+
<div class="grid grid-cols-2 gap-10 mb-10">
62+
{{# Billing Address #}}
63+
<div>
64+
<h2 class="text-base font-semibold mb-3">{{ trans key="Bill to:" }}</h2>
65+
<div>
66+
<p class="mb-1 text-sm">{{ order:customer:name }}</p>
67+
{{ if order:billing_line_1 }}<p class="mb-1 text-sm">{{ order:billing_line_1 }}</p>{{ /if }}
68+
{{ if order:billing_line_2 }}<p class="mb-1 text-sm">{{ order:billing_line_2 }}</p>{{ /if }}
69+
{{ if order:billing_city }}<p class="mb-1 text-sm">{{ order:billing_city }}</p>{{ /if }}
70+
{{ if order:billing_state:name }}<p class="mb-1 text-sm">{{ order:billing_state:name }}</p>{{ /if }}
71+
{{ if order:billing_postcode }}<p class="mb-1 text-sm">{{ order:billing_postcode }}</p>{{ /if }}
72+
{{ if order:billing_country:label }}<p class="mb-1 text-sm">{{ order:billing_country:label }}</p>{{ /if }}
4973
</div>
5074
</div>
5175
52-
{{# Order Details #}}
53-
<div
54-
class="{{ ['grid-cols-3' => order:shipping_method, 'grid-cols-1' => !order_shipping_method] | classes }} grid divide-x-2 divide-zinc-300 rounded-lg border border-zinc-300"
55-
>
56-
<div class="flex flex-col items-center justify-center space-y-1 px-6 py-4">
57-
<span class="text-sm">{{ trans key="Order Date" }}</span>
58-
<h3 class="text-lg font-bold">{{ order:date format="Y-m-d" }}</h3>
76+
{{# Shipping Address #}}
77+
<div>
78+
<h2 class="text-base font-semibold mb-3">{{ trans key="Ship to:" }}</h2>
79+
<div>
80+
<p class="mb-1 text-sm">{{ order:customer:name }}</p>
81+
{{ if order:shipping_line_1 }}<p class="mb-1 text-sm">{{ order:shipping_line_1 }}</p>{{ /if }}
82+
{{ if order:shipping_line_2 }}<p class="mb-1 text-sm">{{ order:shipping_line_2 }}</p>{{ /if }}
83+
{{ if order:shipping_city }}<p class="mb-1 text-sm">{{ order:shipping_city }}</p>{{ /if }}
84+
{{ if order:shipping_state:name }}<p class="mb-1 text-sm">{{ order:shipping_state:name }}</p>{{ /if }}
85+
{{ if order:shipping_postcode }}<p class="mb-1 text-sm">{{ order:shipping_postcode }}</p>{{ /if }}
86+
{{ if order:shipping_country:label }}<p class="mb-1 text-sm">{{ order:shipping_country:label }}</p>{{ /if }}
5987
</div>
60-
{{ if order:shipping_option }}
61-
<div class="flex flex-col items-center justify-center space-y-1 px-6">
62-
<span class="text-sm">{{ trans key="Shipping Option" }}</span>
63-
<h3 class="text-lg font-bold">{{ order:shipping_option:name }}</h3>
64-
</div>
65-
66-
<div class="flex flex-col items-center justify-center space-y-1 px-6">
67-
<span class="text-sm">{{ trans key="Shipping Cost" }}</span>
68-
<h3 class="text-lg font-bold">{{ order:shipping_total }}</h3>
69-
</div>
70-
{{ /if }}
7188
</div>
89+
</div>
90+
91+
{{# Line Items #}}
92+
<table class="items-table w-full mb-10">
93+
<thead>
94+
<tr>
95+
<th class="text-left font-semibold text-base">{{ trans key="Item" }}</th>
96+
<th class="text-right font-semibold text-base w-20">{{ trans key="Quantity" }}</th>
97+
</tr>
98+
</thead>
99+
<tbody>
100+
{{ order:line_items }}
101+
{{ if product:type !== 'digital' }}
102+
<tr>
103+
<td class="text-sm">{{ product:title }}</td>
104+
<td class="text-sm text-right w-20">{{ quantity }}</td>
105+
</tr>
106+
{{ /if }}
107+
{{ /order:line_items }}
108+
</tbody>
109+
</table>
72110
73-
{{# Line Items #}}
74-
<table class="w-full rounded-t-lg border border-zinc-300">
75-
<thead class="border-b border-zinc-300 text-lg font-bold">
76-
<tr class="divide-x divide-zinc-300">
77-
<th class="w-[10%] px-3 py-3 text-center text-sm">{{ trans key="Qty" }}</th>
78-
<th class="px-3 py-3 text-left text-sm">{{ trans key="Description" }}</th>
79-
</tr>
80-
</thead>
81-
<tbody class="divide-y divide-zinc-300">
82-
{{ order:line_items }}
83-
{{ if product:type !== 'digital' }}
84-
<tr class="divide-x divide-zinc-300">
85-
<td class="px-3 py-3 text-center">{{ quantity }}</td>
86-
<td class="px-3 py-3">{{ product:title }}</td>
87-
</tr>
88-
{{ /if }}
89-
{{ /order:line_items }}
90-
</tbody>
91-
</table>
92-
</main>
111+
<div class="text-center mt-10 print:mt-8">
112+
<div class="text-base font-medium text-black mb-1">Thanks for shopping with us!</div>
113+
<div class="text-sm text-black">{{ order:site:permalink | parse_url('host') }}</div>
114+
</div>
93115
</body>
94116
</html>

‎src/Orders/AugmentedOrder.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ private function commonKeys(): array
4444
'has_physical_products',
4545
'has_digital_products',
4646
'downloads',
47+
'site',
4748
];
4849
}
4950

0 commit comments

Comments
 (0)