<!-- RECEIPT / INVOICE -->
{% assign SETTING_shop_logo = "" %}
{% assign SETTING_shop_logo_width = 240 %}
{% assign SETTING_date_format = "%b %e, %Y" %}
{% assign SETTING_show_product_images = true %}
{% assign SETTING_product_image_size = 58 %}
{% assign SETTING_show_cart_attributes = false %}
{% assign SETTING_show_order_number_barcode = true %}
{% assign SETTING_show_product_barcodes = false %}
{% comment %}
TRANSLATE TEXT
You can translate or change wording in the document by updating
the words below. Only change the words between the quotes "".
{% endcomment %}
{% assign TEXT_receipt_tax_invoice = "Rechnungs Nr." %}
{% assign TEXT_shipping_address = "Lieferadresse" %}
{% assign TEXT_customer = "Rechnungsadresse" %}
{% assign TEXT_tel = "Tel." %}
{% assign TEXT_no_customer_information = "No customer information" %}
{% assign TEXT_payment_method = "Bezahlart" %}
{% assign TEXT_shipping_method = "Lieferung via" %}
{% assign TEXT_items = "Artikel" %}
{% assign TEXT_price = "Einzelpreis" %}
{% assign TEXT_tax = "Steuer" %}
{% assign TEXT_qty = "Menge" %}
{% assign TEXT_item_total = "Gesamtpreis " %}
{% assign TEXT_sku = "SKU: " %}
{% assign TEXT_refunded = "x Refunded" %}
{% assign TEXT_notes = "Notes" %}
{% assign TEXT_discount = "Discount" %}
{% assign TEXT_subtotal = "Zwischensumme" %}
{% assign TEXT_shipping = "Versandkosten" %}
{% assign TEXT_duties = "Import duties" %}
{% assign TEXT_vat = "VAT" %}
{% assign TEXT_total = "Summe" %}
{% assign TEXT_total_refund = "Total refund" %}
{% assign TEXT_thanks = "Vielen, vielen Dank für deine Bestellung!" %}
{% if SETTING_show_product_barcodes == true or SETTING_show_order_number_barcode == true %}
{% include "barcodes" %}
{% endif %}
<div class="template-182887">
<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_receipt_tax_invoice }} {{ name }}
</p>
<p>
{{ created_at | date: SETTING_date_format }}
</p>
</div>
</div>
<div class="customer-addresses">
{% if shipping_address != blank %}
<div class="shipping-address">
<p class="subtitle-bold to-uppercase">
{{ TEXT_shipping_address }}
</p>
<p class="address-detail">
{{ 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 %}
</p>
</div>
{% endif %}
<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 }}
{% elsif customer != blank %}
{{ customer.name }}
{% if customer.email != blank %}
<br>
{{ customer.email }}
{% endif %}
{% if customer.phone != blank %}
<br>
{{ customer.phone }}
{% endif %}
{% else %}
{{ TEXT_no_customer_information }}
{% endif %}
</p>
</div>
<div class="order-details">
{% if payment_method != blank %}
<p class="subtitle-bold to-uppercase">
{{ TEXT_payment_method }}
</p>
<p class="order-detail">
{{ payment_method }}
</p>
{% endif %}
{% 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 %}
</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-price text-align-right subtitle-bold to-uppercase">
{{ TEXT_price }}
</div>
{% if show_line_item_taxes == true %}
<div class="order-table-cell item-tax text-align-right subtitle-bold to-uppercase">
{{ TEXT_tax }}
</div>
{% endif %}
<div class="order-table-cell item-quantity text-align-right subtitle-bold to-uppercase">
{{ TEXT_qty }}
</div>
<div class="order-table-cell item-line-price text-align-right subtitle-bold to-uppercase">
{{ TEXT_item_total }}
</div>
</div>
{% comment %}
These variables make sure your images print at high quality.
{% endcomment %}
{% assign resolution_adjusted_size = SETTING_product_image_size | times: 300 | divided_by: 72 | ceil %}
{% capture effective_image_dimensions %}{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}{% endcapture %}
<table>
<tbody>
{% for line_item in line_items %}
{% if line_item.quantity < 1 %}{% continue %}{% endif %}
<tr>
<td>
<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">
<strong>{{ line_item.product_title }}</strong>
</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 %}
<span class="item-description-line">{{ p.first }}: {{ p.last }}</span>
{% endunless %}
{% endfor %}
{% if line_item.refunded_quantity > 0 %}
<span class="item-description-line">
<span class="label-warning">{{ line_item.refunded_quantity }}{{ TEXT_refunded }}</span>
</span>
{% endif %}
{% 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-price text-align-right">
{% if line_item.original_price > line_item.price %}<s>{{ line_item.original_price | money }}</s><br>{% endif %}
{{ line_item.price | money }}
</div>
{% if show_line_item_taxes == true %}
<div class="order-table-cell item-tax text-align-right">
{% for tax in line_item.tax_lines %}
{{ tax.price | divided_by: line_item.quantity | money }}
{% else %}
{{ 0.0 | money }}
{% endfor %}
</div>
{% endif %}
<div class="order-table-cell item-quantity text-align-right">
{{ line_item.quantity }}
</div>
<div class="order-table-cell item-line-price text-align-right">
{{ line_item.line_price | money }}
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</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 class="pricing">
{% if total_discounts != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_discount }}<br>
{% for discount in discounts %}{{ discount.title }} {% endfor %}
</div>
<div class="pricing-details">
-{{ total_discounts | money }}
</div>
</div>
{% endif %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_subtotal }}
</div>
<div class="pricing-details">
{{ subtotal_price | money }}
</div>
</div>
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_shipping }}
</div>
<div class="pricing-details">
{{ shipping_price | default: 0.0 | money }}
</div>
</div>
{% if duties_price != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_duties }}
</div>
<div class="pricing-details">
{{ duties_price | money }}
</div>
</div>
{% endif %}
{% for tax in tax_lines %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ tax.title | replace: "VAT", TEXT_vat }} {{ tax.rate | times: 100 }}%
</div>
<div class="pricing-details">
{{ tax.price | money }}
</div>
</div>
{% endfor %}
<div class="pricing-row text-align-right">
<div class="pricing-title subtitle-bold to-uppercase">
{{ TEXT_total }} ({{ currency }})
</div>
<div class="pricing-details subtitle-bold to-uppercase">
{{ total_price | money }}
</div>
</div>
{% if total_refunds != 0.0 %}
<div class="pricing-row text-align-right">
<div class="pricing-title">
{{ TEXT_total_refund }}
</div>
<div class="pricing-details">
-{{ total_refunds | money }}
</div>
</div>
{% endif %}
<hr>
</div>
</div>
<div class="footer">
<p>
{{ TEXT_thanks }}
</p>
<p>
<strong>
{{ shop.name }} - by Subucoola GbR
</strong>
<br>
{{ shop.address1 }}{% if shop.address2 != blank %}, {{ shop.address2 }}{% endif %}, {{ shop.city }}, {{ shop.province_code }}, {{ shop.zip }}, {{ shop.country }}
<br>
USt-IdNr. DE 277249597
<br>
<a href="https://{{ shop.domain }}" target="_blank">{{ shop.domain }}</a>
</p>
</div>
</div>
<style>
.template-182887 * {
font-family: "Open Sans", sans-serif !important;
font-size: 14px;
box-sizing: border-box;
font-weight: 300;
}
.template-182887 {
margin: auto;
padding: 10px 30px 0 30px;
min-height: 600px;
}
.template-182887 p {
margin: 0 0 7px 0;
}
.template-182887 a,
.template-182887 a:link,
.template-182887 a:visited {
color: #000;
font-weight: 300;
text-decoration: none;
}
.template-182887 .header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 30px;
}
.template-182887 .header p {
margin: 0
}
.template-182887 .shop-title {
-webkit-box-flex: 6;
-webkit-flex: 6;
flex: 6;
font-size: 30px;
font-weight: 400;
}
.template-182887 .shop-logo {
max-width: {{ SETTING_shop_logo_width }}px;
}
.template-182887 .order-title {
-webkit-box-flex: 4;
-webkit-flex: 4;
flex: 4;
}
.template-182887 .customer-addresses {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-182887 .shipping-address {
flex-grow: 1;
flex-basis: 0;
}
.template-182887 .billing-address {
flex-grow: 1;
flex-basis: 0;
}
.template-182887 .order-details {
text-align: right;
flex-grow: 1;
flex-basis: 0;
}
.template-182887 .address-detail,
.template-182887 .order-detail {
margin: 15px 0 0;
line-height: 1.5;
}
.template-182887 .subtitle-bold {
font-weight: bold;
margin: 0;
font-size: 13px;
}
.template-182887 .order-detail + .subtitle-bold {
margin-top: 15px;
}
.template-182887 .to-uppercase {
text-transform: uppercase;
}
.template-182887 .text-align-right {
text-align: right;
}
.template-182887 .order-table {
display: block;
}
.template-182887 .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-182887 .order-table-header {
margin-bottom: 0;
}
{% if SETTING_show_product_images == true %}
.template-182887 .order-table-header .item-image-and-description {
-webkit-box-flex: 8;
-webkit-flex: 8;
flex: 8;
margin-right: 30px;
}
{% else %}
.template-182887 .order-table-header .item-image-and-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
{% endif %}
.template-182887 .order-table-header .order-table-cell {
white-space: nowrap;
}
.template-182887 .order-table-cell {
-webkit-box-flex: 2;
-webkit-flex: 2;
flex: 2;
margin: 0;
}
.template-182887 .item-image {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
margin-right: 15px;
min-width: {{ SETTING_product_image_size | default: 0 }}px;
}
.template-182887 .item-description {
-webkit-box-flex: 7;
-webkit-flex: 7;
flex: 7;
}
.template-182887 .item-description-line {
display: block;
}
.template-182887 .item-description p {
margin: 0;
line-height: 1.5;
}
.template-182887 .item-line-price {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
}
.template-182887 .missing-line-items-text {
margin: 15px 0;
padding: 0 7px;
}
.template-182887 .notes-and-pricing {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin-bottom: 15px;
}
.template-182887 .notes {
flex-grow: 2;
flex-basis: 0;
}
.template-182887 .notes-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: top;
margin: 15px 0;
page-break-inside: avoid;
}
.template-182887 .notes-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-182887 .notes-details {
-webkit-box-flex: 3;
-webkit-flex: 3;
flex: 3;
margin-right: 30px;
}
.template-182887 .footer {
margin-top: 30px;
text-align: center;
line-height: 1.5;
}
.template-182887 .footer p {
margin: 0;
margin-bottom: 15px;
}
.template-182887 hr {
height: 2px;
border-bottom: 2px solid #e1e1e1;
margin: 0;
}
.template-182887 .aspect-ratio {
position: relative;
display: block;
background: #fafbfc;
padding: 0;
}
.template-182887 .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-182887 .aspect-ratio--square {
width: 100%;
padding-bottom: 100%;
}
.template-182887 .aspect-ratio__content {
position: absolute;
max-width: 100%;
max-height: 100%;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.template-182887 .pricing {
flex-grow: 1;
flex-basis: 0;
}
.template-182887 .pricing-row {
display: -webkit-box;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
page-break-inside: avoid;
}
.template-182887 .pricing-title {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-182887 .pricing-details {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.template-182887 .label-warning {
display: inline-block;
background-color: #FFEA8A;
border-radius: 10px;padding: 1px 6px;
margin-top: 3px;
}
</style>
