Linking multiple data sets to next/previous button code

Ask the community
,
21

Hi again,
I created a sample site and transferred it to your account, so you can take a look how everything connects together. In order for the navigation to work properly, publish the site first - this will allow you to better test the item navigation in the editor.
I did what I wrote a few posts earlier:

  1. Created a “Countries” collection with country name, continent and image
  2. Created a regular “countries” page with 2 galleries, each filtered according to the continent
  3. Save the URLs from both galleries under a unique key for each gallery
  4. When an image in one of the galleries is clicked, I also save that gallery key to the local storage.
  5. In the single country item page, the code takes the URLs according to the last selected gallery key.

Here’s the code for the index page:

import {local} from "wix-storage";

const linkField = "link-Countries-title";

$w.onReady(function () {
	setUrls('#africaDataset', 'africa');
	setUrls('#europeDataset', 'europe');
});

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

export function galleryAfrica_click() {
	local.setItem('selected-gallery', 'africa');
}

export function galleryEurope_click() {
	local.setItem('selected-gallery', 'europe');
}

Here’s the code for the country item page:

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


$w.onReady(function () {
  $w("#previous").disable();
  $w("#next").disable();
  
  const selectedGallery = local.getItem('selected-gallery');
 
  if (selectedGallery) {
    const dynamicPageURLs = local.getItem(selectedGallery).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();
    }
  }
} );
22

Hi Tomer, thanks so much for all that work on my behalf. It is not working yet, probably because I don’t know enough. As most pages have 6 datasets, I’ve added the other 4 where you had the Africa and Europe lines. This could be where the error lies.
In the export section of code, I’ve again added the extra lines needed; could also be wrong.
I’ve named the datasets, datasetTrees, datasetShrubs, and so on.
I’ve named the galleries Trees, Shrubs, etc.
Each gallery has 2 filters: all have the habitat grasslands, and each one has its plant category, as in Trees, shrubs etc.
I wasn’t sure where to insert the page url plantsTitle on either page code.
The next and previous buttons are greyed out and don’t work, so I’m missing some info.
The code for the category page and dynamic plant item page are below.
Many thanks.

917×767 37.8 KB

922×480 30.9 KB

23

Hi, I think the item page code is missing the dynamicPageURL ‘plantsTitle’. When I add that line, the buttons are enabled, but errors show, so I’m clearly adding it incorrectly. Errors showing are:

  1. public/pages/frgt9.js: Unexpected token (29:9) 27 | } 28 | } > 29 | } ; | ^ (is this on the Grassland category page I’m working from?)

  2. There was an error in your script

  3. TypeError: e is not a function

24

The extra export functions you added need to be added from each gallery’s properties panel (add an onClick) event. I’m not sure if that’s what you did or not.
Regarding the error, seems like you have a code syntax error, you need to go back to the code and see what caused it (although you shouldn’t change the item page code, it should work regardless the number of galleries).

25

Tomer, you are a star! I’ve made those changes and it is working perfectly! Thanks so much for all your work on this.
Anno

26

You’re welcome. For the future, I suggest learning more about coding, you’ll be able to do so much more without any help, and it’s super fun :slight_smile: