How to distinguish fields and subforms in jinja2? - python-3.x

I programmed a Flask application with a form using flask_wtf. My form contains fields and subforms. My goal is to render all fields with a loop and to treat the subforms on their own. Is it possible to distinguish between fields and subforms (with a if statement in the jinja2 template)?
form.py
from flask_wtf import form, FlaskForm
from wtforms import StringField, FieldList, FormField
class MySubform(Form):
field1 = StringField(label="field1")
class MyForm(Flaskform):
name = StringField(label="Name")
subform = FieldList(FormField(MySubform), min_entries=1)
index.html
{% extends "bootstrap/base.html" %}
{% block content %}
<div class="row">
{% for field in form %}
<div class="form-group">
{{ field.label(class_='col-sm-3 control-label') }}
<div class="col-sm-9">
{{ field(class_='form-control') }}
</div>
</div>
{% endfor %}
</div>
{% endblock %}

index.html
{% for field in form %}
{% if field.type == 'FieldList' %}
// Process Subfields
{% else %}
// Process everything except FieldList's
{% endif %}
{% endfor %}

Related

Django request.Get.get('page') returning none

Trying to use a paginator in a view. Getting none from page = request.GET.get('page'). As is, the call to paginator limits posts on a page properly, but any call to page sequence henceforth fails. Pages will display, but there will be nothing form pagination.html displayed. For clarity, Base.html is the base template from which all others inherit. list.html is the page where I expect to see pagination.html displayed.
This code is based off of the django manual. Is there something else that needs to be setup to give the requests querydict a key of 'page' or a better way to paginate?
views.py
from django.shortcuts import render, get_object_or_404
from .models import Post
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
def post_list(request):
object_list = Post.published.all() #a list of the posts
paginator = Paginator(object_list, 4) # 4 posts in each page
page = request.GET.get('page')
try:
posts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer deliver the first page
posts = paginator.page(1)
except EmptyPage:
# If page is out of range deliver last page of results
posts = paginator.page(paginator.num_pages)
return render(request,'blog/post/list.html',{'page': page,'posts': posts})
pagination.html
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Previous
{% endif %}
<span class="current">
Page {{ page.number }} of {{ page.paginator.num_pages }}.
</span>
{% if page.has_next %}
Next
{% endif %}
</span>
</div>
base.html
#...
<div id="content">
{% block content %}
{% include "pagination.html" with page=posts %}
{% endblock %}
</div>
#...
list.html
{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{% endblock %}
When you fill a block in a child template it replaces the super template's block's content (not literally the block named content here). If you want to keep the parent's block along with some extra content, you should use {{ block.super }}, i.e. list.html should be:
{% extends "blog/base.html" %}
{% block title %}My Blog{% endblock %}
{% block content %}
<h1>My Blog</h1>
{% for post in posts %}
<h2>
<a href="{{ post.get_absolute_url }}">
{{ post.title }}
</a>
</h2>
<p class="date">
Published {{ post.publish }} by {{ post.author }}
</p>
{{ post.body|truncatewords:30|linebreaks }}
{% endfor %}
{{ block.super }}
{% endblock %}

Using Twig to declare template and pass in additional content between the parent template's block

I have the following code that I repeat multiple times in my layout:
<div id="hi">
<div class="howAreYou">
<p class="fineTYForAsking">
<!-- additional HTML logic goes here -->
</p>
</div>
</div>
How can I put in the above html into a single Twig template, and then use that template and put in my additional specific html in the <!-- additional HTML logic goes here --> section?
You could just define blocks and embed the template where ever you want
partial.twig.html
<div id="{{ id | default('hi') }}">
<div class="howAreYou">
<p class="fineTYForAsking">
{% block content %}
{% endblock %}
</p>
</div>
</div>
template.twig.html
{% embed "partial.html.twig" with { 'id' : 'foo' } %}
{% block content %}
Lorem Ipsum
{% endblock %}
{% endembed %}
You could also use an embed in a for-loop. Variables known inside the loop, are also know in the embedded file, e.g.
item.html.twig
<div{% if item.id|default %} id="{{ item.id }}"{% endif %}>
<div class="howAreYou">
<p class="fineTYForAsking">
{% block title %}
{% if item.title is defined %}
<h1>{{ item.title }}</h1>
{% endif %}
{% endblock %}
{% block content %}
{% if item.content is defined %}
<p>{{ item.content }}</p>
{% endif %}
{% endblock %}
</p>
</div>
</div>
template.html.twig
{% for item in items %}
{% embed "item.twig" %}
{% endembed %}
{% endfor %}
demo

Can't access global data or macro within macro

I'm pretty new to patternlab and am just migrating my php based project onto the node version.
I am having issues to access global data and block in a block file, which I didn't have previously.
I am using Pattern Lab Node v3.0 on Mac, with Node v13.9.0, using a Gulp Edition with Twig.
source/_data/data.json
"img": {
"landscape": {
"w_1024": {
"src": "../../images/1536x864_16x9.jpg",
"alt": "16x9 Image"
}
}
}
source/macros/ui.twig
{% macro icon( name ) %}
{% if name == "airplay" %}<img src="airplay.png"/>{% endif %}
{% endmacro %}
source/02-organisms/00-global/file-1.twig
{% import "#macros/blocks.twig" as blocks %}
{% import "#macros/ui.twig" as ui %}
<p class="icon">{{ ui.icon( "airplay" ) }}</p>
<p class="output">{{img.landscape.w_1024.src}}</p>
{{ blocks.media(item) }}
source/macros/blocks.twig
{% import "#macros/ui.twig" as ui %}
{% macro media( params ) %}
<p class="icon2">{{ ui.icon( "airplay" ) }}</p>
<p class="output2">{{img.landscape.w_1024.src}}</p>
{% endmacro %}
Expected Behavior
Generated html should look as follow :
<p class="icon"><img src="airplay.png"/></p>
<p class="output">../../images/1536x864_16x9.jpg</p>
<p class="icon2"><img src="airplay.png"/></p>
<p class="output2">../../images/1536x864_16x9.jpg</p>
Actual Behavior
Generated html looks as follow :
<p class="icon"><img src="airplay.png"/></p>
<p class="output">../../images/1536x864_16x9.jpg</p>
<p class="icon2"></p>
<p class="output2"></p>
Any help is welcome!
Macro's have their own variable scope. If you want to access any other defined variables you'd need to pass the special variable _context.
{% macro foo(bar, context) %}
{{ bar }}
{{ context['foo'] }}
{% endmacro %}
{% import _self as macros %}
{{ macros.foo(42, _context) }}
demo - demo with include

Using include disable's add-to-cart button in products pages in opencart 3.0.2

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.

Twig embed block not working when its within a loop?

I need to place a twig template into my page and place another twig template inside it.
In page.twig:
{% embed "parent.twig" %}
{% block something %}
{% include "child.twig" %}
{% endblock %}
{% endembed %}
In parent.twig:
{% set array = ['', '', '']
%}
<div class="parent">
{% for i in array %}
<div class="parent__item">
{% block cardBoard %}
{% endblock %}
</div>
{% endfor %}
</div>
The problem is that the block doesn't work when its within a loop. I can edit page.twig all I like but I would rather not change parent.twig if possible as its consumed by other applications.
Why do you put a block inside a for loop ? You can't have 2 blocks defined with the same name.
In your case it will try to put this in your template 3 times :
<div class="parent__item">
{% block cardBoard %}
{% endblock %}
</div>
This will create a 500 server error :
The block 'cardBoard' has already been defined line '' in :parent.twig at line ''.
If you really want to have content depending on the values in your array, put the block opening and closing outside the for loop.
Like this for example :
{% set array = ['', '', '']%}
<div class="parent__item">
{% block cardBoards %}
{% for i in array %}
<div class="cardBoard{{ i }}>
</div>
{% endfor %}
{% endblock %}
</div>

Resources