Create Previous and Next Buttons for a Dynamic Item Page

Ask the community
,
1

Ok - newbie and not an experienced coder by any stretch of the imagination. I’m trying to create “back” and “next” buttons for a dynamic page. I’m following the tutorial at: Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code | Help Center | Wix.com to the letter!

I’ve changed the dataset ID and the “link to item” value to the field key and end up with this javascript:

import {local} from “wix-storage”;

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

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

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

} );
} );

However, when I copy & paste this code into the page tab of the Code panel I keep getting the following error message: “ESLint failed to validate as an error occurred unknown character at postition 9” ??? Can anyone assist please as this is only the 1st stage in the process?

2

PS - if by “position 9” - it means line 9 - this is the code which appears on that line:
$w(“#Artwork-Images”).onReady(() => {

3

Hi,

is ’ #Artwork -Images’ the name of your dataset or database?

Liran.

4

Hi Liran - the database name is “#Artwork-Images” - when I click onto the dataset settings on the index page the dataset name is coming up as “#Artwork-Images dataset” - is that why I’m getting the error message?

5

Could be…
Please open the properties panel (tool->properties panel), then select the Dataset, then change it’s id accordingly or copy it from there to the code.

Liran.

6

I’ve just done that. Am now getting an error message on Line 15 stating: “local” is undefined ?

7

Ignore last comment Liran - I’ve managed to solve that part - thanks - I’m moving onto the next step

8

On the next step in the code panel I am now getting the following error messages:
“#previous” is not a valid selector name and “#back” is not a valid selector name (both the buttons on the dynamic item page have been named this and both are in lower case)? If I ignore the error messages and preview the item page I am getting:
Loading the code for the Artwork-Images (Title) page. To debug this code, open chiye.js in Developer Tools.TypeError: $w(…).disable is not a functionWix code SDK Warning: The alt parameter that is passed to the alt method cannot be set to null or undefined.

9

Ok - I have managed to sort out the code and get it to work - however, what I actually want is code which allows the user to select a “back” or “previous” button and be re-directed BACK to the URL they just came from - NOT the previous item in a dataset. Is this possible please?

10

Oh…
Then why is the browser back button not good enough?

Liran.

11

I really wanted to link it to a simple “X” on the dynamic image page - so that as soon as the item page is closed they are taken back to the index page they came from - this must be possible with code? I have managed to get the previous and next buttons to work but I am getting several error messages on the page code even though it is working which reads: "To debug this code, open chiye.js in Developer Tools.Wix code SDK Warning: The text parameter that is passed to the text method cannot be set to null or undefined. "

12

This warning means you’re assigning null or undefined to a text (could be $w(‘#text1’).text =…).

Regarding the ‘X’ button.
I assume you have different index pages, so you’ll need to ‘remember’ the page they came from.
You can try using wixStorage for that.

Liran.

13

I do have different index pages and need to “remember” the page. Is there a tutorial anywhere on how to use wixStorage for this purpose?

14

will a “history.back” script work?

15

Hi,

Unfortunately we do not have a tutorial that combines wix-window and wix-storage.
However you can find a tutorial that uses wix-storage to communicate between pages here , which will probably guide you in the right direction.

To get the current page url simply call:

import wixLocation from 'wix-location';
 // ... 
let url = wixLocation.url;

It is not possible to directly access the History object with Wix Code.

16

Thanks. Will take a look.