Simple Bundles: Indented bundles items in Order printer pro packing slip template

packing_slip.liquid

<!-- 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>