Template Bootcamp

Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 654 moderator
edited September 2020 in Tips, Tricks & How-to’s
Welcome to the Lightspeed Retail Template Bootcamp!

Here is where I'm going to show you a little bit about that magical thing software engineers and developers call "code".

This is for the interested, the adventurous and the generally curious.

Let's begin:

The world is run by code and your printed templates aren’t any exception to that rule. What we see on paper might just look like text, lines and images, but that finished product we enjoy is really a complex work of engineering born from the mind of passionate and careful minded individuals.

Here is a snapshot of one part of our receipt template:

But for now, I want us to think of code as a recipe. A set of instructions to accomplish something.
Think of baking a cake. You might need:

- Butter
- Sugar
- Eggs
- Self Raising Flour

This recipe, used correctly within an environment such as an oven, can help us make a lovely dessert.
Used incorrectly produces the things that nightmares are made of.
Baking isn’t rocket science, but a professional baker can do things that the amateur adventurist couldn’t dream of.
The same can be said of coding.

If you are a business, you might feel that the standard printed templates offered require some tweaking to fit your needs. You could of course make simple changes with your pen…OR you can allow the computer to do the work for you. This of course is simpler than it sounds

How we talk to computers:

Within our toolkit is something called web languages, both programmatic and markup languages. This is how we communicate with our computer to tell it to do our bidding. A firm grasp of these languages enable you to describe to the computer what you want to achieve.

The languages of the web are:

Hyper-Text Markup Language- HTML
Cascading Style Sheets - CSS
Javascript - JS

We use these languages to accomplish what we want on the web. This is good news since Lightspeed Retail is a web application!

Within Lightspeed we also use something called “Twig”. This is a template engine. Think of this as your “oven” from which we can put our ingredients into in order to make our cake, i.e. our receipt/form etc

I’m going to briefly describe how to “speak” these languages so we can make the computer do our bidding. These guides won’t make you a masterchef but they will on a basic help you understand how web works work and give you perspective behind common requests.

These tutorials will be divided into four parts

1. HTML - We use to control the structure and content of the web (content)
2. CSS - We use to control the look and feel of the web (design)
3. Javascript - We use to make the web interactive (programming)
4. Twig - The template Engine used for the templates
5. Practical Example- Understand the basics about the Lightspeed receipt template

Post edited by Adrian Samuel on

Adrian Samuel

Software Developer

Lightspeed HQ


  • onlinepenguinonlinepenguin Member Posts: 20

    great where do i find the tutorials for twig and a practical example

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

    Click on the links above, they’re in red :)

    Adrian Samuel

    Software Developer

    Lightspeed HQ

  • dougfastfixdougfastfix Member Posts: 21 ✭

    Adrian ,

    Really good series. I have gone thru it twice now.

    Question: within a template, can we add a pointer to a separate CSS file? I think this would help us build a much richer receipt.


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

    Hey @dougfastfix, I'm glad to hear that!

    Whilst you can't put a link into a separate HTML page the traditional way, you can write a script to load a css file if its hosted elsewhere using Javascript

    If you have a a CI/CD pipeline setup you could use github (or another version control tool) to help re-deploy the latest version of your .css file without touching your template in Retail

    Adrian Samuel

    Software Developer

    Lightspeed HQ

Sign In or Register to comment.