I'm trying to set up a loop to display posts on my index page so that they fit within the skeleton.css framework. The first post should occupy twelve columns, and be contained in it's own row. Every two posts thereafter should be wrapped in a separate row. I'm using the following:
{% elsif forloop.index | modulo: 2 == 0 %}
...in an attempt to create a row div around every two posts. This doesn't appear to be working, as on output, each individual post is wrapped in a row div.
<div class="posts">
{% for post in site.posts %}
{% if forloop.first == true %}
<div class="row">
<article class="twelve columns"></article>
</div>
{% elsif forloop.index | modulo:2 == 0 %}
<div class="row">
<article class="six columns"></article>
</div>
{% else %}
<article class="six columns"></article>
{% endif %}
{% endfor %}
</div>
Your {% elsif forloop.index | modulo:2 == 0 %} condition is incorrect as pipes are not allowed in such a control structure. It finally resolves to {% elsif forloop.index %} which is always true.
You can do this :
<div class="posts">
{% for post in site.posts %}
{% assign remainder = forloop.index | modulo: 2 %}
{% if forloop.first == true %}
<div class="row">
<article class="twelve columns"></article>
</div>
{% elsif remainder == 0 %}
<div class="row">
<article class="six columns"></article>
{% if forloop.last %}
</div>
{% endif %}
{% else %}
<article class="six columns"></article>
</div>
{% endif %}
{% endfor %}
</div>
Index 1: skip
Index 2: start two article wrap
Index 3: end two article wrap
Index 4: start two article wrap
Index 5: end two article wrap
.
.
.
<div class="posts">
{% for post in site.posts %}
{% if forloop.first == true %}
<div class="row">
<article class="twelve columns"></article>
</div>
{% elsif forloop.index | modulo:2 == 0 %}
<div class="row">
<article class="six columns"></article>
{% else %}
<article class="six columns"></article>
</div>
{% endif %}
{% endfor %}
</div>
Although this will introduce a new problem. It may work for 3 articles or 5 articles, but not for 4 or 6 articles.
One needs to use a helper variable, to track the openness of the last row div:
{% assign opendiv = false %}
<div class="posts">
{% for post in site.posts %}
{% assign remainder = forloop.index | modulo:2 %}
{% if forloop.first == true %}
<div class="row">
<article class="twelve columns"></article>
</div>
{% elsif forloop.last == true and opendiv == false %}
<div class="row">
<article class="six columns"></article>
</div>
{% elsif remainder == 0 %}
{% opendiv = true %}
<div class="row">
<article class="six columns"></article>
{% elsif opendiv == true %}
{% opendiv = false %}
<article class="six columns"></article>
</div>
{% endif %}
{% endfor %}
</div>
Related
I have posts within my blog that have 2 categories: project, and then whatever the name of the project is (i.e. project1 and project2). I've built out a page to display all my projects, with a loop that looks like this:
<div class="container">
{% for post in site.categories.project %}
{% assign remainder = forloop.index | modulo: 3 %}
{% if remainder == 1 or forloop.first %}
<div class="row">
{% endif %}
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card" href="{{ site.baseurl }}{{ post.url }}">
<div class="m-2">
<h3>{{post.title}} {{post.categories[1]}}</h3>
{% if post.image %}
<img src="{{ post.image }}" />
{% endif %}
<p>{{post.projectInfo}}</p>
</div>
<div class="m-2 mt-auto">
{% if post.projectLink %}
Project Link |
{% endif %}
Blog Post
</div>
</div>
</div>
{% if remainder == 0 or forloop.last %}
</div>
{% endif %}
{% endfor %}
</div>
However, when I make an update to the project, I'd like to ONLY display the most recent post, and skip over all the others. I've tried assigning a variable thisProject, and then doing a limit: 1, but because I've grabbed each post already in the outermost for loop, it'll actually show multiple iterations of lastest post for the project that has multiple posts.
Any way I can better limit this?
I've built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:
<div class="feed-faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq %}
{% for item in faqs %}
{% assign i = forloop.index %}
<div class="item item--{{ i }}">
{{ heading[i] }}
{{ content[i] }}
</div>
{% endfor %}
{% endif %}
</div>
However, on the frontend, this loop returns the following:
<div class="feed-faqs">
<div class="item item--1">
</div>
<div class="item item--2">
</div>
</div>
Is what I'm trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?
Worked it out, so leaving this answer for anyone else in the future:
<div class="feed--faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq.heading %}
{% for value in faqs %}
{% assign i = forloop.index0 %}
<div class="item item--{{ i }}">
<h4>{{ page.metafields.faq.heading[i] }}</h4>
<p>{{ page.metafields.faq.content[i] }}</p>
</div>
{% endfor %}
{% endif %}
</div>
Metafield value type is set to 'Json String'.
For reference, I'm using the ArenaCommerce Advanceds Custom Fields app: https://apps.shopify.com/advanced-custom-field.
I need help please with showing the tags filter only if the current tags are more than 1,
Currently my filter shows even in the case on a single tag. I tried the following but couldn't find the exact liquid syntax:
<dd>
<ol>
{% for t in tags %}
{% assign tag = t | strip %}
{% assign tag_value = tag | handleize %}
{% if current_tags contains tag %}
{% if current_tags > 1 %}
<li>
<input type="checkbox" value="{{ tag_value }}" checked/>
<label>{{ tag }}</label>
</li>
{% else %}
{% if collection.tags contains tag %}
<li>
<input type="checkbox" value="{{ tag_value }}"/>
<label>{{ tag }}</label>
</li>
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</ol>
</dd>
Thanks in advance
You can use this if condition to check current tags are more than 1
{% if current_tags.size > 1 %}
{% endif %}
Alright. So I am trying to get this following script to work with infinite scroll on shopify.
http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections
The problem is I have a special version in my theme called product.loop which calls the products it seems to be a different way.
To start they say to edit collections.liquid to be
{% paginate collection.products by 20 %}
<!-- the top of your collections.liquid -->
<!-- START PRODUCTS -->
{% for product in collection.products %}
<!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
<div class="product" id="product-{{ forloop.index | plus:paginate.current_offset }}"> {% include 'product' with product %} </div>
<!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
{% endfor %}
{% if paginate.next %}
<div id="more">
<p>↓ More</p>
</div>
{% endif %}
<div id="product-list-foot"></div>
<!-- END PRODUCTS -->
<!-- the bottom of your collections.liquid -->
{% endpaginate %}
My collections.liquid is as follows
<div class="{% if settings.show_sidebar %}span9{% else %}span12{% endif %} columns">
{% paginate collection.products by settings.pagination_limit %}
<h1 class="title">{{ collection.title }}</h1>
<hr>
{{ collection.description }}
{% unless collection.description == '' %}
<hr>
{% endunless %}
{% if collection.products.size == 0 %}
{{ 'collection.no_products' | t }}
{% else %}
<!-- TAGS -->
{% include 'tags-snippet' %}
<!-- PRODUCT COLLECTION -->
{% assign col_group = collection %}
{% assign col_settings = settings.product_collection_columns %}
{% include 'product-loop' %}
{% endif %}
{% include 'pagination' %}
{% endpaginate %}
</div>
<div class="{% if settings.show_sidebar %}span9{% else %}span12{% endif %} columns">
{% paginate collection.products by settings.pagination_limit %}
<h1 class="title">{{ collection.title }}</h1>
<hr>
{{ collection.description }}
{% unless collection.description == '' %}
<hr>
{% endunless %}
{% if collection.products.size == 0 %}
{{ 'collection.no_products' | t }}
{% else %}
<!-- TAGS -->
{% include 'tags-snippet' %}
<!-- PRODUCT COLLECTION -->
{% assign col_group = collection %}
{% assign col_settings = settings.product_collection_columns %}
{% include 'product-loop' %}
{% endif %}
{% include 'pagination' %}
{% endpaginate %}
</div>
Next I created a theme.liquid.js file and here is the following code
{% if template contains 'collection' %}
function ScrollExecute() {
if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
scrollNode = $('#more').last();
scrollURL = $('#more p a').last().attr("href");
if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: scrollURL,
beforeSend: function() {
scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
scrollNode.hide();
},
success: function(data) {
// remove loading feedback
scrollNode.next().remove();
var filteredData = $(data).find(".product");
filteredData.insertBefore( $("#product-list-foot") );
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
$(window).scroll(function(){
$.doTimeout( 'scroll', 200, ScrollExecute);
});
});
{% endif %}
Finally I added the dottimeout script as instructed http://benalman.com/code/projects/jquery-dotimeout/docs/files/jquery-ba-dotimeout-js.html and added to my theme.liquid file
{% if template contains 'collection' %}
function ScrollExecute() {
if($(document).height() - 800 < ($(document).scrollTop() + $(window).height())) {
scrollNode = $('#more').last();
scrollURL = $('#more p a').last().attr("href");
if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: scrollURL,
beforeSend: function() {
scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
scrollNode.hide();
},
success: function(data) {
// remove loading feedback
scrollNode.next().remove();
var filteredData = $(data).find(".product");
filteredData.insertBefore( $("#product-list-foot") );
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
$(window).scroll(function(){
$.doTimeout( 'scroll', 200, ScrollExecute);
});
});
{% endif %}
So I know the problem is going to be with my product loop page which is
<div id="collection">
{% if col_group.products.size > 0 %}
{% for product in col_group.products %}
{% if col_settings == '3' %}
{% cycle 'product-loop-clear-start-2': '<div class="row-fluid"><ul class="thumbnails">', '', '' %}
{% elsif col_settings == '4' %}
{% cycle 'product-loop-clear-start-2': '<div class="row-fluid"><ul class="thumbnails">', '', '', '' %}
{% endif %}
<li class="span{% if col_settings == '4' %}3{% elsif col_settings == '3' %}4{% endif %} {% for collection in product.collections %}{{ collection.title }} {% endfor %}">
<div class="thumbnail">
<a class="bl center rel" href= "{{ product.url | within: col_group }}" title="{{ product.title }}">
<img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt }}">
{% if product.available %}
{% if product.compare_at_price_max > product.price %}
<span class="{{ settings.sale_icon }} abs">{{ 'product.product_loop.on_sale' | t }}</span>
{% endif %}
{% else %}
<span class="label abs">{{ 'product.product_loop.out_of_stock' | t }}</span>
{% endif %}
</a>
<div class="caption">
<h4>{{ product.title }}</h4>
<p>
{% if product.price_varies %}{{ 'product.product_loop.price_varies' | t }}{% endif %}{{ product.price_min | money_with_currency }}
</p>
</div>
</div>
</li>
{% if forloop.last %}
</ul>
</div>
{% else %}
{% if col_settings == '3' %}
{% cycle 'product-loop-clear-end-2': '', '', '</ul></div>' %}
{% elsif col_settings == '4' %}
{% cycle 'product-loop-clear-end-2': '', '', '', '</ul></div>' %}
{% endif %}
{% endif %}
{% endfor %}
{% else %}
<p class="alert">{{ product.product_loop.empty_collection_alert }}</p>
{% endif %}
</div>
So after adding the scripts in the proper places and editing the collection.liquid to be
{% include 'product-loop' with product %}
In an attempt call product loop. I am still getting
Liquid error: Could not find asset snippets/product.liquid
I tried contacting the plugin creator, but he did not have time, tried posting in other forums but they seem rather lackluster in terms of replies. SO I am looking for advice from the awesome stackoverflow community. Plus i have seen this problem for others online with no fixes found just yet. Thank you for the help.
When I compare in if the post.category is as if there was a post that is the variable is more when I put {{post.category}} it prints the name. It's like if he did not exist in most if I put in if site.post.category handle all values. The problem is that I want to get the current post to compare if that category. I want to list the posts by category.
<div class="posts">
{% for post in site.posts %}
{% if post.category == Eventos %}
<hr>
<div class="post">
<h1 class="post-title">
<a href="{{ site.url }}{{post.url}}">
{{ post.title }}
</a>
</h1>
<span class="post-date">{{ post.date | date_to_string }} / {{ post.category }}</span> {{ post.excerpt }}
<h6>Leia mais...</h6>
</div>
{% endif %}
{% endfor %}
</div>
Try with categories !
{% if post.categories | contains: 'Eventos' %}