New Article: Previous & Next Buttons for Dynamic Item Pages

Show and tell
,
1

We just added a new article demonstrating how create previous and next buttons for a dynamic item page.

https://support.wix.com/en/article/how-to-create-previous-and-next-buttons-for-a-dynamic-item-page

We’d appreciate any feedback on whether or not the article helped you create previous and next buttons on your dynamic item pages.

4 Likes
2

Great help! Thanks for the article, it worked just fine!

3

Good evening!

It would be very interesting to find the way to customizing a dropdown box from Wix Code for visitors in order to being able to switching from an item of a dynamic item page to any specific item from a database . For example, if the dynamic item page displays fields related to information of an edition of a festival, it would be really cool that visitors could choose which specific edition (which specific item) data appears in the dynamic page. In other words, if they are in 30th edition and they want to see the 43th edition data, if they choose “43th edition” option in the dropdown box, the data from 43th edition will automatically appear.

Here you have our questions:

  1. Which is the way to programme dropdown box (or other switching buttons) to achieving that effect?

  2. How could we achieve the same effect by using previous/next buttons ? (By the way, the article which you suggest us previously is read, but having it explained by you in an easier way would be awesome!)

Hope you can reply us with an answer to every single question as soon as possible.

Thank you in advance!

4

I added to my page and it works great. Good instruction and explanations with the code.

5

It worked for me! Much better than the instructions before…

6

This just what I need but I can’t get the buttons to work my site is n.stark67.wixsite.com.mysite-1
maybe you can see what I can’t I tried many variations on what I think your says.

7

Couldn’t get the buttons to work.
Fisrt of all I’m not a coder, just an enthusiast. May have some fundamental mistakes unnoticed.

I’ve added it to my pages, and when I click the buttons nothing happens…

//PREVIOUS NEXT BUTTON - INDEX PAGE
import {local} from 'wix-storage';

const linkField = "/projeto/${_id}";

$w.onReady(function () {
  $w("#dataset1").onReady(() => {
    const numberOfItems = $w("#dataset1").getTotalCount();

    $w("#dataset1").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’ve added the above to all my index pages as stated in the tutorial, and the code below to my dynamic page item page:

//PREVIOUS NEXT BUTTON - 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')) {
    const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');

    const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);

    if (currentPageIndex > 0) {
      $w("#prevbutton").link = dynamicPageURLs[currentPageIndex - 1];
      $w("#prevbutton").enable();
    }

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

I don’t know what can be wrong. But when I tried a waaay more basic code:

//PREV-NEXT BUTTONS
import wixLocation from 'wix-location';

export function prevbutton_click(event) {
        $w("#dynamicDataset").getPreviousDynamicPage()
    .then( (previous) => {
    if(previous){
    wixLocation.to(previous);
    }
    } );
}

export function nextbutton_click(event) {
    $w("#dynamicDataset").getNextDynamicPage()
    .then( (next) => {
    if(next){
    wixLocation.to(next);
    }
    } );
}

…it did work! Although it cycles through my items in the database, displaying text and title perfectly, but it doesn’t update the images. It does indeed update the position of the images (in function of the presence/absence of content in the item’s database fields, but showing the old item’s images. I’ve tried some refresh codes and nothing…

Any idea of what can be going wrong?

8

Also tried this:

const linkField = "link-dataset1-title";

instead of:

const linkField = "/projeto/${_id}";

not sure which is correct, but I’ve seen both around the forum…

ps: i’ve tried both ways with ID/title…

9

This works GREAT! Took only a few minutes.

Now I’m trying to figure out how to filter the dataset based on the user’s inputs BEFORE saving the URL’s. I have 100 pages of galleries and the user can select by year or title keyword. It’s this subset of items I want to capture before going to the category page.

What could I change to capture URLs in the dataset based on what the user has selected only? Would I add code within my filter functions instead of on ready?

This is my page code. Thanks in advance for any help here. (I was delighted to find the article!)

import wixData from "wix-data";
import { local } from 'wix-storage';

const linkField = "link-photogalleries-title";

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
 const numberOfItems = $w("#dynamicDataset").getTotalCount();

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

//search by school year
export function Year_change(event) {
 let searchyear = $w("#Year").value;
    $w("#dynamicDataset").setFilter(wixData.filter()
        .contains("schoolYear", searchyear));

    wixData.query("PhotoGalleries")
        .contains("year", $w('#Year').value)
        .find().then((results) => {

        });
}

//search by title
function title() {
 let searchtitle = $w("#titleSearch").value;
    $w("#dynamicDataset").setFilter(wixData.filter()
        .contains("title", searchtitle));

    wixData.query("#dynamicDataset")
        .contains("title", $w('#titleSearch').value)
        .find()
}

export function titleSearch_change(event, $w) {
    title();
}

//clear search criteria
export function clear_click(event) {
    $w("#titleSearch").value = "";
    $w("#Year").value = "";
    $w("#dynamicDataset").setFilter(wixData.filter());

}