Transform boolean data to text in Twig Template

1

Hello there.

In Deliver Theme there are some code lines, in showcase.html.twig that use an script to slide some pictures in the top of page. This script use values between quotation marks, like ‘true’ or ‘false’ (i.e, arrows: {{ theme_config.carousel_options.arrows }}).
I’ve been trying to customize the admin blueprint for theme, and I’ve already configured like this (in this case, to enable or disable arrows in slides):

carousel_options.arrows:
                    type: toggle
                    highlight: 1
                    default: false
                    label: Arrows
                    highlight: 1
                    options:
                        true: PLUGIN_ADMIN.YES
                        false: PLUGIN_ADMIN.NO
                    validate:
                        type: bool

In the .yaml file of theme, the value saved is: arrows: true, without quotation marks. This theme doesn’t work if the true or false values are without quotation marks. In the Chrome Inspector you can see the following:

Selection_031

The arrow value is showed in browser like a number. For that reason it doesn’t work.

What can I do to use toggle field and save as true or false with quotation marks??

Thanks in advance.

2

Hello there.

Finally I managed to solve this issue adding the replace twig filter, in twig template, the following:

arrows: {{ theme_config.carousel_options.arrows|replace({'1':"true",'0':"false"}) }}

For example, if you have in blueprint.yaml, arrows: ‘1’, in carousel of Deliver Theme, this value must be true, therefore you have to convert 1 to true.

I think this is the perfect solution for these cases.
I hope I’ve helped.

Some screenshots:

theme_blueprint.yaml
theme_blueprint.yaml
html code in Chrome Inspector
html_code

3

@pmoreno,

To turn a boolean value into a string you could use the following more straightforward solution:

arrows: {{ site.header_options.arrows ? 'true' : 'false'}},

To prevent the above required conversion, you could define the blueprint field such that it saves data as a string:

carousel_options.arrows:
    type: toggle
    highlight: 1
    default: 'false'
    label: Arrows
    options:
        'true': PLUGIN_ADMIN.YES
        'false': PLUGIN_ADMIN.NO
    validate:
        type: string
4

Hi @pamtbaau.

Thanks for your suggestions, although I can’t get the values to transform correctly, according to your instructions.
Based on the change you suggest in the twig file (arrows: {{ site.header_options.arrows ? ‘true’ : ‘false’}},), the value is always true, even if I choose false in the theme’s blueprint file.

I attach some screenshots:

In this image you can see all values to false…

Selection_040
Selection_040973×611 26.2 KB

These are the values in Chrome Inspector:



$('#content-slide').slideme({
  arrows: true,
  autoslide: true,
  autoslideHoverStop: true,
  interval: 4000,
  loop: true,
  pagination: "numbers",
  transition : 'zoom',
  itemsForSlide: 0,
  touch: true,
  swipe: true,

});

As you can see, even if all the fields are set to false, they appear as true.

Is there something wrong with this code?

Thanks so much.

5

Hello again.

I’ve tried removing ? ‘true’ : ‘false’, and everything works fine now.

Finally, this is the code for the showcase twig template (for Deliver Theme):

<script type="text/javascript">

$('#content-slide').slideme({
  arrows: {{ theme_config.carousel_options.arrows}},
  autoslide: {{ theme_config.carousel_options.autoslide }},
  autoslideHoverStop: {{ theme_config.carousel_options.autoslideHoverStop}},
  interval: {{ theme_config.carousel_options.interval}},
  loop: {{ theme_config.carousel_options.loop }},
  pagination: "numbers",
  transition : '{{ theme_config.carousel_options.transition }}',
  itemsForSlide: {{ theme_config.carousel_options.itemsForSlide }},
  touch: {{ theme_config.carousel_options.touch}},
  swipe: {{ theme_config.carousel_options.swipe}}

});
</script>

Thanks for your suggestions @pamtbaau, this solution is easier than mine.

6

@pmoreno, If you updated the blueprint as shown above, than theme_config.carousel_options.arrows will have the string value ‘true’ or ‘false’.

And non-empty strings always evaluate to true. Hence the expression {{ site.header_options.arrows ? 'true' : 'false'}} will therefor always print true.

To prevent the above required conversion, you could define the blueprint field such that it saves data as a string:

As I said, sorry for not being clear enough, if you update the blueprint, you don’t need the conversion.