Answers iFrame - Forward Pagination does not Jump you to Top of Page

Search Best Practices - Integration
1

Hey Team!

My client just went live with the JS Snippet method on Answers. I noticed on the live experience that when you click the forward paginate button, it does not jump you to the top of the results. However, this DOES happen in my staging environment.

Perhaps this is a negative implication of the iFrame? Curious to hear your thoughts.

2

Hi @jyorke - thanks for the feedback and agreed it appears to be an iFrame consideration. We’ve escalated to our frontend Prod/Eng team and will keep you posted with updates.

Best,
Sam

3

Thanks Sam! Jessie, we’re working on a fix for this and will get back to you with timing. If it ends up being longer than a couple weeks, there is a short term solution that involves overriding the component in the theme, but it’s a bit more complicated (and makes upgrading harder).

4

Aha - thanks Rose. Really appreciate it !

5

Hi Jessie,

We’re working on getting this update into the next theme release (January). If you need a fix sooner:

  1. Override the Pagination component script: In Jambo commands, pick “override theme”, and select templates/[[layout name]]/script/pagination.hbs. You will need to do this for each template you’re referencing that’s also using pagination, likely vertical-standard, vertical-map and vertical-grid.

  2. In your forked script file, below the container: ".js-answersPagination", add the following (don’t forget the comma outside the last bracket):

ANSWERS.addComponent("Pagination", Object.assign({}, {
  container: ".js-answersPagination",

  {{!--  start addition for pagination scrolling --}}
  onPaginate: (newPageNumber, oldPageNumber, totalPages) => {
    window.parentIFrame.sendMessage('{"message": "paginate"}');
  },
  {{!--  end addition for pagination scrolling --}}

  {{#if verticalKey}}
    verticalKey: "{{{verticalKey}}}",
  {{/if}}
}, {{{ json componentSettings.Pagination }}}));

  1. Override iframe-common.js. Jambo commands > “override theme” > pick the static/js/iframe-common.js file.

  2. Add the following if statement to the iframeResize function at the end of iframe-common.js

  iFrameResize({
    checkOrigin: false,
    onMessage: function(messageData) {
      const message = JSON.parse(messageData.message);

      //start addition for pagination scrolling
      if (message.message === "paginate") {
        document.documentElement.scrollTop = 0;
        // For Safari
        document.body.scrollTop = 0;
        return;
      }
     //end addition for pagination scrolling
    
      const params = message.params;
      const pageTitle = message.pageTitle;
      pageTitle && (iframe.title = pageTitle);
      iframe.iFrameResizer.resize();
      var currLocation = window.location.href.split('?')[0];
      var newLocation = currLocation + '?' + params;
      if (window.location.href !== newLocation) {
        history.replaceState({query: params}, window.document.title, newLocation);
      }

    }
  }, '#answers-frame');

Note you could use scrollTo instead, which would allow you to get to the top of the results. However, this isn’t IE11 compatible.

Let us know how this works for you! Again, look out for a permanent theme fix coming in the next theme release.

Thanks,
Rose