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.
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).
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.
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
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 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
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 :
Add two buttons to your page and change their texts to Previous and Next .
Click their Connect to Data
buttons.
In the Connect Button panel, select your dataset .
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?
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();
}
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.
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 ^^