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.
Related
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>
I am looking for a way to build a navigation that is populated with a .yaml file. I can iterate over the yaml to create the nav items and correct urls that also adds an active class to the nav item when you are on that particular url. I uploaded a screenshot of the existing nav
nav getting populated with active class
my yaml file
nav:
- page: Home
url: /index.html
- page: Getting Started
url: /getting-started.html
- title: Delivery
subfolderitems:
- page: Intro
url: /Delivery/delivery-intro.html
- page: Set Up
url: /Delivery/delivery-deploy.html
- page: Thing 3
url: /thing3.html
- title: Group 2
subfolderitems:
- page: Piece 1
url: /piece1.html
- page: Piece 2
url: /piece2.html
- page: Piece 3
url: /piece3.html
- title: Group 3
subfolderitems:
- page: Widget 1
url: /widget1.html
- page: Widget 2
url: /widget2.html
- page: Widget 3
url: /widget3.html
my html file
<nav>
<ul id="nav-menu" class="nav nav-list">
{% for item in site.data.static-nav.nav %}
<li class="{% if item.url == page.url %} active-item {% endif %}">
{{ item.page }}
</li>
{% if item.subfolderitems[0] %}
{% for subitem in item.subfolderitems %}
{% if subitem.url == page.url %}
{% assign activesubitem = true %}
{% endif %}
{% endfor %}
<li class="parent {% if activesubitem == true %}collapsibleListOpen{% else %}collapsibleListClosed{% endif %}">
<div class="subtree-name">{{ item.title }}</div>
<ul class="nav nav-list">
{% for subitem in item.subfolderitems %}
<li class="{% if subitem.url == page.url %} active-item {% endif %}">
{{ subitem.page }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
I am running into an issue with the subfolder items being in accordions and having the parent accordion being toggled opened when one of the subitems matches the current url and therefore being active. Is there away to find the parent item with yaml and liquid? I then could somehow check if a parent nav item contains an active sub item ?
If anyone else is stuck on this, I was able to use {% break %}inside the for loop to break out of the loop. You may need a newish version of liquid to use {% break %}. I then assigned a variable that will add the class to have the correct accordion be opened when you open a subpage that is within that accordion.
<nav>
<ul id="nav-menu" class="nav nav-list">
{% for item in site.data.static-nav.nav %}
<li class="{% if item.url == page.url %} active-item {% endif %}">
{{ item.page }}
</li>
{% assign item_isOpen = false %}
{% if item.subfolderitems[0] %}
{% for subitem in item.subfolderitems %}
{% if subitem.url == page.url %}
{% assign item_isOpen = true %}
{% break %}
{% endif %}
{% endfor %}
<li class="{% if item_isOpen == true %} parent collapsibleListOpen {% else %} parent collapsibleListClosed {% endif %}">
<div class="subtree-name">{{ item.title }}</div>
<ul class="nav nav-list">
{% for subitem in item.subfolderitems %}
<li class="{% if subitem.url == page.url %} active-item {% endif %}">
{{ subitem.page }}
</li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>
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.
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'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>