Twig multiple variables and json_encode

Question

First of all I'm pretty new to Twig. I'm using a template system so that users can set some options to customize a template. Something similar like Shopify.

I was wondering if it is possible to grab all the settings and send them to javascript function to handle it further.

Let say a user can set these options:

{{ theme.hide_label }} // option to show/hide a label
{{ theme.label_color }} // option to set a color for the label

I could do something like this and then grab those variables and use them in a js function:

 var hideLabel = '{{ theme.hide_label }}'; //true or false
 var labelColor = '{{ theme.label_color }}'; // #000000

Unfortunatly I have a lot of settings, so this will be a pretty long list.

I've read about json_encode. But how can I group all those settings/options into something usable for a function?

Something like this:

var themeFunctions = {{ theme.label; theme.hidelabel; | t_json | raw }}

I've seen somebody did this for translating a lot of text with Twig:

var translations = {{ 'Add; Wishlist; Information; Add to wishlist;' | t_json | raw }};

And then created a function like so:

function getAjaxTranslation(key) {
  var translation;
  if (translation = eval('translations["' + key + '"]')) {
    return translation;
  }
  return key;
}

Can something similar be done with variables that are not plain text?

ugurerkan · Accepted Answer · 2022-09-17 23:37:43Z

3

You could use json_encode filter with twig.

Data attribute

<body data-theme-setting='{{ theme|json_encode|raw }}'>

Inside script block

<script type="text/javascript">
    var themeSetting = JSON.parse('{{ theme|json_encode|raw }}');
</script>

Hidden input

<input type="hidden" id="themeSetting" value='{{ theme|json_encode|raw }}' />

If you theme variable is plain object you can encode directly, if not or you want to make white list for variables use set and create new variable then encode it.

{% set themeSetting = {
    foo : theme.foo,
    label_color : theme.label_color,
    username: theme.user.name
}|json_encode %}
<body data-theme-setting='{{ themeSetting|raw }}'></body>

Example fiddle

Thanks to @JoelM, this solution has a weak point with content having single quotes. We need to manually escape the single quotes like below to solve this.

{% set themeSetting = {
    foo: "lorem's ipsum dolor's sit",
    label_color : "hello world",
    username: "this text have the ' single quote"
}|json_encode %}
<body data-theme-setting='{{ themeSetting|replace({"'":"\\'"})|raw }}'></body>

Example fiddle

edited Sep 17, 2022 at 23:37

answered Jul 30, 2015 at 9:30

ugurerkan

8008 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel M Over a year ago

this did not work for me, it does not escape double quotes.

ugurerkan Over a year ago

@JoelM Correct, in that case, we need to escape the single quotes manually. You can check this fiddle for an example twigfiddle.com/m4cyyd

john Smith · Accepted Answer · 2015-07-29 17:30:36Z

0

why not passing json to the view ?

controlleraction:

    public function blaAction(){
       $theme= $themegetter->get('it');

        return array(
          "theme"=>$theme,
          "themejson"=> @json_decode(@json_encode($theme),1)
        )
    }

and in js

var themejson = {{themejson}}


console.dir(themejson)
console.log(themejson.label);

answered Jul 29, 2015 at 17:30

john Smith

18k12 gold badges80 silver badges124 bronze badges

Collectives™ on Stack Overflow

Twig multiple variables and json_encode

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related