Next/previous buttons

Ask the community
,
21

Hi Ziv,
Sorry for this late response, but we’d entered sleep mode down here in South Africa.

Explaining my set up could be useful. I work off 2 sites; this plant library database site (TPL) you’ve been helping me with is accessed from a menu link on my anchor site (TIG) but is also a standalone site that will be found on Google and so accessed outside of TIG (The Indigenous Gardener).

TPL works in tandem with all of the inspiration gallery pages on TIG, and I imagine users will expect usability to be the same, and I’d like it to be the same. TIG gallery pages were built with Wix Pro Gallery, so, once they click on an image, users navigate through the slideshow using the arrows. Then, once they’ve looked at images of grasslands, they navigate to TPL to find grassland plants. From the grassland gallery page, when they click on a plant image, they will expect to move through this gallery as a slideshow, from one grassland plant to the next and back again if need be. It makes sense for this movement to be alphabetical.

If they get to a grassland plant (item) page via a google search, it would probably make more sense for the buttons to move them on to the next plant in my database alphabetically. Many plants fall into a variety of categories, so there is no way of knowing through which plant category to navigate them. But having these buttons would at least show these users that the site offers info on a variety of plants and hopefully keeps them on the site for longer.

Hope this helps. And thanks for all of your help; I’m delighted to have this facility now working.
Anno

22

Thanks guys,
this info will help us build it right.

23

So is there any way the method I am asking can be achieved?

24

actually, Shay’s code snippets do exactly that.
the code snippet for the gallery page iterates over all items, and pushes their URLs into local storage.
the code snippet for the item page loads that list or URLs, finds the URL of the current page, and deduces the next and previous ones from that list.

this should work for you, give it a go and let’s see.

25

Hi this is still now working for me, I get error: Wix code SDK error: is unsupported url

It is not clear anywhere in your articles/forum exactly what the dynamic url and linkfield properties should be. My dynamic page URL is Hall-of-Fame-(Name:), do I use that or Hall-of-Fame-title as a lot of your examples show. Please help as this has now been a week with no real answers except to people who have jumped on this thread!

GALLERY PAGE - I am unsure of linkfield name, and dynamic url

import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;

$w.onReady(function () {
$w(“#previous”).disable();
$w(“#next”).disable();

if (local.getItem('link-Hall-of-Fame-(Name:)')) { 
	let dynamicPageURLs = local.getItem('link-Hall-of-Fame-title').split(","); 

	let currentPage = "/" + wixLocation.path.join('/'); 
	let currentPageIndex = dynamicPageURLs.indexOf(currentPage); 

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

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

});

DYNAMIC PAGE CODE:

import {local} from ‘wix-storage’;
import wixLocation from ‘wix-location’;

$w.onReady(function () {
$w(“#previous”).disable();
$w(“#next”).disable();

if (local.getItem('link-Hall-of-Fame-(Name:)')) { 
	let dynamicPageURLs = local.getItem('link-Hall-of-Fame-(Name:)').split(","); 

	let currentPage = "/" + wixLocation.path.join('/'); 
	let currentPageIndex = dynamicPageURLs.indexOf(currentPage); 

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

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

});

26

Hi Leighton,
it seems you have used the same (almost identical) snippet for both pages.
the code for the Gallery page you pasted above is actually not right and should be based on the snippet we provided for Category page. Please read again the answer from Sam from a few days ago.

to further explain:
there are two snippets here.

  • one for the Gallery page which iterates over all the items in the gallery, creates an array of their URLs, and adds it to the browser’s local storage with a key named “dynamicPageURLs”.
  • one for the item page which looks for this data in local storage, using the same key “dynamicPageURLs” . once the data is found, the code looks for the current page’s URL in the array of URLs.
    once it finds it, it grabs the URLs of the item just before and just after the current URL, and assigns them to the next/prev buttons.

I hope this helps, if you still can’t get it to work we can try to schedule a call and get it working.
good luck!

27

arggh I copied the same twice.

GALLERY PAGE:

import {local} from “wix-storage”;

let linkField = “link-Hall-of-Fame-title:”; // replace value with field key for item page

$w.onReady(function () {
$w(“#dataset1”).onReady(() => {
let numberOfItems = $w(“#dataset1”).getTotalCount();

	$w("#dataset1").getItems(0, numberOfItems) 
		.then((result) => {	 
			let dynamicPageURLs = new Array(); 
			
			result.items.forEach( (item) => { 
				dynamicPageURLs.push(item[linkField]); 
			}); 
			
			local.setItem('link-Hall-of-Fame-(Name:)', dynamicPageURLs); 
		}) 
		.catch(( err) => { 
			console.log(err.code, err.message); 
		}); 
});

});

28

looking at your code again, you have this line:
let linkField = “link-Hall-of-Fame-title:”; // replace value with field key for item page

it seems to me that you have an extra ‘:’ at the end of the field name.
this causes the code to break -

  • the gallery code looks for the value of the field "let linkField = “link-Hall-of-Fame-title:”
  • the gallery code does not find it, hence all the URLs being pushed into the array are nulls
  • when the item page tries to look for the current URL in the array, it doesn’t find it
  • instead the index it gets is “-1” to designate that the item wasn’t found
  • now the code enables the next button and attaches an onClick handler to it
  • clicking the button runs the handler, which tries to route to a null URL
    ==>
    you get the error.

bottom line, try it again without the extra ‘:’.

fingers crosses :wink:

let us know if it finally did the trick.

29

Yes! Finally, all good thanks guys

30

Hi, I am facing issues with the Previous/Next button. I have applied the code and the Next button works but the Previous button is greyed out.

Index page

import { local } from ‘wix-storage’ ;

const linkField = “link-portfolio-title” ; // replace this value

$w . onReady ( function () {
$w ( “#portfolioDataset” ). onReady (() => {
const numberOfItems = $w ( “#portfolioDataset” ). getTotalCount ();

$w ( "#portfolioDataset" ). 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 ); 
  } );

} );
} );

There is also an error in idenitfying dynamicPageURLs, as you can see below. Not sure why?

Item page
import { local } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
$w ( “#previousBtn” ). disable ();
$w ( “#nextBtn” ). 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 ( "#previousBtn" ). link  =  dynamicPageURLs [ currentPageIndex  -  1 ]; 
  $w ( "#previousBtn" ). enable (); 
} 

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

}
} );

31

what do i have to do to make my next and prev button to work from this code

import { local } from ‘wix-storage’ ;

const linkField = “prev|next” ; // replace this value

$w . onReady ( function () {
$w ( “#myDataset” ). onReady (() => {
const numberOfItems = $w ( “#myDataset” ). getTotalCount ();

$w ( "#myDataset" ). 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 ); 
  } );

} );
} );
import { local } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;

$w . onReady ( function () {
$w ( “#prev” ). 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 ( "#prev" ). link  =  dynamicPageURLs[currentPageIndex  -  1 ]; 
  $w ( "#prev" ). enable (); 
} 

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

}
} );