Hello and thank you in advance!
I have a table displaying the results of a collection search (http://www.mindfulmoment.be/practitioners-search - select Brussels to see search results).
QUESTION: I want visitors to be able to click on ONE result in the results table (the text string in one of the columns) and go to a dynamic ITEM page that displays the data for the record that the visitor clicked on -- I understand how to set up the dynamic item page.
I cannot find instructions anywhere on how to link string text in a search result to a dynamic page.
Here is the code for ONE column in the results table -- all the columns are basically the same. How and where in this code do you create the link?
{ "id": "coll-ln", // ID of the column for code purposes // The field key in the collection whose data this column displays "dataPath": "achternaam", "label": "achternaam", // The column header "width": 200, // Column width "visible": true, // Column visibility "type": "string", // Data type for the column // Path for the column if it contains a link "linkPath": "link-field-or-property" },
Thank you again... Cynthia-
Hello again..... To update you: This concerns a collection search results table, here (search on Brussel, please): http://www.mindfulmoment.be/practitioners-search And a dynamic ITEM page, here: http://www.mindfulmoment.be/practitioners-per-provincie/{practitionerID} here's a sample of a real entry: http://www.mindfulmoment.be/practitioners-per-provincie/Savels
I am trying to detect an onClick in the FIRST COLUMN of the results table (event.target.id === "coll-ID")
this is the column definition of the column I want to make clickable....
{ "id": "coll-ID", "dataPath": "practitionerId", "label": "ID", "width": 80, "visible": true, "type": "string", "linkPath": "link-field-or-property" }, -------- Still hitting a bit of a wall. Your link (in the reply you so graciously gave above) goes to the onSelect event handler, but I am pretty certain I need to use an onClick event handler. Is this correct? Assuming I need to use onClick: When I look at the code explanation, I am unable to find a complete example of using this code and I can't figure out WHERE to put this function call. Overall, I think I understand what needs to be done....
Add OnClick event handler to detect a click on the table
Determine which column was clicked
If is the column I want: Determine the value in the cell that was clicked
Use the value in the path to call the dynamic ITEM page (wixLocation.to call)
I have come up with the following code to handle the click and redirect to the target dynamic item page, but when I add it to the page code, the search no longer works, and it does not show an error. The search is working fine without the added code.
import wixLocation from 'wix-location';
$w("#table1").onClick( (event, $w) => {
let targetId = event.target.id; if (targetId === "coll-ID") { wixLocation.to("/practitioners-per-provincie/" + event.cellData); } } );
QUESTIONS:
WHERE do I put the onClick event handler?
Does the onClick look for clicks anywhere in the table, or can I restrict it to a certain column?
If I cannot restrict it, then I am guessing I need to add an IF statement that says IF coll clicked === the coll I am interested in, then handle the onClick event.... is this accurate?
Do I need an onSelect event handler too?
WHERE do I put the wixLocation.to code?
Ultimately, more complete examples of code would be REALLY helpful. I am an old-school software engineer and I can generally figure things out with good examples. Although your help section is fantastic in many ways..... there seems to be a lot of details missing in the reference and the code examples. I cannot thank you enough for any direction and hopefully examples. :-) Cynthia
Thank you SOOOOOO much Nick. That makes sense. I am trying it now. Cross your fingers! I'll let you know what happens. : -)
Hey Cynthia,
Since you are filling the table with code, you need to add an event handler for cell click - here the instructions how to do it - https://www.wix.com/code/reference/$w.Table.html#onCellSelect
Inside handler function you will get cell data, and could use this data to navigate user to a specific page. For example if your dynamic page url look like '/products/white-box', you need to take 'white-box' from cell data as an ID, like this:
wixLocation.to("/products/" + event.cellData);
For static tables (data from dataset, without coding) you could use linking to dynamic page functionality in Connect Settings of Results Table, here is instruction how do it - https://support.wix.com/en/article/working-with-the-connect-table-panel