Lightspeed Template Bootcamp Series (Lesson 5)
Adrian Samuel
Moderator, Lightspeed Staff Posts: 654 moderator
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
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
Post edited by Adrian Samuel on
Adrian Samuel
Software Developer
Lightspeed HQ
26 comments
Adrian Samuel
Software Developer
Lightspeed HQ
Adrian Samuel
Software Developer
Lightspeed HQ
Oops I missed that, add this:
.receiptHeader > img { display: none; }Tell me how it goesAdrian Samuel
Software Developer
Lightspeed HQ
I've included a screenshot from the label template, if you replace the systemSku with
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
Software Developer
Lightspeed HQ
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!
Adrian Samuel
Software Developer
Lightspeed HQ
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
Adrian Samuel
Software Developer
Lightspeed HQ
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
@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
Software Developer
Lightspeed HQ
@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
Adrian Samuel
Software Developer
Lightspeed HQ
@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.
@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!
Hey @donniewalker ,
You may find the information that you are looking for on this discussion:
Pulling custom fields from item details for ItemLabel
Regards
@Adrian Samuel
Hi Adrian, thank you for this post. I am still having a hard time trying to put numbers in front of each item on the receipt ( 'CSS counter' is the name according to my research?). Is there an easier way than me trying to learn this entire coding on my own?
Hey @kaylinkim92,
My pleasure!
There are other ways to do this would which involve significantly more code, but the CSS counters method seems to be the most efficient.
Taking this example:
All you'd need to do is add this code block:
body { counter-reset: section; } .line_description::before { counter-increment: section; content: "" counter(section) ". "; }here: https://github.com/merchantos/PrintTemplates/blob/master/receipt/SaleReceipt.tpl#L106 and it should work!
Let us know how it goes!
Adrian Samuel
Software Developer
Lightspeed HQ
@Adrian Samuel
Hey! thank you so much. I think it is very close to be solved. I added what you suggested and got what I attached below. Might need your magic touch one last time!
Thanks so much
Hey @kaylinkim92,
Have you managed to fix it? It's hard to know what's going wrong by looking at this? Did you start from a fresh template?
Adrian Samuel
Software Developer
Lightspeed HQ
Adrian Samuel
Software Developer
Lightspeed HQ
Is there a way to Create Custom quotes when you reprint a work order so it looks like the original work order when it was created such as this. first one is the one I want to change to look like second one.