Previous & Next bottom not work

Ask the community
,
1

I’m sorry so many question.
3 or 5 days ago, the bottom was worked, but now its not work.
I did only add field, like this

https://www.wix.com/code/home/forum/questions-answers/how-can-i-connect-to-button

I have to change something?

my editor URL
https://editor.wix.com/html/editor/web/renderer/edit/24fdbb80-24c5-4c15-90cc-2bed75d04434?metaSiteId=1ebaf4c2-9539-4206-b035-d0b8ee589dde&editorSessionId=0CC57822-DD39-41B2-BD28-C5439550F186

site URL

Thank you

1800×1192 307 KB

2

Hi Nanami,

Am I correct in understanding that you would like to bind that button to navigate to the dynamic page of the previous item in the collection?

To do this you’ll need to manage the buttons using code. Here’s how to do it.

Start by going to the collection this dynamic page is connected to. You will need to get the key of the field that holds the URL to each record’s dynamic page. The example below from one of my sites is from a collection of albums, with a dynamic page for each album using the collection title field (same as in your case, if I am not mistaken). There will be a greyed out column like the one you see in the screenshot below that hold the URL we need for each record, open that column’s context menu and select ‘Manage Properties’ to see the little menu in the screenshot. Copy the text under ‘Field Key’ and save it aside.

618×996 37 KB

Next, go back to the dynamic page in which you want the previous/next buttons. Clear the bindings for the buttons, and copy the code below to the page.

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
  const dataPromise = wixData.query('Albums').find();
  const dataset = $w('#dynamicDataset');
  dataset.onReady(async function() {
    const data = await dataPromise;

    const currentItem = dataset.getCurrentItem();
    const currentIndexInCollection = data.items.findIndex(item => item.title === currentItem.title);

    if (currentIndexInCollection > 0) {
      $w('#button1').onClick(function() {
        wixLocation.to(data.items[currentIndexInCollection - 1]['link-Albums-title']);
      })
    } else {
      $w('#button1').disable();
    }

    if (currentIndexInCollection < (data.items.length - 1)) {
      $w('#button2').onClick(function() {
        wixLocation.to(data.items[currentIndexInCollection + 1]['link-Albums-title']);
      })
    } else {
      $w('#button2').disable();
    }
  })
});

You will need to:

  1. Change the component IDs (‘#dynamicDataset’, ‘#button1’, ‘#button2’) to the ones representing your buttons and dataset.

  2. Change the ‘link-Albums-title’ field key with the one you copied from your collection.

  3. Change the collection name in the call to ‘wixData.query()’ from my ‘Albums’ to the name of your collection.
    Let me know how that works out.

Regards,
Leeor.

3

BTW, you can find a more detailed tutorial here: Velo Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code | Help Center | Wix.com.

4

Hi Leeor

Thank you for your answer.

① I couldn’t find out the ‘Field Key’
Perhaps this image is the menu you show me.

1252×1282 90.2 KB

② When use the ‘Previous’ and ‘Next’ bottom?

5

Hi Nanami,

Please copy the value under ‘Field Name’.
I’m not sure what you mean by your second question.

Leeor.

6

Second Question mean,
When put the button in site, I can connect a database like this image.

1800×1192 307 KB

But you said If I want to use button I have to write a code.

Then the ‘previous’ and ‘next’ connect, when I use it?

7

hi Leeor!
Anyway the code is work!
Thank you very much!

The second Question is not hurry!
So if you have a time, please recall this.