having trouble nesting the following code. Where am I going wrong?
I just want to have some events show if the day is monday and then within that each event has a number of stars so I want to have another if statement that pulls that amount of stars and displays the correct image.
Here is my code.
<div class="row">
{% for event in site.nottingham_events %}
{% if event.day == "Monday" %}
<div class="event-guide-event">
<img class="event-guide-event--thumbnail" src="/img/thumb.jpg"
alt="">
<h2>{{ event.name }}</h2>
<p>When: {{ event.time }}</p>
<h3>Where: {{ event.bar }}</h3>
<h3>Hosted By: {{ event.brand }}</h3>
{% if event.stars =="3" %}
<img src="/img/events/3-stars.png" alt="Everyone">
{% endif %}
{% if event.stars =="2" %}
<img src="/img/events/2-stars.png" alt="Enthusiasts and
Beginners">
{% endif %}
{% if event.stars =="1" %}
<img src="/img/events/1-star.png" alt="Expert">
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
I resolved it by changing my logic, because you can't nest if statements in Liquid.
Related
I am a super beginner with HTML, however, I am trying to resolve an issue with my website. I am trying to concatenate a wildcard(*) to the end of whatever a consumer tries to search so that it picks up similarly tagged items, however, I cannot figure out where to add said code... Our current search query works well when pulling up items based on partial keywords, but when hitting the 'enter' button it will say it could not find any products.
Additional notes: This is a Shopify website with a theme from halothemes so most of this is coded by them.
{% assign grid_results = true %}
<div class="search-page collection-template" data-search-page>
<div class="container">
{% if search.performed %}
{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}
{% paginate search.results by 15 %}
{% comment %}
We don't have any results to show. Feel free to show off featured products
or suggested searches here.
{% endcomment %}
{% if search.results_count == 0 %}
<header class="page-header">
<h2>
{% render 'multilang' with settings.search_1 %}
<strong> "{{ search.terms }}" </strong>
{% render 'multilang' with settings.search_2 %}
</h2>
</header>
{% else %}
<header class="page-header">
<h2>
{% render 'multilang' with settings.search_3 %}
<strong> "{{ search.terms }}" </strong>
{% render 'multilang' with settings.search_4 %}
</h2>
</header>
{% comment %}
Each result template, based on the grid_layout variable above
{% endcomment %}
<div class="block-row col-main">
{% if grid_results == false %}
<div class="product-collection products-list product-search row">
{% for product in search.results %}
<div class="grid-item col-12{% if settings.product_image_border%} grid-item-border{% endif %}">
{% render 'search-result' with product as product %}
</div>
{% endfor %}
</div>
{% else %}
<div class="products-grid product-search row product-collection">
{% for product in search.results %}
<div class="grid-item col-6 col-md-4{% unless settings.layout_style == 'layout_style_1170' %} col5 col-lg-3{% endunless %}{% if settings.product_image_border%} grid-item-border{% endif %}">
{% if settings.style_product_grid == 'style_product_grid_2' %}
{% render 'product-grid-item-style-2' with product as product %}
{% else %}
{% render 'product-grid-item' with product as product %}
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
{% if paginate.pages > 1 %}
<div class="padding">
{% render 'pagination-page' paginate: paginate %}
</div>
{% endif %}
{% endpaginate %}
{% else %}
{% comment %}
If search.performed is false, someone either accessed the page without
the q parameter, or it was blank.
Be sure to show a search form here, along with anything else you want to showcase.
{% endcomment %}
<header class="page-header">
<h2 style="text-align:center" {% if settings.enable_multilang %}data-translate="general.search.title"{%endif%}>{{ 'general.search.title' | t }}</h2>
<div class="header-search__form">
<form action="/search" method="get" class="search-bar" role="search">
<input type="hidden" name="type" value="product">
<input type="search" name="q"
{% if settings.enable_multilang %} data-translate="general.search.placeholder" translate-item="placeholder"{% endif %}
placeholder="{{ 'general.search.placeholder' | t }}"
class="input-group-field" aria-label="Search Site" autocomplete="off">
<button type="submit" class="btn icon-search">
{% render 'icon-search' %}
</button>
</form>
</div>
</header>
{% endif %}
Please let me know if you guys need any additional information! Thank you!
You can use a simple script to add a wildcard to the search query on submitting the form e.g:
var searchForm = document.querySelector(".search-bar");
searchForm.addEventListener("submit", function(e) {
var searchInput = searchForm.querySelector("[name=q]");
var q = searchInput.value;
if (!q.match(/\*$/)) {
e.preventDefault();
searchInput.value = q + "*";
searchForm.submit();
}
});
I am trying to render three columns for per row in my html file by using Django2.1 and Bootstrap4.
The piece of HTML code looks like following:
<main class="container" role="main">
{% for treasure in treasures %}
{% block row %}
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
<h4 class="card-title">{{ treasure.name }} </h4>
<img class="card-img-bottom mw-100 mh-100" src="{{ treasure.img_url }}" alt="A Kind of Treasure">
</div>
</div>
{% if forloop.counter|divisibleby:3 %}
{% endblock %} {% block row %}
{% endif %}
{% endblock %}
{% endfor %}
</main>
The error I get is:
Invalid block tag on line 44: 'endblock', expected 'elif', 'else' or 'endif'. Did you forget to register or load this tag?
PS: Line 44 is {% endblock %} {% block row %}, so I get the error right after the if check. If I delete that line, it does not produce any error.
Your first {% endblock %} tag is overlapping with the {% if forloop.counter|divisibleby:3 %} tag.
You are basically doing the following:
{% block row %}
{% if forloop.counter|divisibleby:3 %}
{% endblock %}
{% block row %}
{% endif %}
{% endblock %}
Your if tag and endif tag are in two separate blocks, this is causing the error. You wil have to remove the block tags between the if tags.
Adding to the previous answer, you can rename your blocks, and for clarity, add the name in the endblock tag.
{% for treasure in treasures %}
{% block row %}
...
{% if forloop.counter|divisibleby:3 %}
{% block row2 %}
{% endblock row2 %} # add the name in endblock for clarity
{% endif %}
{% endblock row %} # add the name in endblock for clarity
{% endfor %}
I'm trying to filter results of the loop based on hashtags included in titles. If done manually it works perfectly:
<article class="post-preview">
<a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
{% if post.title contains "#hashtag" %}
<br>
<div class="float-left">
{% include read-time.html %}
</div>
<h2 class="post-title">{{ post.title }}</h2>
{% if post.subtitle %}
<h3 class="post-subtitle">{{ post.subtitle }}</h3>
{% else %}
<h3 class="post-subtitle">{{ post.excerpt | strip_html | truncatewords: 15 }}</h3>
{% endif %}
</a>
<p class="post-meta float-right">Posted by
{% if post.author %}
{{ post.author }}
{% else %}
{{ site.author }}
{% endif %}
on {{ post.date | date: '%B %d, %Y' }}</p><br>
{% endif %}
</article>
what I'd like to achieve is to be able to use variable instead of string:
e.g.
{% if post.title contains "{{ content }}" %} - (this way it doesn't work)
instead of
{% if post.title contains "#hashtag" %}
Is there a way to pass variable to post.title contains, or any other way to achieve my goal i.e. filtering results of for loop based on the hashtag in the title ?
Simply write the variable name after contains. Example:
{% assign a = "Sample text" %}
{% assign b = "text" %}
{% if a contains b %}
Variable 'a' contains the value of variable 'b'! :)
{% endif %}
In your case, a will be post.title and b will be content.
I want that a message gets displayd if no search results are found but somewho im doing it wrong! Is
if post in object_list.count == 0
unsuitable?
My Django template:
{% extends 'quickblog/base.html' %}
{% block content %}
{% if post in object_list.count == 0 %}
<p>No results, sorry :(</p>
{% else %}
{% for post in object_list %}
<div class="post">
<h1><u>{{ post.title }}</u></h1>
<p>{{ post.content|linebreaksbr }}</p>
<div class="date">
<a>Published by: {{ post.author }}</a><br>
<a>Published at: {{ post.published_date }}</a><br>
<a>Category: {{ post.category }}</a><br>
<a>Tag(s): {{ post.tag }}</a>
</div>
</div>
{% endfor %}
{% endif %}
I want to populate a twig page with information stored in the database. I use a loop to make multiple divs containing different entries of the same tables. The only problem is that I want to group the divs by4.. and I can't stop the loop when I reach the fourth step. In the end i get a big colon of divs.
Can anyone please tell me how to group the divs by 4?
This is my twig template:
<form method="POST" id="form-book">
<section id="portfolio" class="container main">
<ul class="gallery col-4">
{% for type in typeandrooms %}
{% for t, room in type %}
<li>
{% if t == 0 %}
<div class="preview">
{% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
{% set var_id = var_id ~ room.getType.id %}
{% set var_id = var_id ~ '.jpg' %}
<img src="{{ asset(var_id) }}">
<div class="overlay">
</div>
</div>
<div class="desc">
<h5> {{ room.getType.name }} </h5>
<strong>Beds: </strong>Double bed<br/>
<strong>Available rooms: </strong> {{ type|length }} <br/>
<strong>Prices: </strong> {{ room.getPrice }} <br/>
<button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
</div>
{% endif %}
{% if loop.index % 4 == 0 and loop.index > 0 %}
</li>
Al 4-lea pas
<li>
{% endif %}
</li>
{% endfor %}
{% endfor %}
</ul>
</section>
</form>
{% endfor %}
Problem is solved. This is the new template:
<form method="POST" id="form-book">
<section id="portfolio" class="container main">
<ul class="gallery col-4">
{% for rooms in typesandrooms %}
{% for room in rooms %}
{% if loop.index == 1 %}
<li>
<div class="preview">
{% set var_id = 'bundles/twnelo/images/portfolio/thumb/item' %}
{% set var_id = var_id ~ room.getType.id %}
{% set var_id = var_id ~ '.jpg' %}
<img src="{{ asset(var_id) }}">
<div class="overlay">
</div>
</div>
<div class="desc">
<h5> {{ room.getType.name }} </h5>
<strong>Facilities: </strong>{% for facility in room.getFacilities %} {% if loop.index < 4 %} {{ facility.getFacility }}; {% endif %} {% endfor %}<br/>
<strong>Available rooms: </strong> {{ rooms|length }} <br/>
<strong>Prices: </strong> {{ room.getPrice }} Lei <br/>
<button type = "submit" name="singleapartment" value = "{{ room.getType.id }}" class="btn btn-success btn-small">Book a room !</button>
</div>
</li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</section>
</form>
You have to open the first row right before the loop.
{% for type in typeandrooms %}
+ <li>
{% for t, room in type %}
- <li>
And close the last one right after
{% endif %}
- </li>
{% endfor %}
+ </li>
{% endfor %}
And given this line {% if t==0 %} I reckon you'll need to use a counter instead of index.loop. Else you could end up with less than 4 room per list row. The best practice would be to parse the array first in your controller and remove the rooms with t==0 then just remove the {% if t==0 %} line in your twig template and it'll work with index.loop, you want to keep the logic in twig to a minimum.