How to code html email to print out two separate pages?

A Business Catalyst ecommerce drop shipping order gets sent to the vendor. I want to add a second table that is the Packing Slip the vendor will use when shipping the product to my customer.

Customizing html email that contains two tables. 1. Vendor Drop Shipping Order 2. Vendor Packing Slip

Trying to figure out how to separate the two tables so they will print as two separate pages when recipient get the email.

Solution

I know BC and how its system emails work. In this case you would not be able to generate an attached PDF. (Unless you were to use a third party service that would take an email, convert it to PDF, then email the PDF. I am not aware of any such service off the top of my head.) Here is what you can do.

Start by customizing the Drop Shipping Email. You see the invoice form by default. Create another table that contains the packing slip information. (For a list of tags for the email, see this documentation.)

You then can add styles that when the person prints the page it breaks the email into two pages. For example:

CSS

<style type="text/css">
    /* NOTE: This style tag can go anywhere in the email. */
    @media print {
        .page-break {page-break-after: always;}
    }
</style>

HTML

<!-- Code of Invoice -->

<div class="page-break">&nbsp;</div>

<!-- Code of Packing Slip -->

When this is printed, it should break the top of the email (anything before <div class="page-break"> </div>) into one page, and the rest into a second. However, support for @media print is not very good in email clients, so unfortunately, this won't work in many email clients. You can read this article on @media print in email.

If you know your drop shipper does you one of the email clients that supports @media print in email then give it a try, otherwise ou do have two other options available:

Take the information and manually send it to the drop shipper.
Have the drop shipper print one page and then cut the page in half.

(I know neither are ideal.)