Order Printer Pro by FORSBERG+two

<!-- PACKING SLIP -->
{% assign SETTING_shop_logo = "" %}
{% assign SETTING_shop_logo_width = 240 %}
{% assign SETTING_date_format = "%b %e, %Y" %}
{% assign SETTING_product_image_size = 58 %}
{% assign SETTING_show_cart_attributes = true %}
{% assign SETTING_show_order_number_barcode = true %}
{% assign SETTING_show_product_barcodes = false %}
{% assign SETTING_use_latest_fulfillment = 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_order = "Order" %}

{% case attributes.Checkout-Method %}
  {% when "pickup" %}
   {% assign TEXT_shipping_address = "Pickup location" %}
  {% when "delivery" %}
   {% assign TEXT_shipping_address = "Delivery address" %}
  {% else %}
   {% assign TEXT_shipping_address = "Shipping address" %}
{% endcase %}

{% 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_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!" %}


{% if SETTING_show_product_barcodes == true or SETTING_show_order_number_barcode == true %}
  {% include "barcodes" %}
{% endif %}

{% 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 %}

<div class="template-136040">
  <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">
        {% 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 %}
           {{ TEXT_no_customer_information }}
        {% endif %}
      </p>
    </div>
    <div class="order-details">
      {% if shipping_method != blank and attributes.Checkout-Method != 'pickup' 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-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: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}{{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}{% endcapture %}

    {% for line_item in line_items %}
      {% if line_item.fulfillment_quantity < 1 %}{% continue %}{% endif %}
      <div class="order-table-row order-table-body">
        <div class="order-table-cell item-image">
          {% if SETTING_product_image_size != 0 %}
            <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>
          {% endif %}
        </div>
        <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 %}
                  <span class="item-description-line">{{ p.first }}: {{ p.last }}</span>
              {% 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>
    {% 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 %}
          {% if attributes.Pickup-Date && attributes.Pickup-Time %}
            <div class="notes-row">
              <div class="notes-title subtitle-bold to-uppercase">
                Pickup date:
              </div>
              <div class="notes-details">
                {{ attributes.Pickup-Date | date: "%A, %b %d, %y" }} at {{ attributes.Pickup-Time }}
              </div>
            </div>
          {% elsif attributes.Pickup-Date %}
            <div class="notes-row">
              <div class="notes-title subtitle-bold to-uppercase">
                Pickup date:
              </div>
              <div class="notes-details">
                {{ attributes.Pickup-Date | date: "%A, %b %d, %y" }}
              </div>
            </div>
          {% endif %}

          {% if attributes.Delivery-Date && attributes.Delivery-Time %}
            <div class="notes-row">
              <div class="notes-title subtitle-bold to-uppercase">
                Delivery date:
              </div>
              <div class="notes-details">
                {{ attributes.Delivery-Date | date: "%A, %b %d, %y" }} between {{ attributes.Delivery-Time }}
              </div>
            </div>
          {% elsif attributes.Delivery-Date %}
            <div class="notes-row">
              <div class="notes-title subtitle-bold to-uppercase">
                Delivery date:
              </div>
              <div class="notes-details">
                {{ attributes.Delivery-Date | date: "%A, %b %d, %y" }}
              </div>
            </div>
          {% endif %}

          {% if attributes.Shipping-Date %}
            <div class="notes-row">
              <div class="notes-title subtitle-bold to-uppercase">
                Shipping date:
              </div>
              <div class="notes-details">
                {{ attributes.Shipping-Date | date: "%A, %b %d, %y" }}
              </div>
            </div>
          {% endif %}

      {% endif %}
    </div>
  </div>

  <div class="footer">
    <p>
      {{ TEXT_thanks }}
    </p>
    <p>
      <strong>
        {{ shop.name }}
      </strong>
      <br>
      {{ shop.address1 }}{% if shop.address2 != blank %}, {{ shop.address2 }}{% endif %}, {{ shop.city }}, {{ shop.province_code }}, {{ shop.zip }}, {{ shop.country }}
      <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-136040 * {
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px;
    box-sizing: border-box;
    font-weight: 300;
  }

  .template-136040 {
    margin: auto;
    padding: 10px 30px 0 30px;
    min-height: 600px;
  }

  .template-136040 p {
    margin: 0 0 7px 0;
  }

  .template-136040 a,
  .template-136040 a:link,
  .template-136040 a:visited {
    color: #000;
    font-weight: 300;
    text-decoration: none;
  }

  .template-136040 .header {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
    margin-bottom: 30px;
  }

  .template-136040 .header p {
    margin: 0
  }

  .template-136040 .shop-title {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    font-size: 30px;
    font-weight: 400;
  }

  .template-136040 .shop-logo {
    max-width: {{ SETTING_shop_logo_width }}px;
  }

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

  .template-136040 .customer-addresses {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
    margin-bottom: 15px;
  }

  .template-136040 .shipping-address {
    flex-grow: 1;
    flex-basis: 0;
  }

  .template-136040 .billing-address {
    flex-grow: 1;
    flex-basis: 0;
  }

  .template-136040 .order-details {
    text-align: right;
    flex-grow: 1;
    flex-basis: 0;
  }

  .template-136040 .address-detail,
  .template-136040 .order-detail {
    margin: 15px 0 0;
    line-height: 1.5;
  }

  .template-136040 .subtitle-bold {
    font-weight: bold;
    margin: 0;
    font-size: 13px;
  }

  .template-136040 .order-detail + .subtitle-bold {
    margin-top: 15px;
  }

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

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

  .template-136040 .order-table {
    display: block;
  }

  .template-136040 .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-136040 .order-table-header {
    margin-bottom: 0;
  }

  .template-136040 .order-table-header .item-image-and-description {
    -webkit-box-flex: 8;
    -webkit-flex: 8;
    flex: 8;
    margin-right: 30px;
  }

  .template-136040 .order-table-header .order-table-cell {
    white-space: nowrap;
  }


  .template-136040 .order-table-cell {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    flex: 2;
    margin: 0;
  }

  .template-136040 .item-image {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 15px;
    min-width: {{ SETTING_product_image_size }}px;
  }

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

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

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

  .template-136040 .item-line-price {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
  }

  .template-136040 .missing-line-items-text {
    margin: 15px 0;
    padding: 0 7px;
  }

  .template-136040 .notes-and-pricing {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
    margin-bottom: 15px;
  }

  .template-136040 .notes {
    flex-grow: 2;
    flex-basis: 0;
  }

  .template-136040 .notes-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
    margin: 15px 0;
    page-break-inside: avoid;
  }

  .template-136040 .notes-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }

  .template-136040 .notes-details {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
    margin-right: 30px;
  }

  .template-136040 .footer {
    margin-top: 30px;
    text-align: center;
    line-height: 1.5;
  }

  .template-136040 .footer p {
    margin: 0;
    margin-bottom: 15px;
  }

  .template-136040 hr {
    height: 2px;
    border-bottom: 2px solid #e1e1e1;
    margin: 0;
  }

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

  .template-136040 .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-136040 .aspect-ratio--square {
    width: 100%;
    padding-bottom: 100%;
  }

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


</style>