Printing tables in Shopify Order Printer

Solved

Printing tables in Shopify Order Printer

mosschop
Visitor
1 0 1

I am in the process of moving my templates from the legacy order printer to the new Shopify Order Printer.

I seem to have everything updated to show it how I want.

The only problem is if I have an order with a lot of items, the table goes onto the second page.

This worked properly before using <tr style="page-break-inside:avoid">, but doesn't work in the new order printer.

 

How can I get it so that the table is split properly when it is too long to fit on one page?

 

Old.jpg

Original order printer.

 

new.jpg

New order printer.

 

Thanks.

  

Accepted Solution (1)
MakP
Shopify Partner
33 9 13

This is an accepted solution.

I received an update from the Shopify Dev team a couple days ago - They informed me they have corrected the issue with page break styles. I have tested both "page-break-inside" and "page-break-after" styles and they seem to be working as expected.

 

My test template for page-break-inside styling:

<table style="border: 1px solid black; width: 100%">
  {% for line_item in line_items %}
    <tr style="height:100px; border: 1px solid black; page-break-inside: avoid;">
      <td>{{ line_item.title }}</td>
    </tr>
  {% endfor %}
</table>

 

Big relief for me that they addressed this issue. While I would have much preferred the app be released without such issues in the first place, I must say I am very satisfied with Shopify support in this circumstance.

View solution in original post

Replies 2 (2)

MakP
Shopify Partner
33 9 13

Wish I could help, but I am unfortunately having a very similar issue with page breaks. I've tried any known method I could find to force page breaks online and none of them seem to have any effect in the new app. I'm no developer, but I'm certainly not a complete novice when it comes to HTML/ CSS, and I cannot find a way to make this work.

 

About an hour ago I sent an email to Shopify support outlining my issue and am waiting for a response. I'll report back if I get anything useful from them, but I don't have much faith honestly. I have run into so many issue with this "updated" version - I would bet money that this is just a limitation of the app itself, and there is no workaround.

 

Incredibly frustrated with this "new" order printer app.

MakP
Shopify Partner
33 9 13

This is an accepted solution.

I received an update from the Shopify Dev team a couple days ago - They informed me they have corrected the issue with page break styles. I have tested both "page-break-inside" and "page-break-after" styles and they seem to be working as expected.

 

My test template for page-break-inside styling:

<table style="border: 1px solid black; width: 100%">
  {% for line_item in line_items %}
    <tr style="height:100px; border: 1px solid black; page-break-inside: avoid;">
      <td>{{ line_item.title }}</td>
    </tr>
  {% endfor %}
</table>

 

Big relief for me that they addressed this issue. While I would have much preferred the app be released without such issues in the first place, I must say I am very satisfied with Shopify support in this circumstance.