Printable Invoice looks like it lost it's mind

[lesliekirk]

I was looking at the printable invoice from the INVC (after a store owner sent me screenshots of what he saw) and indeed it's a mess. It looks like the CSS is missing. There is content overlaying content - it looks like it a combination of the INVC page content AND the printer_friendly_content instead of just being the printer_friendly_content

The INVC screen doesn't seem to have any sort of conditional to display just that content based on the last few lines of the template

 </section>

<mvt:item name="hdft" param="global_footer" />
<mvt:item name="ga_transaction" />
</div>
<mvt:item name="printer_friendly_content" />
</body>
</html>

[Matt Zimmermann]

Hi Leslie,

Check to see that your styles are loading correctly. The printer friendly content is controlled via the print style sheet.

[lesliekirk]

Hi Leslie,

Check to see that your styles are loading correctly. The printer friendly content is controlled via the print style sheet.

How can I test it? It goes straight to my printer window.

[Matt Zimmermann]

Hi Leslie,

The same code is in place on the order status page, so I would test there to see what might be happening.

[Bruce - PhosphorMedia]

https://developers.google.com/web/to.../print-preview

[lesliekirk]

https://developers.google.com/web/to.../print-preview

Will that preview the "custom" layout for the INVC screen?

[Bruce - PhosphorMedia]

yes, it should. another method I've used (on PC its easier than inspector--but maybe not as accurate) is installing a PDF printer, or looking for a printer that has a good preview function when you click Print) YMMV

[lesliekirk]

yes, it should. another method I've used (on PC its easier than inspector--but maybe not as accurate) is installing a PDF printer, or looking for a printer that has a good preview function when you click Print) YMMV

Took a little paying attention to what I was reading. I can now see the page in print view. I am seeing @media print style being used but I'm also still seeing the entire HTML page (@media HTML)

It's like it needs some sort of main {display: none;} to rid the page of all the screen content so the print content displays.

[Bruce - PhosphorMedia]

I often times will use a simple @media rule of display:none (.noPrint) because 80% of our clients want just a B&W text invoice for their customers.

[lesliekirk]

I often times will use a simple @media rule of display:none (.noPrint) because 80% of our clients want just a B&W text invoice for their customers.

Don't you think that these styles would/should have already been in the default Colossus?

[Bruce - PhosphorMedia]

might/should...but i like simple.

[lesliekirk]

might/should...but i like simple.

True, but this still needs to be figured out before I start added my touches to it, especially if it's not behaving as expected.

[Matt Zimmermann]

Hi Leslie,

Colossus does ship with the print styles in place [ https://github.com/mivaecommerce/rea...ties/print.css ]. Does your order status page work as expected?

[lesliekirk]

Hi Leslie,

Colossus does ship with the print styles in place [ https://github.com/mivaecommerce/rea...ties/print.css ]. Does your order status page work as expected?

Sorry for the delay in getting to checking this, yes the Order Status Print Invoice looks perfect. So is there something I should copy over from there? (Bear with me, I'm still brain fogged)

[Matt Zimmermann]

Hi Leslie,

Since Order Status and Invoice are nearly the same, I would compare the code, especially the classes.