(Solved) Link Search result in repeater (multiple databases) to corresponding dynamic page.

I have three databases, which I use for dynamic pages.
Articles, Interviews, Reviews

Repeater = repeaterResults
Dataset articles= dataset10

On the search result page, I have connected a repeater to one dataset; articles.
When I perform a search I end up at this search result page (Thank you CodeQueen)

I run a search query to search for a word in all the three databases, and various fields.
I’m able to present results of all the databases in the repeater, using Concat.
This works perfectly (so far).

In the repeater I’ve added a button (button1) which I want to link to the corresponding (dynamic) page, but now I’m stuck. I need to connect this button, but can’t use the repeater/dataset connection.

How do I connect this button to the according page,
and if I need a specific line of code, where to put it?

Your help is much appreciated!

My code:
import {local} from ‘wix-storage’;
import wixData from ‘wix-data’;

$w.onReady( function () {
var sameWord = local.getItem(“searchWord”);
$w(“#searchBar”).value = sameWord;
$w(“#searchBar”).placeholder = sameWord;
$w(‘#dataset10’).onReady( function () {
search();
});
});

export function searchButton_click() {
search();
}
function search() {
wixData.query(‘Articles’)
.contains(‘title’, $w(“#searchBar”).value)
.or(wixData.query(‘Articles’).contains(‘paragraph1’, $w(“#searchBar”).value))
.find()
.then( (results1) => {
let Results1 = results1.items

wixData.query(“Interviews”)
.contains(‘title’, $w(“#searchBar”).value)
.or(wixData.query(‘Interviews’).contains(‘paragraph1’, $w(“#searchBar”).value))
.find()
.then( (results2) => {
let Results2 = results2.items

wixData.query(“Reviews”)
.contains(‘title’, $w(“#searchBar”).value)
.or(wixData.query(‘Reviews’).contains(‘introtext’, $w(“#searchBar”).value))
.find()
.then( (results3) => {
let Results3 = results3.items
$w(“#repeaterResults”).data = Results1.concat(Results2, Results3)
$w(“#repeaterResults”).expand();
} );
} );
} );
}

@ Tanya Hayes

You have not specified the URL for any of dynamic pages that you are trying to link to, so i’m going to assume you’re using the ID for the collection item in creating the URL.

Something like this…

// change container1 and dataset1 IDs as necessary for your site.

$w(‘#container1’).onClick((event) => {

    $w("#dataset1").onReady(() => { 

//get ID for repeater item when clicked
let $item = $w.at(event.context);
let currentItem = $item(“#dataset1”).getCurrentItem();
let dynamicPageID = ${currentItem._id}

//re-direct to dynamic page with URL + repeater item ID

        wixLocation.to('/subPageTitle/' + dynamicPageID); 

    }); 
})

Mike,
First of all Thank you very much for helping me out!!!
Awesome.

The problem I’m having is that I have 3 dynamic pages.

  • /articles/title

  • /Interviews/title

  • /Reviews/title

The field keys in the collections (Title) are:

  • link-articles-title

  • link-interviews-title

  • link-reviews-title

Regarding the last line of your code:

wixLocation.to(‘/subPageTitle/’ + dynamicPageID);

I assume I need to specify the “subPageTitle” ? Because nothing happens.
I tried it for one section, replaced “subPageTitle” with articles" and that works.
Any suggestion?

Your help is much appreciated!

Kind regards,
Tanya

@tanyahayes

yes you need to replace subPageTitle in the code with what ever you have used as your subpage title

@mikemoynihan99
Ok. Great.

The problem is I have three variations. (Articles, Interviews and Reviews).
If I connect it to only one section I get page not found errors for the other sections (offcourse)
Any idea how to solve this?

@tanyahayes

Yes just add a new column to your 3 and call it databaseName and populate the column for each database. Now when we get “currentItem” in the above code we will also look at what database it came from.

$w.onReady( function () {

// change container1 and dataset1 IDs as necessary for your site.  

$w(‘#container1’).onClick((event) => {

    $w("#dataset1").onReady(() => { 

//get ID for repeater item when clicked
let $item = $w.at(event.context);
let currentItem = $item(“#dataset1”).getCurrentItem();
let dynamicPageID = ${currentItem._id}
let collectionID = ${currentItem.databaseName}

//re-direct to dynamic page with URL + repeater item ID

       wixLocation.to('/collectionID/' + dynamicPageID); 

    }); 
}) 

})

@mikemoynihan99

Thanks for your input, patience and assistance Mike.
Much much appreciated!

I’ve added a column/field (databaseName) to each collection and added the name of the collection in each record f.e. articles in the article collection.

I’ve added your code. Which makes sense.

But unfortunately nothing happens.
Container is not clickable. and unfortunately no errors, (to learn from.)

I’m not a hardcore programmer, but could the fact that I code the repeater, which overwrites the initial dataset connection, and the linking code directs to the initial dataset, causing issues?
Bit of clueless.

I will continue trying to crack it. If you have any idea’s or suggestions,
than I would love to hear from you.

Kind regards,
Tanya

@tanyahayes
add a few console logs in your code to see where the issue lies, such as:

console.log(dynamicPageID);

console.log( collectionID);

CollectionID is undefined.
Container click gives different ID’s per item, which seems correct.

@tanyahayes

Sounds like you did not set up your database correctly when entering the field key for your new column as databaseName. Console log current item and it will give you a list of all the field keys associated with the item you clicked on. If you don’t see databaseName as one of the field keys then you need to fix that.

console.log(currentItem);

Thanks again Mike, for your help.
hmm. Tough Cookie for me as a designer.
but want to crack it.

I’ve added the databaseName field (text) at the collections, and it shows up in console.log.
Tried also lowercase or uppercase of populated field in collection. Article vs article (in this field in Article collection). But collectionID remains undefined in log.

PageID log returns to number

Also tried to manually enter pageID after section in browser,
f.e. …/article/746b8866-8f21-4921-88ce-801a37912c0a
but this gives a 404 page not found.

All the right information and elements of the dynamic page I want to link to however shows up in log (wow!).
Like title field, text fields etc.
Including the actual link setup of the pages: link-article-title, or link-interview-title.

So you would say that linking to this page must be possible.
I Hope you see a way out.

Kind regards,
Tanya

Can you send a picture of what results you got for console.log(currentItem);

databaseName is listed as a field key for that item so we should be able to read it, must be an issue in the code. Can you send a pic for line 89 of your code

You have not copied my code correctly, you should have no underscore for line 81

I’m so sorry Mike.
You’re right.
I’ve removed the underscore.

Now the collection name is logged an recognised.
But link (container) is still not working.
What am I missing?

what URL does it re-direct you to when you click on the repeater?

When I click on the container of the repeater, nothing happens.

Have you imported wixLocation ?

import wixLocation from ‘wix-location’;

Have you tried it on your LIVE site ?