Re: Updated to new version of Order Printer, shipping method not on invoices

JasperPine · ‎05-17-2024

Hi, I updated to the new version of order printer since the legacy version is being phased out.

Now the shipping service is not displayed on the invoice (as it used to be in the previous version).

I tried using order.shipping_method and shipping_method but neither works.

Code I am using is below this message.

Using order.shipping_method results in "ShippingLineDrop" being displayed.

Using shipping_method leaves the field blank.

Can someone please help ? 🙂

Thank you,

tr>
<td colspan="3" style="text-align: right;">Shipping: {{ order.shipping_method }} </td>
<td style="text-align: right;">{{ order.shipping_price | money }}</td>
</tr>

MakP · ‎05-17-2024

I had issues with this also but I believe I figured it out. Give this a shot:

<td colspan="3" style="text-align: right;">Shipping: {{ order.shipping_methods[0].title }}</td>

Hope this helps.

JasperPine · ‎05-17-2024

Thank you but when I use your code, I get a syntax error:

[image: image.png]

MakP · ‎05-17-2024

Whoops. Looks like I put a parenthesis instead of a curly brace. Try this:

<td colspan="3" style="text-align: right;">Shipping: {{ order.shipping_methods[0].title }}</td>

mina1roshdy · ‎05-18-2024

Hi MakP, can you help me please, i have the same issue but with more details not appearing in the updated Printer App.

{% assign totalProductsOrdered = 0 %}
{% for line_item in line_items %}
{% assign totalProductsOrdered = totalProductsOrdered | plus: line_item.quantity %}
{% endfor %}
<h2 style="float: center; text-align: center; margin: 0 0 0 0;"></h3>
{% if shipping_address %}
<h2 style="float: center; text-align: center; margin: 0 0 0 0;"></h3>
<div style="float: left; text-align: center; margin: 0 0 0 0; padding: 0; border: 1px solid black;">
</div>

<div style="float: right; text-align: center; margin: 0 0 0 0; padding: 0; border: 1px solid black;">
{{ "now" | date: "%d/%m" }}-{{ shipping_line.current_price | money_without_currency | money_no_decimals }}
<br/>
{{ customer.orders_count }}{{ shipping_address.province_code }}{{ order_number }}
</div>

<div style="float: left; text-align: center; margin: 0 0 0 0; padding: 0; border: 1px solid black;">
غير مسموح <br/> الفتح او التجربة
</div>

<div style="float: left; text-align: center; margin: 0 0 0 0; padding: 3; border: 3px solid black;">
<strong> {{ total_price | minus: total_paid | money_without_currency | money_no_decimals }} </strong>
<br/> فقط لا غير
</div>

<div style="float: right; text-align: center; margin: 0 0 0 0; padding: 1; border: 2px solid black;">
<strong> {{ shipping_address.province }} <br/> {{ shipping_address.city }} </strong>
</div>

<div style="float: center; text-align: center; margin: 0 0 0 0; padding: 0; border: 1px solid black;">
<strong> {{ shipping_address.name }}</strong> <br/>
<strong> {{ shipping_address.phone }} </strong>
</div>

<div style="float: center; text-align: center; margin: 0 0 0 0; padding: 0; border: 1px solid black;">
<h2 style="float: center; text-align: center; margin: 0 0 0 0;"> </h2>
{{ shipping_address.street }}
</div>

{% endif %}

MakP · ‎05-20-2024

Looks like the new order printer doesn't like float styling so I converted it to a table instead of individual divs. It doesn't look exactly the same as the screenshot you uploaded, but hopefully it's close enough that you'll be able to modify it from here.

{% assign totalProductsOrdered = 0 %}
{% for line_item in line_items %}
{% assign totalProductsOrdered = totalProductsOrdered | plus: line_item.quantity %}
{% endfor %}
{% if order.shipping_address %}

<table style="width: 100%;">
    <tr>
        <td style="border: 1px solid black; text-align: center">
            غير مسموح <br /> الفتح او التجربة
        </td>
        <td style="border: 3px solid black; text-align: center">
            <strong> {{ order.total_price | minus: order.total_paid | money_without_currency | money_no_decimals }} </strong>
            <br /> فقط لا غير
        </td>
        <td style="border: 1px solid black; text-align: center">
            <strong> {{ order.shipping_address.name }}</strong> <br />
            <strong> {{ order.shipping_address.phone }} </strong>
        </td>
        <td style="border: 3px solid black; text-align: center">
            <strong> {{ order.shipping_address.province }} <br /> {{ order.shipping_address.city }} </strong>
        </td>
        <td style="border: 1px solid black; text-align: center">
            {{ "now" | date: "%d/%m" }}-{{ order.shipping_price | money_without_currency | money_no_decimals }}
            <br />
            {{ customer.orders_count }}{{ order.shipping_address.province_code }}{{ order.order_number }}
        </td>
    </tr>
    <tr>
        <td style="border: 1px solid black; text-align: center;" colspan="5">
            {{ order.shipping_address.street }}
        </td>
    </tr>
</table>

{% endif %}

AHowes · ‎06-24-2024

Thank you for this tip. It worked for me.

francovanvuuren · ‎05-21-2024

Excellent, thanks!

JasperPine · ‎05-21-2024

The new version of order printer does not seem to recognize font styling
commands.

The original version, below is what I am shooting for:

[image: C1.JPG]

In the updated version the font is too small especially when printed and
the lines are too thin.

[image: C2.JPG]

I pasted the code for my template below, could you please look at it and
tell me how to make the font larger and the lines thicker like in the first
image?

Thank you

DrillBitsUnlimited.com

Invoice

Order {{ order.order_name }}

{% if order.po_number %}PO # {{ order.po_number }}
{% endif %}
{{ "now" | date: "%B %e, %Y" }}

From

{{ shop.name }}

{{ shop.address | format_address }}
{% if shop.phone %}{{ shop.phone }}{% endif %}

{% if order.billing_address %}

Bill to
{{ order.billing_address | format_address }}

{% endif %}
{% if order.shipping_address %}

Ship to
{{ order.shipping_address | format_address }}
{% if order.shipping_address.phone %}{{ order.shipping_address.phone
}}{% endif %}

{% endif %}

Order Details

Qty
Sku
Item
Price

{% for line_item in order.line_items %}

{% endfor %}

{% for discount in order.discounts %}

{% endfor %}

{% if order.shipping_address %}

{% endif %}

{% if order.net_payment != order.total_net_amount %}

{% endif %}
{% if order.total_refunded_amount > 0 %}

{% endif %}
{% if order.net_payment != order.total_net_amount %}

{% endif %}

{{ line_item.quantity }}	{{ line_item.sku }}	{{ line_item.title }}	{% if line_item.original_price != line_item.price %} {{ line_item.original_price \| money }} {% endif %} {{ line_item.price \| money }}
Subtotal	{{ order.subtotal_price \| money }}
Includes discount {% if discount.code %}"{{ discount.code }}"{% endif %}	{{ discount.savings \| money }}
Tax	{{ order.tax_price \| money }}
Shipping: {{ order.shipping_methods[0].title }}	{{ order.shipping_price \| money }}
Total	{{ order.total_price \| money }}
Total Paid	{{ order.net_payment \| money }}
Total Refunded	{{ order.total_refunded_amount \| money }}
Outstanding Amount	{{ order.total_price \| minus: order.net_payment \| money }}

{% if transactions.size > 1 %}

Transaction Details

Type
Amount
Kind
Status

{% for transaction in transactions %}

{% endfor %}

{% endif %}

{% if order.note %}

Note

{% endif %}

If you have any questions, please send an
email to Jason at {{ shop.email }}

MakP · ‎05-21-2024

Hey JasperPine - I'd like to help you, but first could you reply to this message and copy/ paste your template code into a code block? You can do this by clicking the the button with 3 dots, then clicking the "Insert/Edit code sample" button (Looks like this: "</>").

JasperPine · ‎05-21-2024

      <h1>DrillBitsUnlimited.com</h1>
<div>
  <div class="columns">
    <h1>Invoice</h1>
     <div>
      <p style="text-align: right; margin: 0;">
      Order {{ order.order_name }}<br />
      {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
      {{ "now" | date: "%B %e, %Y" }}
    </p>
  </div>
</div>
<div class="columns" style="margin-top: 1.5em;">
  <div class="address">
    <strong>From</strong><br/>
    {{ shop.name }}<br/>
    {{ shop.address | format_address }}
    {% if shop.phone %}{{ shop.phone }}{% endif %}
  </div>
  {% if order.billing_address %}
  <div class="address">
    <strong>Bill to</strong>
    {{ order.billing_address | format_address  }}
  </div>
  {% endif %}
  {% if order.shipping_address %}
  <div class="address">
    <strong>Ship to</strong>
    {{ order.shipping_address | format_address  }}
    {% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
  </div>
  {% endif %}
</div>
<hr />
<h2>Order Details</h2>
<table class="table-tabular" style="margin: 1em 0 0 0;">
  <thead>
    <tr>
      <th>Qty</th>
      <th>Sku</th>
      <th>Item</th>
      <th style="text-align: right;">Price</th>
    </tr>
  </thead>
  <tbody>
    {% for line_item in order.line_items %}
      <tr>
        <td>{{ line_item.quantity }}</td>
        <td>{{ line_item.sku }}</td>
        <td>{{ line_item.title }}</td>
        <td style="text-align: right;">
          {% if line_item.original_price != line_item.price %}
            <s>{{ line_item.original_price | money }}</s>
          {% endif %}
          {{ line_item.price | money }}
        </td>
      </tr>
    {% endfor %}
    <tr>
      <td colspan="3" style="text-align: right;">Subtotal</td>
      <td style="text-align: right;">{{ order.subtotal_price | money }}</td>
    </tr>
    {% for discount in order.discounts %}
    <tr>
      <td colspan="3" style="text-align: right;">Includes discount {% if discount.code %}"{{ discount.code }}"{% endif %}</td>
      <td style="text-align: right;">{{ discount.savings | money }}</td>
    </tr>
    {% endfor %}
    <tr>
      <td colspan="3" style="text-align: right;">Tax</td>
      <td style="text-align: right;">{{ order.tax_price | money }}</td>
    </tr>
    {% if order.shipping_address %}
      <tr>
        <td colspan="3" style="text-align: right;">Shipping: {{ order.shipping_methods[0].title }} </td>
        <td style="text-align: right;">{{ order.shipping_price | money }}</td>
      </tr>
    {% endif %}
    <tr>
      <td colspan="3" style="text-align: right;"><strong>Total</strong></td>
      <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
    </tr>
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td colspan="3" style="text-align: right;">Total Paid</td>
        <td style="text-align: right;">{{ order.net_payment | money }}</td>
      </tr>
    {% endif %}
    {% if order.total_refunded_amount > 0 %}
      <tr>
        <td colspan="2" style="text-align: right;">Total Refunded</td>
        <td style="text-align: right;">{{ order.total_refunded_amount | money }}</td>
      </tr>
    {% endif %}
    {% if order.net_payment != order.total_net_amount %}
      <tr>
        <td colspan="3" style="text-align: right;"><strong>Outstanding Amount</strong></td>
        <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money }}</strong></td>
      </tr>
    {% endif %}
  </tbody>
</table>

{% if transactions.size > 1 %}
  <h2>Transaction Details</h2>
  <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 %}

{% if order.note %}
<h2>Note</h2>
<p>{{ order.note }}</p>
{% endif %}

<p style="margin-bottom: 0;">If you have any questions, please send an email to Jason at <u>{{ shop.email }}</u></p>

Thank you, code is above.

I appreciate your help!

MakP · ‎05-21-2024

Give this a shot. At the top of the template I added some CSS rules that should make it easy to change the font size of certain elements. For example: If you wanted to make the font size of the address line bigger - You would change the ".address" style from "font-size: 12px;" to "font-size: 14px;".

<style>
    .order-num-and-ship-date {
        /* Order number and ship date styling */
        font-size: 14px;
    }

    .address {
        /* Address info styling */
        font-size: 12px;
    }

    .table-tabular {
        /* Line item info styling */
        font-size: 14px;
    }
</style>

<h1>DrillBitsUnlimited.com</h1>
<div>
    <div class="columns">
        <h1>Invoice</h1>
        <div>
            <p class="order-num-and-ship-date" style="text-align: right; margin: 0;">
                Order {{ order.order_name }}<br />
                {% if order.po_number %}PO # {{ order.po_number }}<br />{% endif %}
                {{ "now" | date: "%B %e, %Y" }}
            </p>
        </div>
    </div>
    <div class="columns" style="margin-top: 1.5em;">
        <div class="address">
            <strong>From</strong><br />
            {{ shop.name }}<br />
            {{ shop.address | format_address }}
            {% if shop.phone %}{{ shop.phone }}{% endif %}
        </div>
        {% if order.billing_address %}
        <div class="address">
            <strong>Bill to</strong>
            {{ order.billing_address | format_address }}
        </div>
        {% endif %}
        {% if order.shipping_address %}
        <div class="address">
            <strong>Ship to</strong>
            {{ order.shipping_address | format_address }}
            {% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
        </div>
        {% endif %}
    </div>
    <hr />
    <h2>Order Details</h2>
    <table class="table-tabular" style="margin: 1em 0 0 0;"">
<thead>
    <tr>
    <th>Qty</th>
    <th>Sku</th>
    <th>Item</th>
    <th style=" text-align: right;">Price</th>
        </tr>
        </thead>
        <tbody>
            {% for line_item in order.line_items %}
            <tr>
                <td>{{ line_item.quantity }}</td>
                <td>{{ line_item.sku }}</td>
                <td>{{ line_item.title }}</td>
                <td style="text-align: right;">
                    {% if line_item.original_price != line_item.price %}
                    <s>{{ line_item.original_price | money }}</s>
                    {% endif %}
                    {{ line_item.price | money }}
                </td>
            </tr>
            {% endfor %}
            <tr>
                <td colspan="3" style="text-align: right;">Subtotal</td>
                <td style="text-align: right;">{{ order.subtotal_price | money }}</td>
            </tr>
            {% for discount in order.discounts %}
            <tr>
                <td colspan="3" style="text-align: right;">Includes discount {% if discount.code %}"{{ discount.code
                    }}"{% endif %}</td>
                <td style="text-align: right;">{{ discount.savings | money }}</td>
            </tr>
            {% endfor %}
            <tr>
                <td colspan="3" style="text-align: right;">Tax</td>
                <td style="text-align: right;">{{ order.tax_price | money }}</td>
            </tr>
            {% if order.shipping_address %}
            <tr>
                <td colspan="3" style="text-align: right;">Shipping: {{ order.shipping_methods[0].title }} </td>
                <td style="text-align: right;">{{ order.shipping_price | money }}</td>
            </tr>
            {% endif %}
            <tr>
                <td colspan="3" style="text-align: right;"><strong>Total</strong></td>
                <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
            </tr>
            {% if order.net_payment != order.total_net_amount %}
            <tr>
                <td colspan="3" style="text-align: right;">Total Paid</td>
                <td style="text-align: right;">{{ order.net_payment | money }}</td>
            </tr>
            {% endif %}
            {% if order.total_refunded_amount > 0 %}
            <tr>
                <td colspan="2" style="text-align: right;">Total Refunded</td>
                <td style="text-align: right;">{{ order.total_refunded_amount | money }}</td>
            </tr>
            {% endif %}
            {% if order.net_payment != order.total_net_amount %}
            <tr>
                <td colspan="3" style="text-align: right;"><strong>Outstanding Amount</strong></td>
                <td style="text-align: right;"><strong>{{ order.total_price | minus: order.net_payment | money
                        }}</strong></td>
            </tr>
            {% endif %}
        </tbody>
    </table>

    {% if transactions.size > 1 %}
    <h2>Transaction Details</h2>
    <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 %}

    {% if order.note %}
    <h2>Note</h2>
    <p>{{ order.note }}</p>
    {% endif %}

    <p style="margin-bottom: 0;">If you have any questions, please send an email to Jason at <u>{{ shop.email }}</u></p>

You can additionally adjust specific elements using inline styles. For example: If you wanted to increase the size of only the Total row, you could change just that row from this:

<tr>
   <td colspan="3" style="text-align: right;"><strong>Total</strong></td>
   <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
</tr>

To this:

<tr style="font-size: 16px;">
   <td colspan="3" style="text-align: right;"><strong>Total</strong></td>
   <td style="text-align: right;"><strong>{{ order.total_price | money }}</strong></td>
</tr>

JasperPine · ‎05-21-2024

Thank you, that is much better!

How can I increase the line weight of the order details table? They are too faint.

Thanks again,

Jason

MakP · ‎05-21-2024

You can add a font-weight style such as "font-weight: bold;" to the .table-tabular css block:

    .table-tabular {
        /* Line item info styling */
        font-size: 14px;
        font-weight: bold;
    }

JasperPine · ‎05-21-2024

Thanks Mak, but I meant the lines of the table are too thin, not the text. Please see image:

MakP · ‎05-21-2024

Ah, gotcha. You can add this to the top of your template (inside the <style> tags):

tr {
   border: 2px solid black;
}

If it's too dark you can always change "black" to something else.

JasperPine · ‎05-21-2024

I hate to keep bugging you,

it made the outside border thick which is good. But I also wanted all the horizontal lines bold as well:

Thank you 🙂

MakP · ‎05-21-2024

Odd, it seems to be working for me...

Alright. Disregard my last message - Just completely delete that small css block of code I gave you in the last reply and put this in it's place:

    table.table-tabular td,
    table.table-tabular th {
        border-bottom: 1px solid black;
    }

That should give you the inside lines.

For the outside border, you'll need to modify the .table-tabular block I gave you earlier. Change ".table-tabular" to "table.table-tabular", then add this inside the curly braces: "border: 1px solid black;". My whole block looks like this, for example:

    table.table-tabular {
        /* Line item info styling */
        font-size: 14px;
        font-weight: bold;
        border: 1px solid black;
    }

Give that a shot and see what happens.

JasperPine · ‎05-21-2024

Perfect! Thank you so much for your help. You're a lifesaver!

AHowes · ‎06-24-2024

I'd also like to have this put back on the invoice. How am I to know which shipping method is chosen unless I go back to the order online? I've tried adding the same code from the legacy version to the new version but it doesn't fetch the method.