link search results in table to product page based on row SOLVED

Discussion Ask a question
, ,
1

HI,

I have followed the article: Velo Tutorial: Adding Collection Data Search Functionality | Help Center | Wix.com

This is working with no issue.

However I am struggling to make the results clickable. When the row is clicked I want to linked to the relevant product page.

I have searched but cannot find a solution.

I have added an on row select handler. here is my code. What am I missing?

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

$w.onReady(function () {
 $w("#resultsTable").columns = [{
 "id": "col1",
 "dataPath": "mainMedia",
 "label": "Image",
 "visible": true,
 "type": "image",
  }, {
 "id": "col2",
 "dataPath": "name",
 "label": "Product",
 "type": "string",
 }, {
 "id": "col3",
 "dataPath": "formattedPrice",
 "label": "Price",
 "type": "string",
 }];
});

export function searchButton_click(event) {
// Runs a query on all products
wixData.query('Stores/Products') 
  .contains("name", $w("#searchBox").value)
  .find()  // Run the query
  .then(res => {     
    $w("#resultsTable").rows = res.items; 
    $w("#resultsTable").expand();
    });
} 

export function resultsTable_rowSelect(event) {
 let product
 let rowData = event.rowData;
 let rowIndex = event.rowIndex;
 const myRow = event.target.rows[rowIndex];
    wixLocation.to("product.productPageUrl")
}

Thanks in advance.

2

I have also tried:

} export function resultsTable_rowSelect(event) {
 let rowData = event.rowData;
 let rowIndex = event.rowIndex;
 const myRow = event.target.rows[rowIndex];
    wixLocation.to("/product-page/" + event.rowData)
}

this can’t find product but does link to product page

3

I have got a little further, now a product page opens but returns “product not found”.

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


$w.onReady(function () {
 $w("#resultsTable").columns = [{
 "id": "col1",
 "dataPath": "mainMedia",
 "label": "Image",
 "visible": true,
 "type": "image",
    }, {
 "id": "col2",
 "dataPath": "name",
 "label": "Product",
 "type": "string",
   }, {
 "id": "col3",
 "dataPath": "formattedPrice",
 "label": "Price",
 "type": "string",
   }, {
 "id": "col4",
 "dataPath": "productPageUrl",
 "label": "Price",
 "type": "string",
  }];
});

export function searchButton_click(event) {
// Runs a query on all products
wixData.query('Stores/Products') 
 // Query the collection for any items whose "Name" field contains  
 // the value the user entered in the input element
  .contains("name", $w("#searchBox").value)
  .find()  // Run the query
  .then(res => {   
 // Set the table data to be the results of the query     
    $w("#resultsTable").rows = res.items;
    $w("#resultsTable").expand();
    });
}
export function resultsTable_rowSelect(event, $w) {
    wixLocation.to("/product-page/" + event.rowData._col4);  
 }

Please can someone just resolve the last hurdle for me:)

Thanks

4

SOLVED

export function resultsTable_rowSelect(event, $w) {
 let rowData = event.rowData;
 let rowIndex = event.rowIndex;
 const myRow = event.target.rows[rowIndex];
    wixLocation.to(`${myRow["productPageUrl"]}`)
}
1 Like