Previous / Next Button on Dynamic Page - works on preview, not on published site

Ask the community
,
1

Hi,

I added previous and next buttons for a dynamic item page following this tutorial: https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code
It works fine in preview mode but on the published version, something weird happens. It does work sometimes but not all the time.

Here is my index page :

936×780 400 KB

where I added this code:

import {local} from 'wix-storage';

const linkField = "link-lesoon-page-title"; 

$w.onReady(function () {
  $w("#dynamicDataset").onReady(() => {
    const numberOfItems = $w("#dynamicDataset").getTotalCount();
  
    $w("#dynamicDataset").getItems(0, numberOfItems)
      .then( (result) => { 
        const dynamicPageURLs = result.items.map(item => item[linkField]);
        local.setItem('dynamicPageURLs', dynamicPageURLs);
      } )
      .catch( (err) => {
        console.log(err.code, err.message);
      } );
  } );
} );

That’s the item page - in this case the buttons are working fine:

949×863 443 KB

Here is another item page - here the buttons are not working properly, the next button (suivante) is greyed whereas there are items after this one and the previous button (précédente) redirects back to the last page of the collection

934×875 381 KB

Here is the code I used on the item page:

import {local} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#previous").disable();
  $w("#next").disable();
 
  if (local.getItem('dynamicPageURLs')) {
    const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');

    const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);

    if (currentPageIndex > 0) {
      $w("#previous").link = dynamicPageURLs[currentPageIndex - 1];
      $w("#previous").enable();
    }

    if (currentPageIndex < dynamicPageURLs.length - 1) {
      $w("#next").link = dynamicPageURLs[currentPageIndex + 1];
      $w("#next").enable();
    }
  }
} );

Is it maybe due to the URL form of that specific element of the collection?
I would appreciate any help!

Thanks,
Elsa

2

Have you tried using console.log() statements to see what the URLs look like? Maybe there’s something wrong with the resulting URL structure, or special characters that aren’t recognized in URLs.

3

Hi,
Thanks, I found the problem.
It was due to special characters that were not recognized in URLs (: ? & etc.)

Thanks for the help!

4

I had the same problem. The ‘next page’ button worked up to a certain page but then failed. I had two of those buttons on the page, one at the top and one at the bottom. The bottom on seemed to reload the current page, moving the display to the top of the page, so the button itself was doing something, just not the right thing!
I messed around checking the number of pages loaded and other details on the page, and eventually decided the problem might be on the next page. I checked that too: all looked OK … but anyway I deleted and recreated that ‘next’ page in the CMS, cutting and pasting content from browser tab showing the original page, then moving it to the correct position in the list (manual sort), and that has fixed it.
I guess there was something wrong in the CMS for that ‘next’ page - something non-obvious.
Now I need to continue checking all the back, up and next buttons!