-
-
Save basilkhan05/3cfd26ba4d58e8c1f88517d94f2f6509 to your computer and use it in GitHub Desktop.
Simple Bundles: Indented bundles items in Order printer pro packing slip template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- PACKING SLIP --> | |
<!-- Document Settings --> | |
{% assign SETTING_shop_logo = "" %} <!-- Add URL to uploaded logo image. See: http://help.forsbergplustwo.com/en/articles/2907646 --> | |
{% assign SETTING_shop_logo_width = 240 %} <!-- Adjusts size of logo --> | |
{% assign SETTING_date_format = "%b %e, %Y" %} <!-- Adjusts date format used, see: https://shopify.github.io/liquid/filters/date/ --> | |
{% assign SETTING_show_product_images = true %} <!-- Display product images? (true/false) --> | |
{% assign SETTING_product_image_size = 58 %} <!-- Adjusts size of product images --> | |
{% assign SETTING_show_cart_attributes = false %} <!-- Display custom information collected during checkout? (true/false) - Example: Pickup/Delivery date & time. See: http://help.forsbergplustwo.com/en/articles/3825760 --> | |
{% assign SETTING_show_order_number_barcode = true %} <!-- Display a barcode of the order number? (true/false) --> | |
{% assign SETTING_show_product_barcodes = false %} <!-- Display a barcode of the product variant? (true/false) --> | |
{% assign SETTING_use_latest_fulfillment = false %} <!-- Display only items from the latest fulfillment? (true/false) - Useful for partial fulfillments where you fulfill first, then print documents --> | |
<!-- Shop info --> | |
{% assign shop_name_text = "" %} <!-- Overwrite the default shop name shown. Leave blank to use default from Shopify --> | |
{% assign shop_address_text = "" %} <!-- Overwrite the default shop address shown. Leave blank to use default from Shopify --> | |
{% assign shop_tax_number_text = "" %} <!-- Display your shop tax or VAT number. Example "VAT No. DK12345" --> | |
<!-- | |
TRANSLATE TEXT / CHANGE WORDING | |
You can translate or change wording in the document by updating | |
the words below. Only change the words between the quotes "". | |
See: http://help.forsbergplustwo.com/en/articles/5137649 | |
--> | |
{% assign TEXT_order = "Order" %} | |
{% assign TEXT_shipping_address = "Shipping address" %} | |
{% assign TEXT_customer = "Customer" %} | |
{% assign TEXT_tel = "Tel." %} | |
{% assign TEXT_no_customer_information = "No customer information" %} | |
{% assign TEXT_payment_method = "Payment method" %} | |
{% assign TEXT_shipping_method = "Shipping method" %} | |
{% assign TEXT_pickup_date_and_time = "Pickup on" %} | |
{% assign TEXT_pickup_location = "Pickup location" %} | |
{% assign TEXT_delivery_date_and_time = "Delivery on" %} | |
{% assign TEXT_items = "Items" %} | |
{% assign TEXT_qty = "Qty" %} | |
{% assign TEXT_sku = "SKU: " %} | |
{% assign TEXT_qty_of = "of" %} | |
{% assign TEXT_no_items_fulfilled = "No items have been fulfilled for this order" %} | |
{% assign TEXT_notes = "Notes" %} | |
{% assign TEXT_thanks = "Thank you for shopping with us!" %} | |
<!-- BEGIN: Latest fulfilled items snippet --> | |
{% if SETTING_use_latest_fulfillment == true %} | |
{% assign name = latest_fulfillment.name %} | |
{% assign created_at = latest_fulfillment.created_at %} | |
{% assign line_items = latest_fulfillment.line_items %} | |
{% endif %} | |
<!-- END: Latest fulfilled items snippet --> | |
<!-- BEGIN: Barcode snippet --> | |
{% if SETTING_show_product_barcodes == true or SETTING_show_order_number_barcode == true %} | |
{% include "barcodes" %} | |
{% endif %} | |
<!-- END: Barcode snippet --> | |
<div class="template-311966"> | |
<div class="header"> | |
<div class="shop-title to-uppercase"> | |
{% if SETTING_shop_logo != blank %} | |
{{ SETTING_shop_logo | img_tag: '', 'shop-logo'}} | |
{% else %} | |
{{ shop.name }} | |
{% endif %} | |
</div> | |
<div class="order-title text-align-right"> | |
<p> | |
{% if SETTING_show_order_number_barcode == true %} | |
<img class="barcode" data-barcode="{{ name }}"/><br> | |
{% endif %} | |
{{ TEXT_order }} {{ name }} | |
</p> | |
<p> | |
{{ created_at | date: SETTING_date_format }} | |
</p> | |
</div> | |
</div> | |
<div class="customer-addresses"> | |
<div class="shipping-address"> | |
<p class="subtitle-bold to-uppercase"> | |
{{ TEXT_shipping_address }} | |
</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 }} | |
{% if shipping_address.phone != blank %} | |
<br> | |
{{ TEXT_tel }} {{ shipping_address.phone }} | |
{% endif %} | |
{% endif %} | |
</p> | |
</div> | |
<div class="billing-address"> | |
<p class="subtitle-bold to-uppercase"> | |
{{ TEXT_customer }} | |
</p> | |
<p class="address-detail"> | |
{% assign billing_address = billing_address | default: customer.default_address %} | |
{% 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 }} | |
{% if billing_address.phone != blank %} | |
<br> | |
{{ TEXT_tel }} {{ billing_address.phone }} | |
{% endif %} | |
{% elsif customer != blank %} | |
{{ customer.name }} | |
{% if customer.email != blank %} | |
<br> | |
{{ customer.email }} | |
{% endif %} | |
{% if customer.phone != blank %} | |
<br> | |
{{ TEXT_tel }} {{ customer.phone }} | |
{% endif %} | |
{% else %} | |
{{ TEXT_no_customer_information }} | |
{% endif %} | |
</p> | |
</div> | |
<div class="order-details"> | |
{% if shipping_method != blank or fulfillment.tracking_company != blank %} | |
<p class="subtitle-bold to-uppercase"> | |
{{ TEXT_shipping_method }} | |
</p> | |
<p class="order-detail"> | |
{% if fulfillment.tracking_company == blank or fulfillment.tracking_company == "Other" %} | |
{{ shipping_method.title }} | |
<br> | |
{{ fulfillment.tracking_number }} | |
{% else %} | |
{{ fulfillment.tracking_company }} {{ shipping_method.title }} | |
<br> | |
{{ fulfillment.tracking_number }} | |
{% endif %} | |
</p> | |
{% endif %} | |
{% if attributes.Pickup-Date != blank or attributes.Delivery-Date != blank %} | |
{% include "pickup_and_delivery" %} | |
{% endif %} | |
</div> | |
</div> | |
<hr> | |
<div class="order-table"> | |
<div class="order-table-row order-table-header"> | |
<div class="order-table-cell item-image-and-description subtitle-bold to-uppercase"> | |
{{ TEXT_items }} | |
</div> | |
<div class="order-table-cell item-quantity text-align-right subtitle-bold to-uppercase"> | |
{{ TEXT_qty }} | |
</div> | |
</div> | |
{% comment %} | |
These variables make sure your images print at high quality. | |
{% endcomment %} | |
{% assign resolution_adjusted_size = SETTING_product_image_size | times: 200 | divided_by: 72 | ceil %} | |
{% capture effective_image_dimensions %}{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}{% endcapture %} | |
{% assign discount_application_titles = discount_applications | map: 'title' %} | |
{% for line_item in line_items %} | |
{% assign line_item_is_bundle_item = false %} | |
{% for discount_allocation in line_item.discount_allocations %} | |
{% if discount_application_titles[discount_allocation.discount_application_index] contains "Simple Bundles: " %} | |
{% assign line_item_is_bundle_item = true %} | |
{% continue %} | |
{% endif %} | |
{% endfor %} | |
{% if line_item_is_bundle_item %} | |
{% continue %} | |
{% endif %} | |
{% if line_item.fulfillment_quantity < 1 %}{% continue %}{% endif %} | |
<div class="order-table-row order-table-body"> | |
{% if SETTING_show_product_images == true %} | |
<div class="order-table-cell item-image"> | |
<div class="aspect-ratio aspect-ratio-square" style="width: {{ SETTING_product_image_size }}px; height: {{ SETTING_product_image_size }}px;"> | |
{% if line_item.image != blank %} | |
{{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }} | |
{% else %} | |
{{ '/product_image_placeholder.svg' | img_tag: '', 'aspect-ratio__content placeholder' }} | |
{% endif %} | |
</div> | |
</div> | |
{% endif %} | |
<div class="order-table-cell item-description"> | |
<p> | |
<span class="item-description-line"> | |
{{ line_item.product_title }} | |
</span> | |
{% if line_item.variant_title != blank %} | |
<span class="item-description-line"> | |
{{ line_item.variant_title }} | |
</span> | |
{% endif %} | |
{% if line_item.sku != blank %} | |
<span class="item-description-line"> | |
{{ TEXT_sku }}{{ line_item.sku }} | |
</span> | |
{% endif %} | |
{% for p in line_item.properties %} | |
{% assign p_internal = p.first | slice: 0 %} | |
{% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %} | |
{% if p.last contains "/uploads/" or p.last contains "cdn.shopify.com" %} | |
<span class="item-description-line"><a href="{{ p.last }}" target="_blank">{{ p.first }}</a></span> | |
{% else %} | |
<span class="item-description-line">{{ p.first }}: {{ p.last }}</span> | |
{% endif %} | |
{% endunless %} | |
{% endfor %} | |
{% if SETTING_show_product_barcodes == true and line_item.variant.barcode != blank %} | |
<img class="barcode" data-barcode="{{ line_item.variant.barcode }}"> | |
{% endif %} | |
</p> | |
</div> | |
<div class="order-table-cell item-quantity text-align-right"> | |
{{ line_item.fulfillment_quantity }} {{ TEXT_qty_of }} {{ line_item.quantity | minus: line_item.refunded_quantity }} | |
</div> | |
</div> | |
<!-- BUNDLE items for each line item --> | |
{% if line_item.variant_title == blank %} | |
{% assign line_item_title = line_item.product_title %} | |
{% else %} | |
{% assign line_item_title = line_item.product_title | append: " - " | append: line_item.variant_title %} | |
{% endif %} | |
{% for bundle_item_line_item in line_items %} | |
{% assign bundle_item = false %} | |
{% for discount_allocation in bundle_item_line_item.discount_allocations %} | |
{% assign bundle_title = discount_application_titles[discount_allocation.discount_application_index] | remove: "Simple Bundles: " | remove: "<br>" %} | |
{% if bundle_title == line_item_title %} | |
{% assign bundle_item = true %} | |
{% continue %} | |
{% endif %} | |
{% endfor %} | |
{% unless bundle_item %} | |
{% continue %} | |
{% endunless %} | |
{% if bundle_item_line_item.fulfillment_quantity < 1 %}{% continue %}{% endif %} | |
<div class="order-table-row order-table-body" style="padding-left: 58px"> | |
{% if SETTING_show_product_images == true %} | |
<div class="order-table-cell item-image"> | |
<div class="aspect-ratio aspect-ratio-square" style="width: {{ SETTING_product_image_size }}px; height: {{ SETTING_product_image_size }}px;"> | |
{% if bundle_item_line_item.image != blank %} | |
{{ bundle_item_line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }} | |
{% else %} | |
{{ '/product_image_placeholder.svg' | img_tag: '', 'aspect-ratio__content placeholder' }} | |
{% endif %} | |
</div> | |
</div> | |
{% endif %} | |
<div class="order-table-cell item-description"> | |
<p> | |
<span class="item-description-line"> | |
{{ bundle_item_line_item.product_title }} | |
</span> | |
{% if bundle_item_line_item.variant_title != blank %} | |
<span class="item-description-line"> | |
{{ bundle_item_line_item.variant_title }} | |
</span> | |
{% endif %} | |
{% if bundle_item_line_item.sku != blank %} | |
<span class="item-description-line"> | |
{{ TEXT_sku }}{{ bundle_item_line_item.sku }} | |
</span> | |
{% endif %} | |
{% for p in bundle_item_line_item.properties %} | |
{% assign p_internal = p.first | slice: 0 %} | |
{% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %} | |
{% if p.last contains "/uploads/" or p.last contains "cdn.shopify.com" %} | |
<span class="item-description-line"><a href="{{ p.last }}" target="_blank">{{ p.first }}</a></span> | |
{% else %} | |
<span class="item-description-line">{{ p.first }}: {{ p.last }}</span> | |
{% endif %} | |
{% endunless %} | |
{% endfor %} | |
{% if SETTING_show_product_barcodes == true and bundle_item_line_item.variant.barcode != blank %} | |
<img class="barcode" data-barcode="{{ bundle_item_line_item.variant.barcode }}"> | |
{% endif %} | |
</p> | |
</div> | |
<div class="order-table-cell item-quantity text-align-right"> | |
{{ bundle_item_line_item.fulfillment_quantity }} {{ TEXT_qty_of }} {{ bundle_item_line_item.quantity | minus: bundle_item_line_item.refunded_quantity }} | |
</div> | |
</div> | |
{% endfor %} | |
{% else %} | |
<div class="order-table-row order-table-body"> | |
<p>{{ TEXT_no_items_fulfilled }}</p> | |
</div> | |
{% endfor %} | |
</div> | |
<hr> | |
<div class="notes-and-pricing"> | |
<div class="notes"> | |
{% if note != blank %} | |
<div class="notes-row"> | |
<div class="notes-title subtitle-bold to-uppercase"> | |
{{ TEXT_notes }} | |
</div> | |
<div class="notes-details"> | |
{{ note }} | |
</div> | |
</div> | |
{% endif %} | |
{% if SETTING_show_cart_attributes == true %} | |
{% for attribute in attributes %} | |
<div class="notes-row"> | |
<div class="notes-title subtitle-bold to-uppercase"> | |
{{ attribute.first }}: | |
</div> | |
<div class="notes-details"> | |
{{ attribute.last }} | |
</div> | |
</div> | |
{% endfor %} | |
{% endif %} | |
</div> | |
</div> | |
<div class="footer"> | |
<p> | |
{{ TEXT_thanks }} | |
</p> | |
<p> | |
<strong> | |
{% if shop_name_text != blank %} | |
{{ shop_name_text }} | |
{% else %} | |
{{ shop.name }} | |
{% endif %} | |
</strong> | |
<br> | |
{% if shop_address_text != blank %} | |
{{ shop_address_text }} | |
{% else %} | |
{% if shop.address1 != blank %}{{ shop.address1 }},{% endif %}{% if shop.address2 != blank %} {{ shop.address2 }},{% endif %}{% if shop.city != blank %} {{ shop.city }},{% endif %}{% if shop.province_code != blank %} {{ shop.province_code }},{% endif %}{% if shop.zip != blank %} {{ shop.zip }},{% endif %} {{ shop.country }} | |
{% endif %} | |
{% if shop_tax_number_text != blank %} | |
<br>{{ shop_tax_number_text }} | |
{% endif %} | |
<br> | |
<a href="mailto:{{ shop.customer_email }}" target="_blank">{{ shop.customer_email }}</a> | |
<br> | |
<a href="https://{{ shop.domain }}" target="_blank">{{ shop.domain }}</a> | |
</p> | |
</div> | |
</div> | |
<style> | |
.template-311966 * { | |
font-family: "Open Sans", sans-serif !important; | |
font-size: 14px; | |
font-weight: 300; | |
line-height: 18px; | |
box-sizing: border-box; | |
} | |
.template-311966 { | |
margin: auto; | |
padding: 10px 30px 0 30px; | |
min-height: 600px; | |
} | |
.template-311966 p { | |
margin: 0 0 7px 0; | |
} | |
.template-311966 a, | |
.template-311966 a:link, | |
.template-311966 a:visited { | |
color: #000; | |
font-weight: 300; | |
text-decoration: none; | |
} | |
.template-311966 .header { | |
width: 100%; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: flex; | |
flex-direction: row; | |
align-items: top; | |
margin-bottom: 30px; | |
} | |
.template-311966 .header p { | |
margin: 0 | |
} | |
.template-311966 .shop-title { | |
-webkit-box-flex: 6; | |
-webkit-flex: 6; | |
flex: 6; | |
font-size: 30px; | |
line-height: 32px; | |
font-weight: 400; | |
} | |
.template-311966 .shop-logo { | |
max-width: {{ SETTING_shop_logo_width }}px; | |
} | |
.template-311966 .order-title { | |
-webkit-box-flex: 4; | |
-webkit-flex: 4; | |
flex: 4; | |
} | |
.template-311966 .customer-addresses { | |
width: 100%; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: flex; | |
flex-direction: row; | |
align-items: top; | |
margin-bottom: 15px; | |
} | |
.template-311966 .shipping-address { | |
flex-grow: 1; | |
flex-basis: 0; | |
} | |
.template-311966 .billing-address { | |
flex-grow: 1; | |
flex-basis: 0; | |
} | |
.template-311966 .order-details { | |
text-align: right; | |
flex-grow: 1; | |
flex-basis: 0; | |
margin-bottom: 15px; | |
} | |
.template-311966 .address-detail, | |
.template-311966 .order-detail { | |
margin: 5px 0 0; | |
line-height: 1.5; | |
} | |
.template-311966 .subtitle-bold { | |
font-weight: bold; | |
margin: 0; | |
font-size: 13px; | |
} | |
.template-311966 .order-detail + .subtitle-bold { | |
margin-top: 15px; | |
} | |
.template-311966 .to-uppercase { | |
text-transform: uppercase; | |
} | |
.template-311966 .text-align-right { | |
text-align: right; | |
} | |
.template-311966 .order-table { | |
display: block; | |
} | |
.template-311966 .order-table-row { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
margin: 15px 0; | |
page-break-inside: avoid; | |
} | |
.template-311966 .order-table-header { | |
margin-bottom: 0; | |
} | |
{% if SETTING_show_product_images == true %} | |
.template-311966 .order-table-header .item-image-and-description { | |
-webkit-box-flex: 8; | |
-webkit-flex: 8; | |
flex: 8; | |
margin-right: 30px; | |
} | |
{% else %} | |
.template-311966 .order-table-header .item-image-and-description { | |
-webkit-box-flex: 7; | |
-webkit-flex: 7; | |
flex: 7; | |
} | |
{% endif %} | |
.template-311966 .order-table-header .order-table-cell { | |
white-space: nowrap; | |
} | |
.template-311966 .order-table-cell { | |
-webkit-box-flex: 2; | |
-webkit-flex: 2; | |
flex: 2; | |
margin: 0; | |
} | |
.template-311966 .item-image { | |
-webkit-box-flex: 1; | |
-webkit-flex: 1; | |
flex: 1; | |
margin-right: 15px; | |
min-width: {{ SETTING_product_image_size | default: 0 }}px; | |
} | |
.template-311966 .item-description { | |
-webkit-box-flex: 7; | |
-webkit-flex: 7; | |
flex: 7; | |
} | |
.template-311966 .item-description-line { | |
display: block; | |
margin: 0; | |
} | |
.template-311966 .item-description p { | |
margin: 0; | |
line-height: 1.5; | |
} | |
.template-311966 .item-line-price { | |
-webkit-box-flex: 3; | |
-webkit-flex: 3; | |
flex: 3; | |
} | |
.template-311966 .missing-line-items-text { | |
margin: 15px 0; | |
padding: 0 7px; | |
} | |
.template-311966 .notes-and-pricing { | |
width: 100%; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: flex; | |
flex-direction: row; | |
align-items: top; | |
margin-bottom: 15px; | |
} | |
.template-311966 .notes { | |
flex-grow: 2; | |
flex-basis: 0; | |
} | |
.template-311966 .notes-row { | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: flex; | |
flex-direction: row; | |
align-items: top; | |
margin: 15px 0; | |
page-break-inside: avoid; | |
} | |
.template-311966 .notes-title { | |
-webkit-box-flex: 1; | |
-webkit-flex: 1; | |
flex: 1; | |
} | |
.template-311966 .notes-details { | |
-webkit-box-flex: 3; | |
-webkit-flex: 3; | |
flex: 3; | |
margin-right: 30px; | |
} | |
.template-311966 .footer { | |
margin-top: 30px; | |
text-align: center; | |
line-height: 1.5; | |
} | |
.template-311966 .footer p { | |
margin: 0; | |
margin-bottom: 15px; | |
} | |
.template-311966 .footer p:last-of_type { | |
margin-bottom: 0px; | |
} | |
.template-311966 hr { | |
height: 2px; | |
border-bottom: 2px solid #e1e1e1; | |
margin: 0; | |
} | |
.template-311966 .aspect-ratio { | |
position: relative; | |
display: block; | |
background: #fafbfc; | |
padding: 0; | |
} | |
.template-311966 .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); | |
} | |
.template-311966 .aspect-ratio--square { | |
width: 100%; | |
padding-bottom: 100%; | |
} | |
.template-311966 .aspect-ratio__content { | |
position: absolute; | |
max-width: 100%; | |
max-height: 100%; | |
display: block; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
margin: auto; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment