Receipt hide / show on print

jonassmets

Hi All,

I'm trying to customise my work order receipt. As my costumer gets a receipt when he leaves something behind so I made sure that the first part (work order number, shop logo and barcode) is printed twice and the receipt gets cut between the 2. But if you send the receipt as an email, it also shows the 2 logo's which is a bit stupid. Is there a way to make something hide when it gets emailed? 



Other thing I want to do when you email a receipt is to add a survey, its useless to show this on the printed receipt so I need a way to only show this when the receipt is emailed. 

I hope someone can help me with this?

Thanks. 

Adrian Samuel

Hey @jonassmets since you've fiddled around with the template already I will assume you're familiar with code samples and i'll walk you through how you might attempt to do this.

Since the Email template and the Print template are the same (and there isn't a way to target the email client) we'll need to write some code that will enable us to work around these realities. 

Here is an example of a screenshot of how I would do this using a simple static HTML page:


Part 1

In the style tag, there contains two CSS declarations( two classes). 

1. hide - Contains CSS to remover content from the page when attached to HTML
2. show - Contains CSS  to display hidden content on the page when attached to HTML

Part 2

The second header (containing the logo) should appear twice only when printing and not when emailing

- Thus, we should manually add a class onto the header (that has the logo) and attach the hide class to it. This means that the header will be hidden on the email by default.

However since we want it to show when printing, we need to dynamically show this HTML upon print.

We therefore store the header into a variable:

```let header = document.querySelector('#header'); ```

We then use an event listener which is simply code that waits for a specific event to occur before it runs the script inside of it. This is the:

```  window.addEventListener("beforeprint", function(event) {

}```

Inside this we add the class "show" to the header to then display the contents of the hidden Header HTML.

This is the ```header.classList.add('show');``` code

Therefore only when the page is triggered to print will the HTML of the header show.

Part 3

We essentially do the opposite for the survey

The survey should only appear when emailing and not when printing

- Thus, we should manually add the show class onto the HTML that contains the survey. This means that the survey will be shown on the email by default.

However since we want it to be hidden when printing, we need to dynamically hide this HTML upon print.

We therefore store the header into a variable:

```let survey = document.querySelector('#survey); ```

We then use an event listener which is simply code that waits for a specific event to occur before it runs the script inside of it. This is the:

```  window.addEventListener("beforeprint", function(event) {

}```

Inside this we add the class "hide" to the survey to then display the contents of the hidden Survey HTML.

This is the ````survey.classList.add('hide');``` code.

Therefore only when the page is triggered to print, will the HTML of the survey be hidden.


If you're having problems with implementing this, we will recommend you speak to our sales department who can put you in touch with third party web-developers to assist you with this request.

jonassmets

@Adrian_Samuel Thnks Adrian! I think you just made my day. My knowledge of code is extremely limited, I'm just very patient so I do everything with trail and error and some creative thinking. But I'll go true your instructions and see how far I get. Thank you very much. 

I have an other question, is there a way to hide the notes from the end receipt? Thans. 

Adrian Samuel

@jonassmets I'm glad to hear that!

If you follow my instructions with your code base, you should find that it works as intended  

Just so we are on the same page could you take a screenshot showing me an example of the receipt notes so I can confirm what exactly you're talking about.

Adrian Samuel

@jonassmets I was just reviewing my code and how our Retail product is built and it looks like the load event is fired even when the email button is pressed. To counter act this, we want to use to a different event that will only be fired when the page is prompted to print.

The code you put inside will be the same.

A screenshot of this can be seen below:



I've amended the above screenshots and instructions accordingly.