I'm trying to display an image in my Shopify store if a product has a variant of "OS" , if it doesn't then I need to display a different image. I also need to display the title of each variant for the product. This is what I have now, but it doesn't seem to be working.
<div class="homepage-sizechart">
<div class="sizes">
{% if product.variants.title contains 'OS' %}
{{ 'onesize-triangle.png' | asset_url | img_tag }}
{% else %}
{{ 'size-triangle.png' | asset_url | img_tag }}
{% endif %}
{% for variant in product.variants %}
<span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %}">{{ variant.title }}</span>
{% endfor %}
</div>
</div>
product.variants is a collection, so you'll need to loop through it to determine if one of the variants has a title containing 'OS'.
Something like this:
{% assign contains_os = false %}
{% for variant in product.variants %}
{% if variant.title contains 'OS' %}
{% assign contains_os = true %}
{% endif %}
{% endfor %}
<div class="homepage-sizechart">
<div class="sizes">
{% if contains_os %}
{{ 'onesize-triangle.png' | asset_url | img_tag }}
{% else %}
{{ 'size-triangle.png' | asset_url | img_tag }}
{% endif %}
{% for variant in product.variants %}
<span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %}">{{ variant.title }}</span>
{% endfor %}
</div>
</div>
Related
I have two for loops looking at blocks within a section and I am using an if statement to check the block type each time. I want to show a hr to separate each block of each type, unless its the last block where I don't want the hr to show.
I thought using forloop.last would work but for some reason, the forloop.last check is only working on the second loop. It seems the initial loop is not closing or the forloop.last is not picking up on the if statement for block type. Example code below:
{% if section.settings.productaccordion_active %}
<ul class="product-accordion product-accordion-small">
{% if section.settings.accordion_description_active %}
<li id="product-accordion-1">
<div class="product-accordion-title">Description</div>
<div class="product-accordion-content">
{%- for block in section.blocks -%}
{% if block.type == "accordion_description" %}
{% if block.settings.accordion_description_title %}
<h5>{{ block.settings.accordion_description_title }}</h5>
{{ block.settings.accordion_description_content }}
{% endif %}
{% unless forloop.last %}
<hr>
{% endunless %}
{% endif %}
{%- endfor -%}
</div>
</li>
{% endif %}
{% if section.settings.accordion_ingredients_active %}
<li id="product-accordion-2">
<div class="product-accordion-title">Ingredients</div>
<div class="product-accordion-content">
{%- for block in section.blocks -%}
{% if block.type == "accordion_ingredients" %}
{% if block.settings.accordion_ingredients_title %}
<h5>{{ block.settings.accordion_ingredients_title }}</h5>
{{ block.settings.accordion_ingredients_content }}
<br><span class="product-popup-link" data-popupid="popup_ingredient_A_breakdown">See breakdown</span>
<br><span class="product-popup-link" data-popupid="popup_ingredient_A_full">See full list</span>
{% endif %}
{% unless forloop.last %}
<hr>
{% endunless %}
{% endif %}
{%- endfor -%}
</div>
</li>
{% endif %}
Any help would be greatly appreciated.
The forloop.last condition cannot be fulfilled for each loop because you add an if condition. So if the last item in the loop is not of the type you display, then <hr> will never be displayed.
Here is something that should work (not tested).
First, you create two arrays containing only blocks with needed types.
{% liquid
assign description_blocks = section.blocks | where: "type", "accordion_description"
assign ingredient_blocks = section.blocks | where: "type", "accordion_ingredients"
%}
Then you loop through each array defined above.
This way, for each one, it will always iterate the last item of the loop.
<ul class="product-accordion product-accordion-small">
{% if section.settings.accordion_description_active %}
<li id="product-accordion-1">
{%- for block in description_blocks -%}
Do something
{% unless forloop.last %}
<hr>
{% endunless %}
{%- endfor -%}
</li>
{% endif %}
{% if section.settings.accordion_ingredients_active %}
<li id="product-accordion-2">
{%- for block in ingredient_blocks -%}
Do something
{% unless forloop.last %}
<hr>
{% endunless %}
{%- endfor -%}
</li>
{% endif %}
</ul>
Here is some documentation about the where filter:
https://shopify.github.io/liquid/filters/where/
HTH
I have a page showing all the posts ordered by tag. The thing is that I only want some tags to be shown, not all of them. The thing would be after the "for tag in site.tags" implement an if like tag == x. I'm new to Jekyll and ruby and I don't know how to do it :/
{% capture site_tags %}{% for tag in site.tags %}{{tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
{% assign tag_words = site_tags | split:',' | sort %}
<ul class="tags">
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
{% capture this_word %}{{ tag_words[item] }}{% endcapture %}
<li>
<a href="#{{ this_word | cgi_escape }}" class="tag">{{ this_word }}
<span>({{ site.tags[this_word].size }})</span>
</a>
</li>
{% endunless %}{% endfor %}
</ul>
<div>
{% for item in (0..site.tags.size) %}{% unless forloop.last %}
{% capture this_word %}{{ tag_words[item] }}{% endcapture %}
<h2 id="{{ this_word | cgi_escape }}">{{ this_word }}</h2>
{% for post in site.tags[this_word] %}{% if post.title != null %}
<div>
<span style="float: left;">
{{ post.title }}
</span>
<span style="float: right;">
{{ post.date | date_to_string }}
</span>
</div>
<div style="clear: both;"></div>
{% endif %}{% endfor %}
{% endunless %}{% endfor %}
</div>
Change this:
{% capture site_tags %}
{% for tag in site.tags %}...{% endfor %}
{% endcapture %}
Into this:
{% capture site_tags %}
{% for tag in site.tags %}
{% if tag.title != 'excludedtag' %}...{% endif %}
{% endfor %}
{% endcapture %}
And change 'excludedtag' to the tag title you want to exclude.
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.
Help to fix my code in phalconphp with volt I think so long
{% for casing in casings %}
{% set i = 0 %}
{% for case in cases if case.casing == casing.type %} //it have 4 loop but cases length is 20
{% set i += 1 %}
{% endfor %}
{% if i == 0 %}
No values set
{% else %}
<ul>
{% for case in cases if case.casing == casing.type %} // it repeat twice in my code
<li> {{ case.description }} - {{ case.value }} </li>
{% endfor %}
<ul>
{% endif %}
{% endif %}
I know have loop.length, loop.index in for loop but when I use if in loop it have not number I want.
{% for casing in casings %}
{% if loop.first %}
<ul>
{% endif %}
{% for case in cases if case.casing == casing.type %}
<li> {{ case.description }} - {{ case.value }} </li>
{% endfor %}
{% if loop.last %}
<ul>
{% endif %}
{% else %}
No values set
{% endfor %}
{% for casing in casings %}
{% if loop.first %}
<ul>
{% endif %}
{% for case in cases if case.casing == casing.type %}
<li> {{ case.description }} - {{ case.value }} </li>
{% endfor %}
{% if loop.last %}
<ul>
{% endif %}
{% else %}
No values set
{% endfor %}
Thankyou for supported
I would like to display third-level menu items in Zotonic.
For example if I have pages in a hierarchy like the following:
About Us
Careers
Why work here?
I want the Why work here? to be accessible in the drop-down menus.
How do you get third-level menu items in Zotonic?
I used Page Connections and a modified menu template. This requires Zotonic 0.5.0 or later.
Create a Predicate called Menu from text to text
Edit /modules/mod_menu/templates/_menu.tpl:
Turn the original menu template:
{% if menu %}
<ul id="{{ id_prefix }}navigation" class="clearfix at-menu do_superfish">
{% for mid,depth,nr,has_sub in menu %}
{% if not mid %}
{% if depth > 1 %}</ul></li>{% endif %}
{% else %}
{% if nr == 1 and not forloop.first %}<ul{% if mid|member:path %} class="onpath"{% endif %}>{% endif %}
<li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
<a href="{{ m.rsc[mid].page_url }}"
class="{{ m.rsc[mid].name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[mid].short_title|default:m.rsc[mid].title }}</a>
{% if not has_sub %}</li>{% endif %}
{% endif %}
{% endfor %}
{% if forloop.last %}{% include "_menu_extra.tpl" %}{% endif %}
</ul>
{% endif %}
Into the third-level menu version:
{% if menu %}
<ul id="{{ id_prefix }}navigation" class="clearfix at-menu do_superfish">
{% for mid,depth,nr,has_sub in menu %}
{% if not mid %}
{% if depth > 1 %}</ul></li>{% endif %}
{% else %}
{% if nr == 1 and not forloop.first %}<ul{% if mid|member:path %} class="onpath"{% endif %}>{% endif %}
<li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
<a href="{{ m.rsc[mid].page_url }}"
class="{{ m.rsc[mid].name }}{% if mid == id %} current{% else %}{% if mid|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[mid].short_title|default:m.rsc[mid].title }}</a>
{% if depth == 2 %}
{% for submenu in m.rsc[mid].menu %}
{% if forloop.first %}<ul>{% endif %}
<li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
<a href="{{ m.rsc[submenu].page_url }}"
class="{{ m.rsc[submenu].name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[submenu].short_title|default:m.rsc[submenu].title }}</a></li>
{% if forloop.last %}</ul>{% endif %}
{% endfor %}
{% endif %}
{% if not has_sub %}</li>{% endif %}
{% endif %}
{% endfor %}
{% if forloop.last %}{% include "_menu_extra.tpl" %}{% endif %}
</ul>
{% endif %}
By adding a special case for the menu page connections of second-level items:
{% if depth == 2 %}
{% for submenu in m.rsc[mid].menu %}
{% if forloop.first %}<ul>{% endif %}
<li id="{{ id_prefix }}nav-item-{{nr}}" class="{% if is_first %}first {% endif %}{% if is_last %}last{% endif %}">
<a href="{{ m.rsc[submenu].page_url }}"
class="{{ m.rsc[submenu].name }}{% if submenu == id %} current{% else %}{% if submenu|member:path %} onpath{% endif %}{% endif %}">{{ m.rsc[submenu].short_title|default:m.rsc[submenu].title }}</a></li>
{% if forloop.last %}</ul>{% endif %}
{% endfor %}
{% endif %}
In Page Connections add *Menu*s to each page that needs third-level items in the menu