previous next button on product page

[utechelmerlukasek]

just getting started and mending the index page.
stuck on only the second step, were to find the field key?

On this line

const linkField = "link-to-item"; // replace this value

change the value inside double quotes to the correct field key.
Remember, each time you add a dynamic page, a field is automatically created in your collection with relative URLs for that page. In the Data Manager, you need to locate the field with the URLs for the dynamic item page that you want to add previous and next buttons to. To find the Field Key for a collection field, click on the vertical ellipses that appears when you hover over a field in the Data Manager in the Editor and select Manage Properties. Be sure to use the Field Key and not the Field Name.

I only have one automaticaly created product page, do not find the data manager, no vertical ellipse, no field key?

[sapirh]

Hi,

Manage Properties means your database. After creating a dynamic page, a new URL field will be automatically add in your database.

Go to the field’s properties and then-> view Field.
You will see the filed key as its present at the picture above.
Copy it, and write that in the right place at your code.

Have a nice day, and best of luck!
Sapir,

[utechelmerlukasek]

Ok, found my database in the dashboard, but it is empty.
maybee because the product page I have was automaticaly created, and supposably is a dynamic page?
do I have to create a new product page?

thank you!

[hortiray]

You have to sync your database in editor with the live database…

[utechelmerlukasek]

found my database in the editor,

the option I find is import export to a file?
also in the help section it gives me a warning that this can not be undone, that spooked me a bit.
what should I do?

[utechelmerlukasek]

I have done some HTML, javascript and PHP programing 20 years ago, maybe I am getting to old for this and should get someone to do it for me.
But realy do not want to put my brain to sleep, I think with a bit of help I can do this.
What do you think?

[sapirh]

Hi,

I’m not sure I understand your issue, maybe you can explain to me what is your goal and what you wish to present at your site, so I can guide you.

About the database, product database is not shown under category database at the dashboard ,but under category store products.

For more information about product collection view this article.
For more information about product page view this article.

I suggest you to read the articles that reference to wix -sotre .
https://support.wix.com/en/wix-code/wix-apps-with-wix-code

Best,
Sapir

[utechelmerlukasek]

thank you very much for the informations, still reading my way through it.
things are getting a bit clearer now.
I have created a shop with the shop app.
On the product pages I would like to add a “previous/next” button, so visitors do not have to go back and fourth, but can flick through the products.
If i under this right I will have to create c dynamic page for each colletion so I can find the field key that I am missing to create the button.
Will keep reading…
I also saw the “related products box” that is very usefull, I think that will be my next project

[utechelmerlukasek]

Ok, I created a dynamic page from one if my pages with a collection gallery.
I gave the gallery a new name, found the URL and the field key.
I added the code, but it still gives me error messages.
Also now I need to change the product page into a dynamic page and it does not let me do that?

[sapirh]

Hi,

First, the Import line in your code supposed to be at the the top of the page , before the onReady() function.

Second (reference to the next and previous button), creating your own dynamic item page to your products collection is one option.
The second one, is to write a code at the default product page that you already had. ( its created after you added the store app to your site).

The first part of the code, should be written at the shop page:
The code does the following:

• Creating an array that include only the URL field of each product.
  -Set the array at wix-storage as local variable
  Here you can read more about wix- storage.

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

// change the field key according to the URL field at your products collection.
const linkField = "link-newData-title"; 

$w.onReady(() => {

    wixData.query("Products")
        .find()
        .then((results) => {
            const dynamicPageURLs = results.items.map(item => 
            item[linkField]);
            
            local.setItem('dynamicPageURLs', dynamicPageURLs);
        })

});

The second part of your code should be written in the product page:
*First add previous and next buttons.
The code does the following:

• Get the current URL index from the array.
  -Set the next button’s link and previous button’s link according to the amount of URL in the array.

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

$w.onReady(function () {
    $w("#previous").disable();
    $w("#next").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("#previous").link = dynamicPageURLs[currentPageIndex - 1];
            $w("#previous").enable();
        }

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

Best of luck!
Sapir,

[utechelmerlukasek]

So I have deleted the dynamic page and just use the pages of my collections that I have created.
I have 14 of them, just want to be sure I get this right befor I change them all.

the field key should be this:

the page URL should be this

so now I have changed the code to this:

at least it is not giving me any errors

I can not find were I can link the buttons
" -Set the next button’s link and previous button’s link according to the amount of URL in the array. "
Do I link them to an URL? But which one?
I pasted the code in the page, but it is giving me error messages

thank you for your time!

[utechelmerlukasek]

Now the links to my test page “Oil on board” ar not working anymore. Not from the index page and not from the submenue.
I have deleted the code from both pages, collection page and product page and still the links do not work.
I can not seem to find why.
double checked the links and page name, can not find it.

[sapirh]

Hi,

I can see that you created 14 different product pages, its not the same at my example, because I had only one product page that the wix store app created for me.

• At products database the ProductPageURL field, is the one that his field key supposed to be the linkField at your code.

-Each URL rich you to the same Product page , that only the inner details are different (according to each product). As a result, these URL will not connect you to the 14 product pages you have created.

-At the code I sent you, I saved an array that include these URL, and I wrote the first function at the Shop page.

-The next and previous button supposed to be added at product page, where the second function supposed to be written.

Best,
Sapir

[utechelmerlukasek]

Now I am lost!
I think I only have one product page, the others are just pages with the different collection out of the same product page.

I put the next and previous button on the product page

the URL is the same like yours

were do I need to put this URL in the code?

thank you!

[sapirh]

Hi,

You need to write the Field-key of the URL field from your products collection.
The Filed-Key need to be written at your code as the- const linkField = “link-newData-title”;

As you can see I have a URL field, and each URL in each line is the URL of a specific item. As a result, the function of the next and previous buttons at my code, go over these field, and in each pressing, a product page with different item will be presented.

The field-Key from the picture is the one that you need to look for at your products collection and write it in your code as the variable “linkField”.
Please read again the post with the two functions that I sent you, and pay attention where to write each one.

Best,
Sapir

[utechelmerlukasek]

Happy new year!

so I now found the page URL

so I put the following code in the shop page:

and then I put this code in the product page:

but I am getting red dots, asuming this is an error message,
changed the button names to previous and next, but it is not working.
the buttons are just grey and not a link.

Can you help?

[sapirh]

Hi,

Can you please send a URL to your site ?
Its hard to read the code from the screen shots.

Best,
Sapir