Lightspeed Template Bootcamp Series (Lesson 5)
Adrian Samuel
Posts: 425Moderator, Lightspeed Staff 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
18 comments
Oops I missed that, add this:
Tell me how it goes
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
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!
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
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
@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 Thanks for the response. That helps me get started and skip a lot of not knowing whats possible. Thanks again for the help.