Adding variables & html tags to smarty translation strings in Prestashop

When displaying text, whether it be for your theme, module or simply a front end customization you are working on, the best practice is to use smarty strings to display text rather than hard coding the text. This provides the advantage of being translatable through the back office. Even if your online store targets only a demographic speaking a specific language, it’s worth using this method to display text as it will save you much time in the future should you decide to change course and support multiple languages.

The basic syntax for displaying simple text

If you’re displaying some simple text in your theme template files, this can be achieved by simply inserting the following:

{l s='My Sample text'}

Adding this to any template file within your theme should make it automatically available in the back office for translation (under Localization > Translations). So nothing spectacular happening here. If you are displaying text within a template file belonging to a module you should use the following syntax:

{l s='My Sample text' mod='mymodulename'}

Adding variables to the smarty string

The problem…

In some situations it may be necessary to insert a variable into the string, such as the customer name. The crude way to achieve this (which I have seen on some Prestashop sites) is to split the string into two strings like so:

{l s='You have' mod='mymodulename'} {$points} {l s='in your account'}

This is a less than elegant way of solving the issue, it creates two separate strings to translate and manage in the back office and the other major issue is that the position where the variable appears in the string can vary from language to language.

The solution…

We can use variable placeholders in the string like so:

{l s="You have %d in your account" sprintf=[$points] mod='mymodulename'}

Now you can simply adjust the position of the %d placeholder for each translation in the back office and it’s all managed as one string. If your variable is numeric then use the %d placeholder otherwise if it is text or a combination of text and numbers then you should use the %s placeholder.

Adding more than one variable to the string

This is also not a problem and easy to achieve like so:

{l s="Hello %s, you have %d in your account" sprintf=[$name, $points] mod='mymodulename'}

Just be mindful about the fact that the order in which the placeholders appear in the text must reflect the order in which you state the variables to use in the sprintf portion of the smarty tag.

Displaying HTML tags inside smarty strings

The problem…

The same problem can arise when attempting to wrap parts of some text in html tags, in fact it can get quite messy, consider the following attempt to solve the problem by breaking the text into multiple smarty tags:

{l s="Welcome to" mod='mymodulename'}<a href="http://www.mystore.com">{l s="my store" mod='mymodulename'}</a>

Not an elegant solution and again it gives rise to the same problem of having to manage multiple translations for one piece of text. If you’re wondering why we can’t simply add the html directly in the text, well that does not work neither, Prestashop will not render the html and instead simply output the html as text.

The solution…

Luckily, tags are supported using the following syntax:

{l s="Welcome to [1]my store[/1].  Happy shopping!" tags=['<a href="http://www.mystore.com">'] mod='mymodulename'}

Where [1] and [/1] define the opening and closing tag of the first tag in the tags array we provide as a parameter to the smarty tag. There is no need to supply the end tag in the tags array, this will be taken care of automatically.

Adding multiple html tags

The syntax below demonstrates how multiple tags could be inserted into a smarty text tag:

{l s="Welcome to [1]my store[/1].  [2]Happy shopping[/2]!" tags=['<a href="http://www.mystore.com">', '<strong>'] mod='mymodulename'}

Again, the numeric placeholder used for the tags must match the position of the associated tag in the tags array. For instance, [1] will match the first entry in the tags array and [2] will match the second and so on

Combining html tags and variables

Below is a quick example on how to combine both tags and variables into one smarty translatable text tag:

{l s="Welcome %s to [1]my store[/1].  [2]Happy shopping[/2]!" sprinf=[$name] tags=['<a href="http://www.mystore.com">', '<strong>'] mod='mymodulename'}

The above two features will help you take advantage of Prestashop’s translation system in a clean and easy to manage fashion.

Leave a Reply

Your email address will not be published. Required fields are marked *