Product navigation within a Collection

Highlighted
Shopify Partner
21 0 9

The offset:50, etc certainly helps the brute force approach.

Thank you.

0 Likes
Shopify Partner
21 0 9

I've found a completely different solution to this based on the use of the paginate object and javascript.  In the collection template I use the pagination to set a product_index like this:

      {% assign product_index = paginate.current_offset %}
      {% for product in collection.products %}
        {% assign product_index = product_index | plus: 1 %}

Then within the collection_nav snippet, I use code like:

  {% if collection.previous_product or collection.next_product %}
    {% if collection.previous_product %}
      {% capture prev_url %}{{ collection.previous_product}}{% endcapture %}
      <a id="previous" class="active" href="{{ prev_url }}">&lt; </a>
    {% else %}
      <span id="previous" class="disabled">{{ 'products.general.previous_product_html' | t}}</span>    
    {% endif %}
    {% unless product_index %}
      {% assign product_index = '?' %}
    {% endunless %}
    <span id="ndx">{{ product_index }}</span>/<span id="product_count">{{ collection.products_count }}</span>
    {% if collection.next_product %}
      {% capture next_url %}{{ collection.next_product}}{% endcapture %}
      <a id="next" class="active" href="{{ next_url }}">&gt; </a> 
    {% else %}
      <span id="next" class="disabled">{{ 'products.general.next_product_html' | t}}</span>    
    {% endif %}
  {% endif %}

to build the < index/total > navigation for the product.  Note that the previous, next and ndx fields have ids so they can be easily targeted by javascript.  I then use a session cookie and the following javascript to keep these updated as the user navigates between products:

// silvermapleweb specific JS
/*
 * use the index in the next and previous buttons
 */
smw_use_index = function() {
  var index = smw_get_index();
  
  // if we have no index attempt to infer it from first and last
  if(index == 0) {
    if($('#previous').hasClass('disabled')) index = 1;  
    else if($('#next').hasClass('disabled')) index = parseInt($('#product_count').text());
  }  
  
  // set the index value on the page and click handlers for the buttons
  var ndxElement = $('#ndx');
  if (index && ndxElement) {
    ndxElement.text(index);
    $('#previous').click(function() {
      smw_set_index(index - 1, this);
    });
    $('#next').click(function() {
      smw_set_index(index + 1, this);
    });
  }
}

/*
 * set the index and pathname in the cookie, the caller must be an <a> element
 */
smw_set_index = function(index, caller) {
  $.cookie.json = true;
  $.cookie('smw_product_index', { index: index, pathname: caller.pathname}, { path: '/' });
}

/*
 * get the index from the cookie
 */
smw_get_index = function() {
  var myurl = window.location.pathname;
  var index = 0;

  $.cookie.json = true;
  var cookie = $.cookie('smw_product_index');

  if (cookie && myurl == cookie.pathname) index = parseInt(cookie.index);
  return index;
}

$(smw_use_index);

This fails for bookmarked and copy and pasted urls, in those cases the index appears as '?', but will return to the correct value at the beggining or end of the collection, of if the product with the cookie is encountered. 

It appears to work well, and works for any collection, not just custom collections.

 

 

0 Likes
Shopify Partner
167 0 36

Thank you for posting an update, Peter. 

I'm currently about to head to bed, so I haven't given this a proper read but I'll be sure to do so tomorrow. 

0 Likes