Video outline

The liquid editor is where you will write out your code that builds up your template. When you create a template on firm level this is the white square you see on the bottom where you can enter the code. It makes writing and reading the code easier by differentiating the different elements with color and some other built-in functionality.

Let’s have a closer look at all of the functionalities the Silverfin liquid editor has.

Parts

The first thing that you see in the liquid editor are the parts. The parts allow you to structure your code better & also avoid repetitive coding. You can divide your code into logical sections and put each section in a different part. This way the code will be less overwhelming.

The main part will always loaded be first and the code that you added to the additional parts will only be rendered when you use the include tag in the main part of the code. The position of the include tag in the main part is very important because the code is executed from top to bottom. You could also add some logic around the include tags so that this part of the code is only rendered when a certain condition is fulfilled.

Some best practices when you are working with parts:

• Part 1 should always be used to add the translations.
• When your code exists out of multiple calculations, consider to add them in an additional part.
• Use a part if the same piece of code needs to be executed multiple times. You can make reference to that same part multiple times int the main part of your code.
• When using different parts, we recommend only using small letters, numbers and underscores for part names. Please also make sure that the name of the part is different from that of any other variable used in your code

Shortcuts for layout

At the top of the liquid editor you’ll find some shortcuts to quickly add formatting to your code.
You can just select the text you want to format and then click on the bold, cursive or underline symbol. Clicking on the bulleted list or numbered list symbol will provide you with a first item to start your list. Clicking on the table symbol will give you a basic table layout.

Diff viewer

The diff viewer will compare the code to the previously saved version.
This function creates a view where you easily see which lines of code have changed, and how they changed.

Verify function

With the 🐞 functionality you can verify that your code does not contain errors and meets the coding guidelines. In the example below you see we get a warning on line 1 that we’ve used a tag “unexplained” that is no longer in use and has been replaced with “unreconciled”. Other examples of warnings that will pop up with the verify-functionality are tags that haven’t been closed properly, unsafe variable names etc.

Autocompleted tags

Something that will save you loads of time when coding in the liquid editor is using the functionality to autocomplete tags.
You can use this by typing the name of the tag you want to use and pressing tab. That will automatically give you the entire syntax that needs to be used for that tag. For example you just type the word assign in the editor then click tab and the entire syntax for the assign-tag will pop up in the editor.

Find and replace

You can type the shortcut cmd+F or ctrl+f anywhere in the liquid editor to open up a find dialog that will find any text you wish to find within the editor. Clicking the + sign in the find dialog allows you to also find and replace text within the liquid editor.