I pretty new to Twig first of all!
I'm trying to loop through an array of products, like so:
{% for product in products %}
What I further try to do is to check if one of the product.title equals the name lookbook.
if so then this product cannot be showed in my template/page. The things I tried just display an empty div instead of not showing anything.
Is there any way to accomplish this?
What I have so far:
{% for product in products %}
{% if product.title == 'lookbook' %}
.... dont show?? ....
{% else %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}
I also tried:
{% for product in products and product.title != 'lookbook' %}
Thanks in advance!
Official doc :
{% for user in users if user.active %}
<li>{{ user.username|e }}</li>
{% endfor %}
In your case :
{% for product in products if product.title != 'lookbook' %}
Update 08/2021
Tip
As of Twig 2.10, use the filter filter instead, or an if condition
inside the for body (if your condition depends on a variable updated
inside the loop and you are not using the loop variable).
Try:
{% for product in products %}
{% if product.title != 'lookbook' %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}
Related
{% for i in menu_categories %}
<a href="{% url 'category' i.slug %}"
class="mr-4 font-light{% if i.slug == url_name %}text-emerald-500 text-3xl{% endif %} hover:text-emerald-600">
{{ i.title }}
</a>
{% endfor %}
I was looking for similar questions, but I didn’t check the url in the for loop.
What's wrong?
I have created an alternate collection.liquid template for a shopify site I'm working on. My struggle is with not being able to control the number of products that appear in a row in the grid. I developed the custom template so that I wouldn't affect the number of products/row that appear on the other collections.
The code that displays the grid in my liquid template is this:
<div class="four columns section_select {% unless settings.collection_sort %}offset-by-four omega{% endunless %}">
{% for tag in collection.all_tags %}
{% if forloop.first %}
<label for="tag_filter" class="inline">
{{ 'collections.sorting.filter' | t }}: </label>
<select name="tag_filter" id="tag_filter">
<option {% unless current_tags %}selected="selected"{% endunless %} value="{% if collection.handle == "all" %}/collections/all{% else %}{{ collection.url }}{% endif %}">{{ 'collections.general.all_collection_title' | t: title: collection.title }}</option>
{% endif %}
{% unless tag contains 'meta-related-collection-' %}
<option {% if current_tags contains tag %}selected="selected"{% endif %} value="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}">{{ tag }}</option>
{% endunless %}
{% if forloop.last %}
</select>
{% endif %}
{% endfor %}
</div>
Even when I change the class class="four columns" to something else, it is not reflected on my collection.
The problem could be in my code that assigns how many products are pulled in this collection but I can't seem to make a difference.
{% case products_per_row %}
{% when '1' %}
{% assign grid_item_width = 'medium--one-third large--one-whole' %}
{% when '2' %}
{% assign grid_item_width = 'medium-down--one-half large--one-half' %}
{% when '3' %}
{% assign grid_item_width = 'medium--one-third large--one-third' %}
{% when '4' %}
{% assign grid_item_width = 'medium-down--one-half large--one-quarter' %}
{% when '5' %}
{% assign grid_item_width = 'medium-down--one-half large--one-fifth' %}
{% endcase %}
Any help would be great!
It looks like your theme is using Timber grid.
You will find grid structure and classes to use in documentation here: https://shopify.github.io/Timber/
HTH
Hey i am using brooklyn theme in my shopify website. I have different products will color variants . When i click on collection page i want to show all color variants of that products as separate products. I am googling since last night any help please.
Look at the codes below.
<ul class="colorlist">
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% if variant.available %}
<li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" class="instock">{{ color | downcase }}</li>
{% else %}
<li id="{{ variant.id }}" title="Out of Stock" class="outstock" >{{ color | downcase }}</li>
{% endif %}
{% capture tempList %}
{{colorlist | append: color | append: " " }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
The code above can display the available colors of a product in collection page. You can take the same loop structure and display the entire product grid instead of just displaying the variant name.
I used the nl2br filter like this:
{{ knp_pagination_render(requests)|raw|nl2br}}
It prints the html object separated by a few line breaks, and I need to print all the objects in one single line. How can I reach that?
Any help would be great.
{{ string | replace({"\\n":""}) }}
See fiddle.
I suggest you to override the default pagination template, so you can customize how to generate the underling HTML code.
As described in the doc You can do simply:
{{ knp_pagination_render(request, 'MyBundle:Pagination:pagination.html.twig') }}
You can copy the current pagination implementation from here and customize it as you need.
This is the default implementation:
{# default Sliding pagination control implementation #}
{% if pageCount > 1 %}
<div class="pagination">
{% if first is defined and current != first %}
<span class="first">
<<
</span>
{% endif %}
{% if previous is defined %}
<span class="previous">
<
</span>
{% endif %}
{% for page in pagesInRange %}
{% if page != current %}
<span class="page">
{{ page }}
</span>
{% else %}
<span class="current">{{ page }}</span>
{% endif %}
{% endfor %}
{% if next is defined %}
<span class="next">
>
</span>
{% endif %}
{% if last is defined and current != last %}
<span class="last">
>>
</span>
{% endif %}
</div>
{% endif %}
i got the following loop
{% set services = { "ceoCentralServices": ceoCentralServices, "cfoCentralServices": cfoCentralServices, "cooCentralServices": cooCentralServices} %}
{% for events, serviceEvents in services %}
{% if serviceEvents %}
<div class="wrapItFine" style="background:purple;">
{% for event in serviceEvents %}
<div class="dialog" data-index="loop2{{ loop.index0 }}">
<li class="contentli">{{ event.value }}</li>
</div>
<div style="display:none;"
id="anmelden_boxloop2{{ counter }}{{ loop.index0 }}"
class="{{ event.value }}{{ loop.index0 }}" >
{% include 'ansprechpartnerSingle.twig' %}
</div>
{% endfor %}
</div>
{% endif %}
{% endfor %}
this returns 3 boxes with data-index="loop2+index.
the problem is, that i need in each loop a different value like loop2+index, loop3+index, loop4+index
i tried a set Counter and incrementing in the for loop which returned every time the same value.
feel free to downvote, like everytime :-)
in your second loop you can simply use
{{ loop.parent.loop.index0 }}
to get the index of the parent loop, which you can use instead of your counter
data-index="loop{{ loop.parent.loop.index0 }}{{ loop.index0 }}"