Lightspeed Template Bootcamp Series (Lesson 5)

Adrian SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
edited May 2018 in Tips, Tricks & How-to’s
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! :smile:

Previous Lesson

Back to Intro
Post edited by Adrian Samuel on

Adrian Samuel

API Integrations Consultant - Strategic Solutions

Lightspeed HQ

18 comments

  • NSimon102NSimon102 Posts: 7Member
    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 SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    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

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • NSimon102NSimon102 Posts: 7Member
    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!!!! 
  • Adrian SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    Hey @NSimon102, navigate to Settings > Print Templates > Add the SalesReceipt Template with the following modifications:


    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • NSimon102NSimon102 Posts: 7Member
    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 SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    edited October 2018
    Anytime @NSimon102!

    Oops I missed that, add this:
    .receiptHeader > img {
    display: none;
    }
    Tell me how it goes :)

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • NSimon102NSimon102 Posts: 7Member
    I worked!!! Thank you a million times over!!!
  • NSimon102NSimon102 Posts: 7Member
    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? 
  • djmyersdjmyers Posts: 4Member
    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 SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    edited 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.



    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

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • Adrian SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    @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!

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • djmyersdjmyers Posts: 4Member
    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 SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator
    @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 

    Adrian Samuel

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • NSimon102NSimon102 Posts: 7Member
    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:

    <img height="200" width="200" class="featured" src="/?name=workbench.views.beta_workorder&form_name=view&id=1&tab=details={{Workbench.views.beta.workorder}}">

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

  • ErgoCraigkErgoCraigk Posts: 2Member

    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 SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator

    @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

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • Adrian SamuelAdrian Samuel Posts: 495Moderator, Lightspeed Staff moderator

    @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

    API Integrations Consultant - Strategic Solutions

    Lightspeed HQ

  • ErgoCraigkErgoCraigk Posts: 2Member

    @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.

Sign In or Register to comment.