Navigating back to collection, Keep products loaded

Raw_Soul
New Member
7 0 0

Hello,

Having trouble with collections and customers being able to find products. Here is the scenario:

Your on one of my collections that has a show more button for loading products, click that two times so there is 150 products loaded, then view one of those products. You then push the back button to view the collection again but now only the first 50 products you didn't like are shown again and you have to click the show more button twice to get back to where you were.

Is there a way to keep the products that you previouly loaded active after viewing a product and navigating back?

Thanks,

Russ

0 Likes
Jason
Shopify Expert
10263 142 1940

Hey Russ,

This is going to come down to the code in the theme. Right now it sounds like you've got a button that AJAX loads content after the main page has loaded.

When you navigate away from the page that dynamic content won't remain in place since it was loaded later. The browser won't retain content that was loaded via AJAX.

The theme code would need to know how many additional pages had been loaded, and repeat that loading process when returning. One the content is loaded the scripts could move the page down to the bottom of the products.

You can try and save the loaded HTML in localstorage but you can't rely on that being available.

So to answer the question in a general sense - yes, it's possible. Your theme will need customisation to add that feature. It will be more work than what you can expect from the forums so find a good front end dev and work with them to build it in.

This is a good place to start:
https://experts.shopify.com/

 

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Raw_Soul
New Member
7 0 0

Thanks for the info! Will do  :)

0 Likes
David_Santana
New Member
6 0 0

But is there a way to prevent having to click twice on a specific collection or sub-collection? Why can I navigate through my page with just one click? I have looked everywhere for this answer.

0 Likes
Raw_Soul
New Member
7 0 0

Figured it out. Add this code to the bottom of your collection.liquid  

<script type="text/javascript">
  $(function () {
	scrollFrame('#prolist a');
  });
</script>

And make these two .js files and add them into your assests folder.

 

scroll-frame.js

(function() {

  // Ignore for unsupported browsers
  if (!(window.history && window.history.pushState)) return;

  // Main function that listens for clicks to the selector and opens the
  // href of the element in the iframe modal.
  //
  // @param {String} selector DOM query selector e.g. 'ul.list-items a'

  var scrollFrame = function(selector) {
    refreshOnNewIframePage();
    document.addEventListener('click', function(e) {
      // Ignore ctrl/cmd/shift clicks, as well as middle clicks
      if (e.ctrlKey || e.metaKey || e.shiftKey || e.which === 2) return;

      // Ignore if the element doesnt match our selector
      var els = document.querySelectorAll(selector);
      var elMatchesSelector = (window.Array || Array) // Hack for Zombie testing
        .prototype.filter.call(els, function(el) {
          return el == e.target || el.contains(e.target);
        }).length > 0
      if (!elMatchesSelector) return;

      // Get the href & open the iframe on that url
      var href = e.target.href || e.target.parentNode.href;
      if (href) {
        e.preventDefault();
        openIframe(href);
      }
    });
  }

  // Change pushState and open the iframe modal pointing to this url.
  //
  // @param {String} url

  var openIframe = function(url) {
    var prevHref = location.href;
    var prevTitle = document.title;

    // Change the history
    history.pushState({ scrollFrame: true, href: location.href }, '', url);

    // Create the wrapper & iframe modal
    var body = document.getElementsByTagName('body')[0];
    var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false;
    var attributes = [
      'position: fixed', 'top: 0', 'left: 0','width: 100%', 'height: 100%',
      'z-index: 10000000', 'background-color: white', 'border: 0'
    ];

    //only add scrolling fix for ios devices
    if (iOS){
      attributes.push('overflow-y: scroll');
      attributes.push('-webkit-overflow-scrolling: touch');
    }
    //create wrapper for iOS scroll fix
    var wrapper = document.createElement("div");
    wrapper.setAttribute('style',attributes.join(';'));
    var iframe = document.createElement("iframe");
    iframe.className = 'scroll-frame-iframe'
    iframe.setAttribute('style', [
      'width: 100%', 'height: 100%', 'position:absolute',
      'border: 0'
    ].join(';'));

    // Lock the body from scrolling & hide the body's scroll bars.
    body.setAttribute('style', 'overflow: hidden;' +
      (body.getAttribute('style') || ''));

    // Add a class to the body while the iframe loads then append it
    body.className += ' scroll-frame-loading';
    iframe.onload = function() {
      body.className = body.className.replace(' scroll-frame-loading', '');
      document.title = iframe.contentDocument.title;
    }
    wrapper.appendChild(iframe);
    body.appendChild(wrapper);
    iframe.contentWindow.location.replace(url);

    // On back-button remove the wrapper
    var onPopState = function(e) {
      if (location.href != prevHref) return;
      wrapper.removeChild(iframe);
      document.title = prevTitle;
      body.removeChild(wrapper);
      body.setAttribute('style',
        body.getAttribute('style').replace('overflow: hidden;', ''));
      removeEventListener('popstate', onPopState);
    }
    addEventListener('popstate', onPopState);
  }

  // To keep iframes from stacking up inside of each other and potentially
  // getting into a very messy state we'll use messaging b/t iframes to
  // signal when we've dived more than a page deep inside of our iframe modal
  // and cause the page to do a full refresh instead.

  var refreshOnNewIframePage = function() {
    addEventListener('message', function(e) {
      if (!e.data.href) return;
      if (!e.data.scrollFrame == true) return;
      if (e.data.href == this.location.href) return;
      var body = document.getElementsByTagName('body')[0];
      var html = document.getElementsByTagName('html')[0];
      this.location.assign(e.data.href);
    });
  }

  // Export for CommonJS & window global
  if (typeof module != 'undefined') {
    module.exports = scrollFrame;
  } else {
    window.scrollFrame = scrollFrame;
  }
})();

scroll-frame-head.js

(function() {

  // Ignore for unsupported browsers
  if (!(window.history && window.history.pushState)) return;

  // If we're inside an iframe modal then send a message to the parent
  // indicating what the iframe's location is so that the parent can decide
  // not to go down a rabbit hole inside the iframe.
  if (parent && parent.postMessage) {
    // postMessage support for IE & other browsers
    if (window.MessageChannel && navigator.userAgent.indexOf('MSIE') > -1) {
      var m = new MessageChannel();
      parent.postMessage({
        href: location.href,
        scrollFrame: true
      }, "*", [m.port2]);
    } else {
      parent.postMessage({
        href: location.href,
        scrollFrame: true
      }, location.origin);
    }
  }

  // When navigating another level deep scrollFrame will refresh the page.
  // Hitting the back button will halt when it gets to the popstate point
  // at which scrollFrame added the iframe modal. This will notice that and
  // make the full refresh instead.
  var firstPopStateTriggered;
  addEventListener('popstate', function(e) {
    if (firstPopStateTriggered && e.state && e.state.scrollFrame &&
        !document.querySelector('.scroll-frame-iframe')) {
      location = e.state.href;
    }
    firstPopStateTriggered = true;
  });
})();

 

0 Likes
ktina23
New Member
1 0 0

@Raw_Soul When I add the code as suggested, the back button returns to the last loaded section as intended (thank you!), but now all my product images are whitewashed like a watermark.  Would you help me figure this out, please?

0 Likes
Gettoss
New Member
4 0 0

I signed up to say THANK YOU!

it works on mobile

0 Likes