Guide to variables

Introduction

In this article, we show through examples how you can access the shop's variables with your own code, in this case with JavaScript and directly in the shop's design files via the template language Smarty. This can be useful if you want to retrieve data for custom solutions, where you want to react to a specific event in the shop or send data to an external service, etc.

Note: This article covers advanced use of the functions of the shop and bridges the gap to our developer's universe. The article assumes that you have insight in Javascript and your browser's developer tools. We link to more in-depth articles at the bottom of the page, so you can delve deeper into the different topics. Remember: We don't support customization of the code in the shopsystem.

How to:

Use the developer tools in the shop to inspect a page. In the browser console, you can quickly see which objects are available for JavaScript and read the values directly.

In this example, we want to know whether the page in question is a product. We can find this out by inserting  window.platform.page.isProduct  to get the value for isProduct that are located in the page object:

If we want to translate the above example into JavaScript, it can be done like this:

We can do the same directly on the Smarty objects by using the "literal" escape sequence as shown here:

The escape sequence causes Smarty to print its value directly in the page's code. Both scripts can be used in the shop's design manager via the"Insert Javascript".

However, if we are working in the shop's design files, the script must be escaped as shown here, as we are working in Smarty:

    {if $page.isProduct }
    {literal}
        
    {/literal}
    {/if}

In the example, we have moved our if-statement to Smarty, as we have direct access to the objects when working in the template files.

Can I get an overview of all variables?

It is possible to display all standard variables that are not inserted using Controllers (which we will cover in the next section). The design template automatically retrieves a range of data that is required for the template to work. It is possible to display this data by inserting the Smarty tag {debug} in the shop's design manager via the "Insert Javascript" function:

    {/literal}{debug}{literal}

The above method displays a pop-up with all variables including the current data for that page:

 

The tag {debug} can also be inserted directly into the template files. Note: Remember to allow pop-ups in your browser when you use the {debug} function. Also make sure that you work on a deactivated copy of the active design to not affect the active design template.

I am missing a variable, what do I do?

If you are missing one or more variables, they can be made available in the template code through a Controller. You can read more about Controllers, Collections and Entities in our Smarty guide for developers.

While many values can be made available on the front end, there will be properties that are not or cannot be exposed on the front end of the shop. For example, it could be the cost price of a product. So even though we can see that the object product contains BuyingPrice, because it is part of the underlying specification, the value will not be readable in the frontend.

Good to know

If you want to know which template your design was originally based on (e.g. it may have been customized and renamed), you can insert  window.platform.template.meta  in the console in your browser. The Meta object DEMO_LINK property contains the name of the original template:

Useful links

• Learn more about Smarty Controllers, Collections and Entitys i vores Smarty guide for udviklere
• Learn more about variables in our Javascript guide for developers