Previous/Next button for Dynamic Pages

Hello,

I created a dynamic item page and followed the instructions form the article below to create previous/next buttons, but I’m having issues with my urls in the code so the buttons are not working. Can I get some feedback on what I’m doing wrong here.

Hello Yevette,

Are you importing local from Wix-storage?

import {local} from "wix-storage";

Hello Ido,

Thank you for the advice. That cleared up the “local” error. However I am still having issues with the “https”. Did I copy the url incorrectly?


incorrectly?

Hi Yvette,
‘local.setItem’ accepts two parameters, the first one is a ‘Key’ and the second one is ‘Value’.

In the article, they have the following line:

const dynamicPageURLs = result.items.map(item => item[linkField]);         
local.setItem('dynamicPageURLs', dynamicPageURLs);

Which actually sets the Key named ‘dynamicPageURLs’ to be an array of URLs (which is what you get when calling ‘result.items.map’ if the previous line).

Hope this helps,
Liran.

I’m having the same problem. Followed the tutorial and my previous/next buttons are not working on my item page.

This is my code for review.

// INDEX PAGE
import {local} from "wix-storage";

const linkField = "link-Member-Applications-emailText"; // replace this value

$w.onReady(function () {
  $w("#MemberApps").onReady(() => {
    const numberOfItems = $w("#MemberApps").getTotalCount();
  
    $w("#MemberApps").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);
      } );
  } );
} );

I got “link-Member-Applications-emailText” from the database, from the field that was auto-generated when I created and linked the Item page to my Index page.

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


$w.onReady(function () {
	$w("#prevButton").disable();
	$w("#nextButton").disable();
	
	if (local.getItem('dynamicPageURLs')) {
		let dynamicPageURLs = local.getItem('dynamicPageURLs').split(",");

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

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

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

Something strange happens and I’m not sure if it’s related, in the editor when I open the page code, it shows the little error icons beside the line numbers, then it disappears once I click in the code.

Okay, so upon further inspection, I have found that the next button works but no matter which item you are viewing, the button takes you to the first item in the dataset.

Hi! First thing is known and handled (apperaing erros for second)

Second is something strange, but looks like you don’t have anyitems in your local storage

Is it possible to share link to your site here? I can check

Yes, I wish there was a way to private message though. Please let me know when you no longer need the URLs, so I can delete them.

Index Page redacted url
Item Page redacted url

Copied those and checking, so please delete

Hi! Found the problem

Why did you delete this part from original tutorial?)

tutorial -
const currentPage = ‘/’ + wixLocation.prefix + ‘/’ + wixLocation.path.join(‘/’);

your site -
const currentPage = ‘/’ + wixLocation.path.join(‘/’);

This causes the issue.

It tries to find this -
/leafrielcoyle%40gmail.com

in this array -
/Member-Applications/testemail3%40gmail.com,/Member-Applications/testemail2%40gmail.com,/Member-Applications/testemail1%40gmail.com,/Member-Applications/leafrielcoyle%40gmail.com,/Member-Applications/jaded.rogue%40gmail.com

And it doesn’t succeed, because there is no such item

I honestly don’t know know how that happened… I thought I had copied it perfectly… :sweat_smile::sweat_smile::sweat_smile:

I’m sure it’ll work but I’ll let you know once I’ve confirmed.
Thank You Mikhail! Much Appreciated! xx

YAY! as expected, that fixed it. Thank You!

One final question.
Is there a way to loop the entries? So when you’re on the first item, if you click the previous button it takes you to the last item. And if you’re on the last item and you click the next button, it takes you back to the first item?

Yes, you should add more conditions -
if (currentPageIndex = 0) { … set wixLocation.to to last item on prevButton … }
if (currentPageIndex = dynamicPageURLs.length {… set wixLocation.to to first item on nextButton … }

but i won’t write code for you, i can only give you heneral idea how to achieve this

I’m fine with that! I should just need a point in the right direction :slight_smile:
Thanks so much Mikhail!
Cheers! :beers:

Help!

https://www.saildaddy.com/NewZealand/Picton-Marina

I’m have some difficulties with adding a “Next button and a Previous button” on a single not a category Dynamic page. I just can’t figure it out. I’ve followed steps #8 from the tutorial below and nothing happened

  1. Create Previous and Next Buttons
    Now that all your elements are connected to the same collection through the same dataset, you need to allow your visitors to browse through the information. To do this, add two buttons to your page, connect them to the same dataset as the other elements, and define their click actions.

To create Previous and Next buttons :

  1. Add two buttons to your page and change their texts to Previous and Next .

  2. Click their Connect to Data :camera:
    buttons.

  3. In the Connect Button panel, select your dataset .

  4. Under Link connects to , select Previous for the first button and Next for the second button.

So I then followed the tutorial below and I’m confused and don’t know what I’m supposed to add in

import {local} from ‘wix-storage’; to resolve the error message on line 6? Also am I supposed to be on the site or the page when adding this code?


Thank you for any help

Hi,
Can you specify the name of the page ?
Roi

hi, i am having some issue with my next and previous button. i used the technique from Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code | Help Center | Wix.com

for some reason the wixLocation.path.join (‘/’) only give me a value of yoursitename and not the info of the page i need.

this page work perfectly

but than i get stuck at getting the link with ^^’


can someone please help me?

Go back and read the page again.

On the dynamic item page, begin by adding two buttons to the page. Feel free to change the design and text of the buttons, but make sure not to add any links to the buttons.

The code we will add to the dynamic item page does the following:
Disables the previous and next buttons

You need to change your code:

 $w.onReady(function () {
   $w("#previous").disable(); // you have this as hidden so button still active
   $w("#next").disable();     // you have this as hidden so button still active

You need to have the buttons as disabled and not hidden, otherwise the code does not work as the buttons are still active despite being set as hidden and so the if statements won’t be able to enable them.

Also change the last line on each if statement too:

$w("#previous").enable();   //not as isVisible
       and
$w("#next").enable();   //not as isVisible

You can’t have visible or hidden in your code setup, you are mixing up hidden/visible with hide/show and should be used as below:

let isHidden = $w("#myElement").hidden;  // false
or
let isVisible = $w("#myElement").isVisible;  // true

In code like this
if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

See more here:

Lines 6 and 7 need to be at the top of the code before everything else, basically just delete everything before them as you’ve currently got the onReady function for the page happening before you’ve imported anything.

Like this:

1.   import {local} from 'wix-storage';
2.   import wixLocation from 'wix-location';
3.
4.   $w.onReady(function () {
5.     $w("#previous").disable();
6.     $w("#next").disable(); 

Plus, you won’t need anything past line 30 either, so delete 31 to 33.

However, as you are not using dynamic pages, then that tutorial might not be any good for you unless you change your pages to dynamic pages.

Look at this link:
https://www.wix.com/code/reference/wix-window.html#referrer

Try something like this as stated on that link:

Get the previous page within a Wix site
This example demonstrates how to use session storage to know which page is the page a site visitor previously visited. The code below needs to be placed in the Site tab so that it runs on all your site’s pages. The code retrieves the URL of the page a visitor previously visited from session storage. It then stores the URL of the visitor’s current page in session storage. When the visitor navigates to another page, this stored URL is retrieved as the previous page URL.

// In Site tab

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

let previousPageURL;

$w.onReady(function () {
  previousPageURL = session.getItem("page");
  session.setItem("page", wixLocation.url);
});

This is another back button code example from Yisrael (Wix Mod):

This example shows how to implement a Back Button to allow the site visitor to return to the previously viewed site page. This feature will only work for a published site and will not work in the Editor.​

Note that the code is added to the Site tab of the code so that it is available on all pages.

// In Site tab

import wixWindow from 'wix-window';
import {session} from 'wix-storage';
import wixLocation from 'wix-location';

let previousPageURL;

$w.onReady(function () {

    previousPageURL = session.getItem("page");
    console.log(previousPageURL);
    session.setItem("page", wixLocation.url);
    $w("#btnBack").link = previousPageURL;
    $w("#btnBack").target = "_self";
});

@givemeawhisky hi thanks for taking the time to respond. I found my error earlier which was to publish the website. the reason i used isVisible and hidden is that my button are actually image. image doesnt have those attribut (kept saying error) so i used those two instead and it works ^^