Combining Orders in Order Printer
I have a rare plants business and for every order, I need to plant custom plant tags. I use tags that come on A4 size paper with 8 tags per page (1in wide and 11 inches long). I have been able to create a custom template that formats each tag but I have two key issues that I want to fix:
- When multiple of one plant is ordered, I only need to print ONE tag (it says on the tag the quantity purchased, so I only need to print one label per type of plant purchased)
- For orders that include less than 8 plants (which is a lot of our orders) we waste a lot of expensive tags because my current code does not combine orders when selecting multiple to print. Can someone please help me in writing additional code that combines the orders, maxing out each page at 8 tags? For example, if I select two orders to print, Order #1 includes 3 types of plants and Order #2 includes five types of plants, I would only need to use ONE sheet of tag paper for a total of 8 tags printed.
See below for my current code. I have also attached a picture of what the final output looks like (here I ripped off the two excess, wasted tags from the page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Order Tags</title>
<style>
@Page {
size: 8.5in 11in;
margin: 0.25in; /* Adjust margin to fit all tags */
}
body {
font-family: Arial, sans-serif;
font-size: 18px;
margin: 0;
padding: 0;
}
.tag {
width: 1in;
height: 10in;
border: 0px solid black;
display: inline-block;
box-sizing: border-box;
margin-right: 0in;
vertical-align: top;
overflow: hidden;
}
.tag-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end; /* Right align the content */
height: 100%;
text-align: right; /* Right align the text */
writing-mode: vertical-rl;
transform: rotate(180deg);
padding-right: 0.1in; /* Add some padding to ensure the text doesn't touch the border */
margin-top: 0.5in;
}
.line1 {
font-size: 18px;
font-weight: bold;
}
.line2 {
font-size: 16px;
margin-top: 0.2in;
}
.line3 {
font-size: 16px;
margin-top: 0.2in;
}
@media print {
body {
display: flex;
flex-wrap: wrap;
}
.tag {
margin-bottom: 0.4in;
}
}
</style>
</head>
<body>
{%- for line_item in order.line_items -%}
{%- for i in (1..line_item.quantity) -%}
<div class="tag">
<div class="tag-content">
<div class="line1">Woodlanders</div>
<div class="line2">Order {{ order.name }} - {{ order.customer.first_name }} {{ order.customer.last_name }}</div>
<div class="line3">
{{ line_item.title }} | {{ line_item.sku }} | Qty: {{ line_item.quantity }} | Location: {{ line_item.product.metafields.custom.greenhouse_location }}
</div>
</div>
</div>
{%- endfor -%}
{%- endfor -%}
</body>
</html>
