Lightspeed Template Bootcamp Series (Lesson 5)

Adrian Samuel · May 2018

Understanding our templates

Up till now, we’ve been exploring theoretical examples. Let’s look at something relating to our software. Although Lightspeed doesn’t support any custom template development, customers are free to access and make changes to our default print templates with the help of our partners.

Our repository of template code can here: https://github.com/merchantos/PrintTemplates

In our example, we’re going to have a look at different portions of the receipt template

At the top of the template you will see information that says “Begin Custom Options” and further down you’ll see information that says **End Custom Options**
An example can be seen below:

These are simply variables written in twig with an assigned boolean value of true or false.

The variable is connected to some logic embedded in the heart o the template. Setting it to false, disables the logic, setting it to true enables it. To the right of the variable is displayed an explanation of what that variable will do if changed.

In the image below, we see above that two variables have been assigned a boolean value of false.:

Let’s see what that logic is connected to below:

As we can see, in the CSS portion of the template the variable has a conditional written which has

if the “chrome_right_margin_fix” variable is equal to the boolean value of true, then apply the CSS margin-right: .13in declaration

if the “firefox_margin_fix” variable is equal to the boolean value of true, then apply the CSS margin-right: 25px declaration

CSS can be added/amended to the template from in between the statement {% block extrastyles %} and {% end block extrastyles %}

Let’s look at an example of how a Twig variable is affecting HTML output:
:

So the variable highlighted if set to true displays the discount on each line on the receipt

1. Reading from Line 871 to 873 The template says that if the variable per_line_discount is set to the boolean value of true and is not a gift receipt AND if the discount amount attributed to the line is greater than 0 then display the HTML element with the respective data.

Naturally you might ask, what data can I display on my receipt?

On the firefox browser, login to your Lightspeed Retail account and open a historical receipt or simply make a sale:

You can see where it says .html on the receipt URL. Change that to .json (ensure that is lowercase)

Change to .json. Then hit return on the URL

You’ll get the following output

JSON means javascript object notation.
You can read a tutorial online to go into this further. To access the SaleID key and display it’s value within HTML on the twig template

You would write something like below:

You put the Parent Object with its respective Child Key separated by a period. Example: {{Parent.child}}. Every descendant child key must be separated by a period.

You can quickly find where things are on the template by using the web developer inspector to find elements on the page. Then you can do a quick search through the template file

Here spells the end of the tutorial! If you found these series of short lessons helpful or have particular questions about the tutorial or insights about our templates, please write below so this community of Lightspeeders can grow together!

Previous Lesson

Back to Intro

NSimon102 · October 2018

Thank you for all this information. I've been navigating around in the code for the print templates. Do you have any suggestions on how to change the placement of the store logo? I seem to only change the size and padding in the top placement, but is it possible to move it to the bottom? I'm not a coding expert but trying to customize our receipts to fit a specific letterhead paper. Also, how can you change the code to change the top margin?

Adrian Samuel · October 2018

Hey @NSimon102 yeah for sure! Do you want to take a screenshot of the receipt you currently have and maybe draw some arrows/annotation as to where you want things and I could give some specific suggestions

It's a lot easier that way

NSimon102 · October 2018

Hi Adian, Thank you so much for you help! I really appreciate it! Here is a screenshot with the markups of what we need to change. Any suggestions are greatly appreciated!!!!

Image: https://us.v-cdn.net/6025193/uploads/editor/cp/5cjbjjtlj3ua.png

Adrian Samuel · October 2018

Hey @NSimon102, navigate to Settings > Print Templates > Add the SalesReceipt Template with the following modifications:

Image: https://us.v-cdn.net/6025193/uploads/editor/9v/tv9keh3uo4ry.png

NSimon102 · October 2018

Thank you so much for your help! This made a big difference. Although, the logo is still at the top and isn't responding to ccs hidden display. Any suggestions?

Adrian Samuel · October 2018

Anytime @NSimon102!

Oops I missed that, add this:

.receiptHeader > img {
display: none;
}

Tell me how it goes

NSimon102 · October 2018

I worked!!! Thank you a million times over!!!

NSimon102 · October 2018

Would you also be willing to help me with the code for the label items? We would like to add the manufacturer code under the barcode instead of the system id number. Is this possible?

djmyers · October 2018

How do we check the syntax of the changes we make? I made some changes that are not working but I apparently didn't do something right and it won't print. It defaults to a very basic print layout.

Adrian Samuel · October 2018

@NSimon102 you need to make sure the manufacturer code fits either a EAN-13 or UPC-12 format or I believe it won't work.

Image: https://us.v-cdn.net/6025193/uploads/editor/qu/yv3ksu1kcht9.png

I've included a screenshot from the label template, if you replace the systemSku with

Label.Item.manufacturerSku

If the manufacturer sku is in the format that our barcode library accepts it will show the manufacturer sku there, if not there will be an error image/picture

Adrian Samuel · October 2018

@dimphyroufs there isn't a way within Lightspeed since it's not a development environment.

To fix the issue where it is not making any more changes I recommend you delete your template and copy and paste the core one from our Github repository:

https://github.com/merchantos/PrintTemplates/tree/master/receipt

For CSS,
I would suggest installing a text editor such as https://code.visualstudio.com/ and installing the stylelint package which you can install here:

https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint

I believe HTML linting occurs out of the box with the app

Twig is different. If you want to check your logic of twig templating I would suggest https://twigfiddle.com/

Alternatively you can just use this for CSS

https://jigsaw.w3.org/css-validator/

and this for HTML:

https://validator.w3.org/

Write your code in a text editor and only after you receive valid feedback from these tests do you put your code in your template.

Hope this helps!

djmyers · October 2018

Its difficult to get positive feedback on that code. Even copying the code from the GitHub.com site, there are all kinds of syntax errors when trying to plug into Twigfiddle.com. Having trouble debugging this code.

Adrian Samuel · October 2018

@djmyers because Twig fiddle is there to help handle clearly defined variables etc and not things undefined in a copy and pasted template.

Use Twig fiddle to handle small amounts of logic. Use dummy variables to mock what you are trying to achieve and then insert that same logic back in the template

NSimon102 · November 2018

Hi @Adrian Samuel Thank you for all your help! I am struggling with another coding issue. I'm trying to pull the featured image from a Workorder to print. I've tried several things, including this:

But I'm unable to retrieve an image. Can you help me with this?

ErgoCraigk · February 2019

Hello @Adrian Samuel

I am hoping to do some tricky stuff with our label printer to help with our organization and inventory tracking.

Does anybody know if i create custom fields, can I access those custom fields for printing a label? How different are labels from the receipt considering the receipt is just building a simple web page? I would love to know if its possible before I waste time and risk blowing up my label template. I appreciate anyone's input. Thank you

Adrian Samuel · February 2019

@NSimon102 , this is not accessible from the Workorder Display Template API. You'll need to access the Workorder API. You'll need to program that in

Adrian Samuel · February 2019

@ErgoCraigk, you can't access the custom fields via the template using Twig since its scope is limited. You'll have to make an API request using Javascript and then add those details into the page programmatically.

You're right, just as the receipt is a web page, so is the label template. They're both served by their respective APIs which give you access to dynamic data

ErgoCraigk · February 2019

@Adrian Samuel Thanks for the response. That helps me get started and skip a lot of not knowing whats possible. Thanks again for the help.

donniewalker · November 2019

@Adrian Samuel

"you can't access the custom fields via the template using Twig since its scope is limited. You'll have to make an API request using Javascript and then add those details into the page programmatically."

Would you be able to provide me a sample or a link to discussion where this is discussed in more detail?

I'm needing to add 3 custom fields to an itemLabel.

I would also like to know if there is a way to preview code changes.

Currently, I'm using the print function in Lightspeed Retail to see changes. This is not ideal because of the small preview.

Thanks!