Infinite scroll - snapback cache - go to original place when click back on browser - JQuery

Solved
Highlighted
Explorer
80 7 13

Hey folks,

I implemented Ajaxinate for infinite scroll in my shop.

Unfortunately, if I click in the loaded infinite page (let's say, it would be page 5) on a product, and press the back button in the browser, I'm back in page one. The loading is lost.

So I found an interesting project how to possibly solve that, it's called snapback_cache from highrise:

https://github.com/highrisehq/snapback_cache

The basic idea is that the original page is loaded in the cache with jquery when leaving the infinite scrolled page with information about offset, and when the same url of the original page is visited within 15 minutes, the page with the offset is taken from the cache.

Unfortunately, my knowledge is too bad to successfully implement it. I'd be more than happy about some help, why it's not working.

What I did so far:

1. I added the snapback_cache.js file to the Assets folder.

2. In theme.liqid, above </head>, I added

{{ 'snapback_cache.js' | asset_url | script_tag }}

3. In collection-template.liquid, above the Ajaxinate-loop, I added

<script>
  var snapbackCache = SnapbackCache({ bodySelector: "#AjaxinateLoop", });
</script>

Here I replaced "#recordings" with "#AjaxinateLoop", because in collection-template.liquid, I created a div around the div with my product grid for the infinite loop, which is <div id="AjaxinateLoop">  So basically I think this is the div I want to check for the on click event. I'm really not sure about to place that in collection-template.liquid and if I replaced the #... correctly?

4. Right at the bottom of theme.js, I pasted

<script>
  jQuery(document).on("click", "body#grid__item a", function (e) {
  snapbackCache.cachePage();
});
</script>

Here I replaced "body#recordings a" with "body#grid__item a", because the next div after the opening #Ajaxinate is a div with class "grid__item" in which the products are listed.

    <div id="AjaxinateLoop"> 
    {% for product in collection.products %}
      {% assign featured = product %}
      <div class="grid__item {{grid_item_width}}">
        {% include 'product-grid-item' %}
      </div>
...

Maybe I should give a classname to the same div of the AjaxinateLoop? But it seems nothing is working.

The manual for the snapback says as well: 

"Call snapbackCache.cacheCurrentPage() whenever you need to"

Where should I paste that?

Another example for the snapback_cache call that I don't know how to understand:

https://gist.github.com/n8/625c218e7ac8b79fdacb

Any help or ideas how to make this code working would be massively appreciated!

My site menschenskinder-shop.de

password vuffey

Thanks!

Simonski

0 Likes
Highlighted
Explorer
80 7 13

This is an accepted solution.

Got it. If you have the same issue, here is how I got Snapback_cache working:

1. and 2. of my last post

3. In theme.liquid, right above </body> I added this

<script>
  var snapbackCache = SnapbackCache({
  bodySelector: "#AjaxinateLoop",
});
  </script>

4. Right at the bottom of theme.js I added

jQuery(document).on("click", "#AjaxinateLoop a", function (e) {
 snapbackCache.cachePage();
});

jQuery("#AjaxinateLoop").on("snapback-cache:loaded", function(e, cachedPage) {
  // sets the pager to page from the appropriate place
  EndlessPage.offset = cachedPage.nextPageOffset
});

Hope this helps! Working perfectly on my page!

 

1 Like