can someone help me.
How can I modify default template to bootstrap version?
Because input's doesn't have a class "form-control".
Here is defaul:
{% block a2lix_translations_widget %}
{{ form_errors(form) }}
<div class="a2lix_translations tabbable">
<ul class="a2lix_translationsLocales nav nav-tabs">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<li {% if app.request.locale == locale %}class="active"{% endif %}>
<a href="#" data-toggle="tab" data-target=".{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }}">
{{ locale|capitalize }}
{% if form.vars.default_locale == locale %}[Default]{% endif %}
{% if translationsFields.vars.required %}*{% endif %}
</a>
</li>
{% endfor %}
</ul>
<div class="a2lix_translationsFields tab-content">
{% for translationsFields in form %}
{% set locale = translationsFields.vars.name %}
<div class="{{ translationsFields.vars.id }}_a2lix_translationsFields-{{ locale }} tab-pane {% if app.request.locale == locale %}active{% endif %} {% if not form.vars.valid %}sonata-ba-field-error{% endif %}">
{{ form_errors(translationsFields) }}
{{ form_widget(translationsFields) }}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block a2lix_translationsForms_widget %}
{{ block('a2lix_translations_widget') }}
{% endblock %}
I have no idea what should I insert/delete/modify :(
Thanks
I have done a custom form template for a2lix_translations with bootstrap(full code is too long and not optimal to paste here) But to get the classes I need like form-control into the widgets I have done the following:
{%for field in translationsFields%} {# further break the transliationsfields into individual inputs #}
{%if field.vars.attr is not empty and field.vars.attr['class'] is defined and field.vars.attr['class']=="tinymce"%}
{{form_widget(field ,{'attr':{'class':' tinymcertl'}} )}}
{%else%}
{{form_widget(field,{'attr':{'style':'direction:rtl','class':class~' form-control'}} )}}
{%endif%}
{%endfor%}
The ugly code above is basically saying, if the widget already has a class, add the class form-group to it. If the widget does not have a class at all, set the class to be form-group. I have done that if statement to avoid null pointers since if I try to reference the form class and there isn't one, the code will crash. And if I just do set class to form-group, it will erase the previous classes.
I hope this helps. My full code might not be helpful to you because the languages I was working with involved left to right language and right to left languages, so a lot of conditions had to be implemented to orient my page in the right direction, which is messy and you might not need...
PS: this was done on symfony 2.7 or so. Did not test on symfony 3.
in my case sf 3.2 i just did this change in my config.yml and all forms are bootstraped :
# app/config/config.yml
twig:
//....
form_themes:
- 'bootstrap_3_layout.html.twig'
Related
I want to add Active class to first li instance through twig without using JS, jQuery or anything else.
How can i achieve that?
Thanks in advance
<ul class="header-search-list" id="streetInputList">
{% for streetOption in streets %}
<li data-label-for="{{ streetOption.id }}" style="display: none;">{{ streetOption.name }}</li>
{% endfor %}
</ul>
If you want to add the class active to the first element in your loop, u could use the loop variable, e.g.
<ul class="header-search-list" id="streetInputList">
{% for streetOption in streets %}
<li data-label-for="{{ streetOption.id }}" {% if loop.first %} class="Active"{% endif %} style="display: none;">{{ streetOption.name }}</li>
{% endfor %}
</ul>
demo
In the product.twig file, i need to include another twig file , the file gets linked and working, but that disables the add-to-cart button in every product page
{{ header }}
<div id="product-product" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li>{{ breadcrumb.text }}</li>
{% endfor %}
</ul>
<div class="row">{{ column_left }}
{{ include('default/template/extension/total/demo_file.twig') }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-md-9 col-sm-12' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
Event is bind on the add to cart button. The even code lies in the same file , so make sure the id of the button is same as previous button you are replacing.
Other way could be updating the event bind function jQuery selector.
I have an if/else condition in a twig template which switches the out tag of a block of code, however the inner block is the same. Is there a way to reduce the duplication without creating a separate file?
This is what I have at the moment:
{% if condition %}
<a href="">
{{ content }}
</a>
{% else %}
<span>
{{ content }}
</span>
{% endif %}
I was hoping to do something such as:
{% if condition %}
<a href="">
{% include mycontent %}
</a>
{% else %}
<span>
{% include mycontent %}
</span>
{% endif %}
{% mycontent %}
{{ content }}
{% endmycontent %}
Is such a thing possible?
If you don't want to use extra files you could use macro's :
{% import _self as macro %}
{% macro foo(content) %}
{{ content }}
{% endmacro %}
{% for condition in [0, 1, 0, 1, ] %}
{% if condition %}
{{ macro.foo('Bar') }}
{% else %}
<span>{{ macro.foo('Bar') }}</span>
{% endif %}
{% endfor %}
fiddle
What you want to do has to be done using the normal syntax. an extra file. and include this file.
But if u want to do this without extra file. use the {% set variablecontent = "put content here" %} and then in your "{% mycontent %}" part u put {{ variablecontent }}
hope this helps
I often have similar boilerplate code in Twig:
{% if (somelongcond) %}
<div>
{% endif %}
<p>Some long content</p>
{% if (somelongcond) %}
</div>
{% endif %}
The problem with the above is if the condition is changed, it can be a maintenance nightmare, I also have to go look all the way down to find the matching if statement and see if the condition is the same.
An alternative is something like this:
{% if (somelongcond) %}
<div>
{% include 'content' %}
</div>
{% endif %}
{% include 'content' %}
But that requires creating a new file, which can become a mess if I need to do this many times.
Is there a better way to do the above.
There is a good example here: https://gist.github.com/jakedohm/39190ec533e69e83b9cee4bdf3898a60
Result:
{% set content %}
<p>Some long content</p>
{% endset %}
{% if somelongcond %}
<div>
{{ content }}
</div>
{% else %}
{{ content }}
{% endif %}
This is a bit shorter
{{ if somelongcond ? '<div>'|raw }}
<p>Some long content</p>
{{ if somelongcond ? '</div>'|raw }}
Then, if the same condition is repeated, you can maybe set it at the top of your file, then if you need to change it you only have to do it once.
{% if somelongcond %}
{% set cond = true %}
{% else %}
{% set cond = false %}
{% endif %}
{{ if cond ? '<div>'|raw }}
<p>Some long content</p>
{{ if cond ? '</div>'|raw }}
Im new to Twig. Is there something similar to Jade's mixins with nested blocks?
I mean something like this:
mixin button(text)
.btn
.txt= text
.dropdown
block
+button("button")
+button("sub1")
+button("sub1-1")
+button("sub1-2")
+button("sub2")
+button("sub2-1")
.custom1 blah-blah
+button("sub3")
+button("sub3-1")
+button("sub3-2")
I found some kind of solution.
I have just splitted macro into 2+ macros.
{% __btns.twig %}
{% macro btn1_opening(text) %}
<div class="button1">
<div class="text">{{ text }}</div>
<div class="dropdown">
{% endmacro %}
{% macro btn1_closing() %}
</div>
</div>
{% endmacro %}
{# main.twig #}
{% import "__btns.twig" as btns %}
{{ btns.btn1_opening("I am button") }}
<div class="something-inside-dropdown">
{% include "somefile.twig" %}
</div>
{{ btns.btn1_closing() }}
So, in this case even if i need multiple blocks inside of my macro i can just write some HTML between opening, intermediate and closing macros.