Need help editing my Order Printer Template

Laurie_ONeill
Shopify Partner
51 0 9

I've made a new invoice template to use with order printer, and for the most part it looks great, but for some reason on orders with multiple items the far right side of the Item/Quantity/Price/Total table is getting cut off when I try to print.  It seems to be related to the line item properties, because when I remove them then it doesn't cut it off any more.  It shows the line items perfectly, and doesn't get cut off if there is only one item in the order, and I am tearing my hair out figuring out how to try to fix this!  I sell personalized items and need the line item properties to show up on the invoice.

I've included my code below, and have bolded the part that I think is causing the problem...thanks in advance for any advice you can give me!

<table class="table-tabular" style="margin: 0 0 1.5em 0; border:none;">

<tr style="border-bottom:none;"><td style="border-bottom:none; width:65%;">
<strong style="font-size: 1.7em;">{{ shop_name }}</strong><br />
  {{ shop.address }}<br/>
  {{ shop.city }} {{ shop.province_code }} {{ shop.zip | upcase }}<br/>
  </td>
  <td style="border-bottom:none; width:35%;">
  Date: {{ "now" | date: "%m/%d/%y" }}<br />
  Invoice: {{ order_name }}<br />
  Payment Method: {% for transaction in transactions %}
                  {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                    {% if transaction.payment_details.credit_card_number %}
                      {{ transaction.payment_details.credit_card_company }}
                    {% else %}
                      {{ transaction.gateway }}{% break %}
                    {% endif %}
                  {% endif %}
                {% endfor %}<br />
                 Shipping: {{ shipping_method.title }}
                 </td>
                 </tr>
                 </table>
  

<hr style="margin-top:2px; margin-bottom:4px;"/>

  <table class="table-tabular" style="margin: 0 0 0.5em 0; border:none;">
  <tr style="border-bottom:none;">
  <td valign="top" style="border-bottom:none;">

  
  <b>SHIP TO:</b></td><td valign="top" style="border-bottom:none;">
    <strong>{{ shipping_address.name }}</strong><br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}<p>
    {{ email }}<br />
    {{ shipping_address.phone }}
  
</td>
  <td valign="top" style="border-bottom:none;">

<b>BILL TO:</b></td><td valign="top" style="border-bottom:none;">
    <strong>{{ billing_address.name }}</strong><br/>
    {% if billing_address.company %}
      {{ billing_address.company }}<br/>
    {% endif %}
    {{ billing_address.street }}<br/>
    {{ billing_address.city }}
    {{ billing_address.province_code }}
    {{ billing_address.zip | upcase }}<br/>
    {{ billing_address.country }}
    </td>
    </tr>
  
    </table>

<table class="table-tabular" style="margin: 0 0 1.0em 0;">
  <thead>
    <tr>
      <th style="width=70%;">Item</th>
      <th style="width=10%;">Quantity</th>
      <th style="width=10%;">Price</th>
      <th style="width=10%;">Total</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        
        <td style="width=70%;">
        
         {% if line_item.sku != blank %} {{ line_item.sku }} -  {% endif %}{{ line_item.title }}
                      {% for p in line_item.properties %}
                        {% unless p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" or p.last == blank %}
                          <br><span style="font-size: 88%">{{ p.first }}: {{ p.last }}</span>
                        {% endunless %}
                      {% endfor %}
                      
                      </td>


                      <td style="width=10%;">{{ line_item.quantity }} </td>
       
        <td style="width=10%;">{{ line_item.price | money }}</td>
        <td style="width=10%;">{{ line_item.line_price | money }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3 style="margin: 0 0 1em 0;">Transaction Details</h3>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Kind</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<div style="margin-left:40%;">

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <tr>
    <td style="width:85%;">Subtotal price:</td>
    <td style="width:15%;">{{ subtotal_price | money }}</td>
  </tr>
  {% for discount in discounts %}
  <tr>
    <td>Includes discount "{{ discount.code }}"</td>
    <td>{{ discount.savings | money }}</td>
  </tr>
  {% endfor %}
  <tr>
    <td>Tax:</td>
    <td>{{ tax_price | money }}</td>
  </tr>
  {% if shipping_address %}
    <tr>
      <td>Shipping: {{ shipping_method.title }}</td>
      <td>{{ shipping_price | money }}</td>
    </tr>
  {% endif %}
  <tr>
    <td><strong>Total price:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
  {% if total_paid != total_price %}
    <tr>
      <td><strong>Total paid:</strong></td>
      <td><strong>{{ total_paid | money }}</strong></td>
    </tr>
    <tr>
      <td><strong>Outstanding Amount:</strong></td>
      <td><strong>{{ total_price | minus: total_paid | money }}</strong></td>
    </tr>
  {% endif %}
</table>
</div>

{% if note %}
  <p><strong>Note:</strong> {{ note }}</p>
{% endif %}


 {% for attribute in attributes %}
<b>{{ attribute | first }}:</b> <span style="font-weight:normal; color:#000000;">{{ attribute | last }}</span><br>
{% endfor %}

<hr/>
<div style="text-align:center;"><span style="font-size: 1.5em;"><b>THANKS FOR ORDERING!</b></span></div>


 

Laurie_ONeill
Shopify Partner
51 0 9

Update...I've narrowed the problem down further.  It isn't orders with multiple items that is causing the cut-off problem, it is orders with uploaded images that are part of the line item properties.  It is displaying the long url for the uploaded image, which is then forcing the template to cut off.  

Is there any way to make it simply display "IMAGE UPLOADED" or something like that instead of the actual URL?  I don't really need the URL to display on the order, I just need to know that the customer uploaded an image so I can go retrieve it.  

Thanks!

0 Likes
Brendin
Shopify Partner
200 0 29

Hi Laurie

I adjusted a section of your code that i have working on my test store

{% for line_item in line_items %}
      <tr>
        
        <td style="width=70%;">
        
         {% if line_item.sku != blank %} {{ line_item.sku }} -  {% endif %}{{ line_item.title }}
                      {% for p in line_item.properties %}
                        {% unless p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" or p.last == blank %}
                          <br><span style="font-size: 88%">{{ p.first }}: 
{% if p.last contains "https://" %}UPLOADED{%else%} {{ p.last }}{%endif%}
</span>
                        {% endunless %}
                      {% endfor %}
                      
                      </td>


                      <td style="width=10%;">{{ line_item.quantity }} </td>
       
        <td style="width=10%;">{{ line_item.price | money }}</td>
        <td style="width=10%;">{{ line_item.line_price | money }}</td>
      </tr>
    {% endfor %}

I added an If statment checking if the line property contains "https://".  Assuming only uploaded files will have this, we can display "UPLOADED".

I hope that helps!

Hire Me! - I am available to customize your Shopify store.
0 Likes

Hi Laurie,

If you want to continue showing the actual URL in the document, instead of just the "UPLOADED" text per Brendin's (useful) answer, you could do this instead:

Change this part of your code:

<br><span style="font-size: 88%">{{ p.first }}: {{ p.last }}</span>

To this instead:

<br><span style="font-size: 88%; word-wrap: break-word">{{ p.first }}: {{ p.last }}</span>

So the only difference being is that you apply some CSS that tells the browser that it's ok to break the long URL onto multiple lines to fit the space.

Hope it helps.

Bjorn

Bjorn Forsberg
Chief Eternal Optimist
Order Printer Templates app

Bjorn Forsberg | FORSBERG+two | Award-winning Shopify Apps since 2011
0 Likes
Hemant_Chauhan
Shopify Partner
17 0 2

Hi Laurie O Neill,

I really liked your code.

Actually i have a pre printed stationary for invoice can you please edit this code so i can get void header minimum where the shipping method shown.and than the shop details ,date,invoice,payment,shipping details are shifted below the void space.

Also i want two coloumns First one is seria no. "S.NO." just before item and second is "TAX" just after the Price tab which include the % VAT of a single product.The tax coloumn should show per item VAT % like i have three categories product 14.5%,5,5% and 12.5% tax %.so,this tax column should show these vat % details of per product.

Please help me i will be very thankful.

 

0 Likes
Hemant_Chauhan
Shopify Partner
17 0 2
<div style="margin-Top:10%;">

<table class="table-tabular" style="margin: 0 0 1.5em 0; border:none;">

<tr style="border-bottom:none;"><td style="border-bottom:none; width:65%;">
<strong style="font-size: 1.7em;"><div style="float: left; margin: 0 0 1.5em 0;" >
<strong>
  <p> TIN NO: 08631601191 </u></p>
  </td>
  <td style="border-bottom:none; width:35%;">
  Date: {{ "now" | date: "%m/%d/%y" }}<br />
  Invoice: {{ order_name }}<br />
  Payment Method: {% for transaction in transactions %}
                  {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                    {% if transaction.payment_details.credit_card_number %}
                      {{ transaction.payment_details.credit_card_company }}
                    {% else %}
                      {{ transaction.gateway }}{% break %}
                    {% endif %}
                  {% endif %}
                {% endfor %}<br />
                 Shipping: {{ shipping_method.title }}
                 </td>
                 </tr>
                 </table>
  

<hr style="margin-top:2px; margin-bottom:4px;"/>

  <table class="table-tabular" style="margin: 0 0 0.5em 0; border:none;">
  <tr style="border-bottom:none;">
  <td valign="top" style="border-bottom:none;">

  
  <b>SHIP TO:</b></td><td valign="top" style="border-bottom:none;">
    <strong>{{ shipping_address.name }}</strong><br/>
    {% if shipping_address.company %}
      {{ shipping_address.company }}<br/>
    {% endif %}
    {{ shipping_address.street }}<br/>
    {{ shipping_address.city }}
    {{ shipping_address.province_code }}
    {{ shipping_address.zip | upcase }}<br/>
    {{ shipping_address.country }}<p>
    {{ email }}<br />
    {{ shipping_address.phone }}
  
</td>
  <td valign="top" style="border-bottom:none;">

<b>BILL TO:</b></td><td valign="top" style="border-bottom:none;">
    <strong>{{ billing_address.name }}</strong><br/>
    {% if billing_address.company %}
      {{ billing_address.company }}<br/>
    {% endif %}
    {{ billing_address.street }}<br/>
    {{ billing_address.city }}
    {{ billing_address.province_code }}
    {{ billing_address.zip | upcase }}<br/>
    {{ billing_address.country }}
    </td>
    </tr>
  
    </table>
  

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <thead>
    <tr>
      <th style="width=60%;">Product Name</th>
      <th style="width=10%;">Quantity</th>
      <th style="width=10%;">Price</th>
      <th style="width=10%;">Total</th>
          {% if show_line_item_taxes %}
      <th style="width=10%;">VAT%</th>
      {% endif %}
      <th><th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in line_items %}
      <tr>
        
          <td style="width=60%;">
        
         {% if line_item.sku != blank %} {{ line_item.sku }} -  {% endif %}{{ line_item.title }}
                      {% for p in line_item.properties %}
                        {% unless p.first == "builder_id" or p.first == "builder_info" or p.first == "master_builder" or p.last == "" or p.last == blank %}
                          <br><span style="font-size: 88%">{{ p.first }}: {{ p.last }}</span>
                        {% endunless %}
                      {% endfor %}
                      
                      </td>


                      <td style="width=10%;">{{ line_item.quantity }} </td>
       
        <td style="width=10%;">{{ line_item.price | money }}</td>
        <td style="width=10%;">{{ line_item.line_price | money }}</td>
         
         <td style="width=10%;">
        
         {% if line_item.tax_lines %}
            {% for tax_line in line_item.tax_lines %}
          {{ tax_line.rate }}
          {% endfor %}
          </td>
          {% endif %}
          <th><th>
   </tr>
     {% endfor %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h3 style="margin: 0 0 1em 0;">Transaction Details</h3>
  <table class="table-tabular" style="margin: 0 0 1.5em 0;">
    <thead>
      <tr>
        <th>Type</th>
        <th>Amount</th>
        <th>Kind</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for transaction in transactions %}
        <tr>
          <td>{{ transaction.gateway | payment_method }}</td>
          <td>{{ transaction.amount | money }}</td>
          <td>{{ transaction.kind }}</td>
          <td>{{ transaction.status }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

<div style="margin-left:40%;">

<table class="table-tabular" style="margin: 0 0 1.5em 0;">
  <tr>
    <td style="width:85%;">Subtotal price:</td>
    <td style="width:15%;">{{ subtotal_price | money }}</td>
  </tr>
  {% for discount in discounts %}
  <tr>
    <td>Includes discount "{{ discount.code }}"</td>
    <td>{{ discount.savings | money }}</td>
  </tr>
  {% endfor %}
  <tr>
    <td>Tax:</td>
    <td>{{ tax_price | money }}</td>
  </tr>
  {% if shipping_address %}
    <tr>
      <td>Shipping: {{ shipping_method.title }}</td>
      <td>{{ shipping_price | money }}</td>
    </tr>
  {% endif %}
  <tr>
    <td><strong>Total price:</strong></td>
    <td><strong>{{ total_price | money }}</strong></td>
  </tr>
  {% if total_paid != total_price %}
    <tr>
      <td><strong>Total paid:</strong></td>
      <td><strong>{{ total_paid | money }}</strong></td>
    </tr>
    <tr>
      <td><strong>Outstanding Amount:</strong></td>
      <td><strong>{{ total_price | minus: total_paid | money }}</strong></td>
    </tr>
  {% endif %}
</table>
</div>

{% if note %}
  <p><strong>Note:</strong> {{ note }}</p>
{% endif %}


 {% for attribute in attributes %}
<b>{{ attribute | first }}:</b> <span style="font-weight:normal; color:#000000;">{{ attribute | last }}</span><br>
{% endfor %}

<hr/>
<div style="text-align:center;"><span style="font-size: 1.5em;"><b>THANKS FOR ORDERING!</b></span></div>

Hi,

I have edited code.The tax rate is now showing in % also i want a serial number tab just before the item name.

0 Likes
Huda-HN
New Member
8 0 0

@Laurie_ONeill 

Thank you a lot , look great 

can you help with template where weight of the products are added , the tax section removed.

 

0 Likes