Packing Slip - Include Total Number of Items?

[BitsyBon]

I'm sure I'm missing something simple but near the top of the Packing Slip we'd like to include the total number of items in the order, so our packers get all items into the package, especially if the slip is more than 1 page, goes missing, etc. Any suggestions appreciated. {{ item_count }} does not seem to work. Thank you

Our template:

<div class="wrapper">
<div class="header">
<div class="shop-title">
<img src="https://cdn.shopify.com/s/files/1/0260/1461/3590/files/BitsyBon_HR_1.png?v=1569942404" style="width: 150px; height: 150px;">
</div>
<div class="order-title">
<p class="text-align-right" style="font-size:30px">
Order {{ order.name }}
</p>
<p class="text-align-right">
{{ order.created_at | date: "%B %e, %Y" }}
</p>
</div>
</div>
<div class="customer-addresses">
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
Ship to
</p>
<p class="address-detail">
{% if shipping_address != blank %}
{{ shipping_address.name }}
{% if shipping_address.company != blank %}
<br>
{{ shipping_address.company }}
{% endif %}
<br>
{{ shipping_address.address1 }}
{% if shipping_address.address2 != blank %}
<br>
{{ shipping_address.address2 }}
{% endif %}
{% if shipping_address.city_province_zip != blank %}
<br>
{{ shipping_address.city_province_zip }}
{% endif %}
<br>
{{ shipping_address.country }}
{% else %}
No shipping address
{% endif %}
</p>
</div>
<div class="billing-address">
<p class="subtitle-bold to-uppercase">
Bill to
</p>
<p class="address-detail">
{% if billing_address != blank %}
{{ billing_address.name }}
{% if billing_address.company != blank %}
<br>
{{ billing_address.company }}
{% endif %}
<br>
{{ billing_address.address1 }}
{% if billing_address.address2 != blank %}
<br>
{{ billing_address.address2 }}
{% endif %}
{% if billing_address.city_province_zip != blank %}
<br>
{{ billing_address.city_province_zip }}
{% endif %}
<br>
{{ billing_address.country }}
{% else %}
No billing address
{% endif %}
</p>
</div>
</div>
<hr>
<div class="order-container">
<div class="order-container-header">
<div class="order-container-header-left-content">
<p class="subtitle-bold to-uppercase">
Items
</p>
</div>
<div class="order-container-header-right-content">
<p class="subtitle-bold to-uppercase">
Quantity
</p>
</div>
</div>

{% comment %}
To adjust the size of line item images, change desired_image_size.
The other variables make sure your images print at high quality.
{% endcomment %}
{% assign desired_image_size = 58 %}
{% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}
{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
{% endcapture %}

{% for line_item in line_items_in_shipment %}
<div class="flex-line-item">
<div class="flex-line-item-img">
{% if line_item.image != blank %}
<div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
</div>
{% endif %}
</div>
<div class="flex-line-item-description">
<p>
<span class="line-item-description-line">
{{ line_item.title }}
</span>
{% if line_item.variant_title != blank %}
<span class="line-item-description-line">
{{ line_item.variant_title }}
</span>
{% endif %}
{% if line_item.sku != blank %}
<span class="line-item-description-line">
{{ line_item.sku }}
</span>
{% endif %}
{% for p in line_item.properties %}
{% assign hidden_property = p.first | first | replace: '_', true %}
{% unless p.last == blank %}
{% if hidden_property == 'true' %}
{% else %}
{{ p.first }}:
{% if p.last contains '/uploads/' or p.last contains '/assets/' or p.last contains '/products/' %}<img style="width:50px;height:auto" src="{{ p.last }}"/>{% else %}{{ p.last | newline_to_br }}
{% endif %}
<br>
{% endif %}
{% endunless %}
{% endfor %}

</p>
</div>
<div class="flex-line-item-quantity">
<p class="text-align-right">
{{ line_item.shipping_quantity }} of {{ line_item.quantity }}
</p>
</div>
</div>
{% endfor %}
</div>
{% unless includes_all_line_items_in_order %}
<hr class="subdued-separator">
<p class="missing-line-items-text ">
There are other items from your order not included in this shipment.
</p>
{% endunless %}
<hr>
{% if order.note != blank %}
<div class="notes">
<p class="subtitle-bold to-uppercase">
Notes
</p>
<p class="notes-details">
{{ order.note }}
</p>
</div>
{% endif %}
<div class="footer">
<p>
Thank you for shopping with us!
</p>
<p>
<strong>
{{ shop.name }}
</strong>
<br>
{{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
<br>
{{ shop.email }}
<br>
{{ shop.domain }}
</p>
</div>
</div>
<style type="text/css">
body {
font-size: 15px;
}

* {
box-sizing: border-box;
}

.wrapper {
width: 831px;
margin: auto;
padding: 4em;
font-family: "Noto Sans", sans-serif;
font-weight: 250;
}

.header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
}

.header p {
margin: 0;
}

.shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 1.9em;
}

.order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}

.customer-addresses {
width: 100%;
display: inline-block;
margin: 2em 0;
}

.address-detail {
margin: 0.7em 0 0;
line-height: 1.5;
}

.subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 0.85em;
}

.to-uppercase {
text-transform: uppercase;
}

.text-align-right {
text-align: right;
}

.shipping-address {
float: left;
min-width: 18em;
max-width: 50%;
}

.billing-address {
padding-left: 20em;
min-width: 18em;
}

.order-container {
padding: 0 0.7em;
}

.order-container-header {
display: inline-block;
width: 100%;
margin-top: 1.4em;
}

.order-container-header-left-content {
float: left;
}

.order-container-header-right-content {
float: right;
}

.flex-line-item {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 1.4em 0;
page-break-inside: avoid;
}

.flex-line-item-img {
margin-right: 1.4em;
min-width: {{ desired_image_size }}px;
}

.flex-line-item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}

.line-item-description-line {
display: block;
}

.flex-line-item-description p {
margin: 0;
line-height: 1.5;
}

.flex-line-item-quantity {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}

.subdued-separator {
height: 0.07em;
border: none;
color: lightgray;
background-color: lightgray;
margin: 0;
}

.missing-line-items-text {
margin: 1.4em 0;
padding: 0 0.7em;
}

.notes {
margin-top: 2em;
}

.notes p {
margin-bottom: 0;
}

.notes .notes-details {
margin-top: 0.7em;
}

.footer {
margin-top: 2em;
text-align: center;
line-height: 1.5;
}

.footer p {
margin: 0;
margin-bottom: 1.4em;
}

hr {
height: 0.14em;
border: none;
color: black;
background-color: black;
margin: 0;
}

.aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}

.aspect-ratio::before {
z-index: 1;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(195,207,216,0.3);
}

.aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}

.aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>

[adametmila]

Surprised you did received an answer! I'm looking for the same thing, would be really helpful for the extra staff coming in for the Christmas rush.

Did you found a way? 

[MargueriteJZest]

I'm also looking for a solution. The Packing Slip Variable Reference List doesn't list anything that looks like it would do this.

[lcretail]

I know I'm late to the thread, but for future people looking into this -

{{order.item_count}} worked for me! 

[Brianr1]

Yes that worked for me too.

{{order.item_count}} 

The only thing I haven't figured out is what to do with orders that have been edited( removed items). It still shows the total including removed items.   Not a big deal, but if someone has a solution I'd love to hear it

[arrowmarketing]

I was able to use some liquid math to get the final number of items ordered. Our packing slips also displays the shipping quantity, as we do have to do partial fulfillments, so I was able to add a line to show that total also. 

It is important to note that when I added the assign count lines within the existing line item output, it would not let me display their count outputs higher up on the packing slip where my order details were so I inserted this whole block into the order details where I wanted it to show.

{% assign total_shipping_quantity = 0 %}
{% assign total_ordered_quantity = 0 %}
{% for line_item in line_items_in_shipment %}
{% assign total_shipping_quantity = total_shipping_quantity | plus: line_item.shipping_quantity %}
{% assign total_ordered_quantity = total_ordered_quantity | plus: line_item.quantity %}
{% endfor %}
Total items included {{ total_shipping_quantity }} of {{ total_ordered_quantity }}

[Brianr1]

That's interesting, thanks! So then if the order had 3 items originally, and 1 was deleted, it would show ( 2 of 3) on the packing slip?

[arrowmarketing]

It would actually result in "2 of 2". The second number in the method I suggested captures the total item count AFTER any edits such as adding or removing of products. Whereas I found that the original suggestion that a few of the other users above of {{order.item_count}}  would output "2 of 3", because it was still including products in the count even after they were removed.