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>↓ <a href="{{ paginate.next.url }}">More</a></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><a href= "{{ product.url | within: col_group }}" title="{{ product.title }}">{{ product.title }}</a></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.
