Please Help - Passing search query from lightbox to search page

Discussion Ask a question
,
1

So I am trying to implement the following:
I have a search button in the header of every page. Once it is clicked a lightbox shows up and when you type in a query it takes you to a page with results

so I have a code in in the “site” section calling for lightbox:

import wixWindow from "wix-window";

export function searchIcon_click(event) {
    wixWindow.openLightbox('SearchLightBox')
      .then( (searchData) => {
 let receivedData = searchData;
  } ); 
 
}

“searchData” represents whatever the user types in the search field

then the lightbox “page” code section i have the following code:

import wixLocation from 'wix-location';
import wixWindow from "wix-window";

$w.onReady(function () {
 let searchData = wixWindow.lightbox.getContext();
        $w("#searchBar").value = searchData;

});

export function searchBar_keyPress(event, $w) {
 if (event.key === "Enter") {
        wixWindow.lightbox.close( {
 
        });
        wixLocation.to("/searchresults");
    }
}

then I have the “searchresults” page code (resultsTable is collapsed on load)

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

$w.onReady(function () {
    $w("#resultsTable").columns = [{
 "id": "col1",
 "dataPath": "image",
 "label": "image",
 "width": 180,
 "type": "image",
 "linkPath": "link-image-info-category-number"
        },
        {
 "id": "col2",
 "dataPath": "title",
 "label": "title",
 "width": 290,
 "visible": true,
 "type": "string",
 "linkPath": "link-image-info-category-number"
        },
        {
 "id": "col3",
 "dataPath": "description",
 "label": "description",
 "width": 500,
 "visible": true,
 "type": "string",
 "linkPath": "link-image-info-category-number"
        },
        {
 "id": "col4",
 "dataPath": "location",
 "label": "location",
 "width": 1,
 "visible": false,
 "type": "string",
 "linkPath": "link-image-info-category-number"
        },
        {
 "id": "col5",
 "dataPath": "divesite",
 "label": "divesite",
 "width": 1,
 "visible": false,
 "type": "string",
 "linkPath": "link-image-info-category-number"
        }
    ];

 
    wixData.query("Image-Info")
        .contains("title", ("#searchData").value)
        .find()
        .then(res => {
            $w("#resultsTable").rows = res.items;
        });
    wixData.query("Image-Info")
        .contains("description", ("#searchData").value)
        .find()
        .then(res => {
            $w("#resultsTable").rows = res.items;
        });
    wixData.query("Image-Info")
        .contains("location", ("#searchData").value)
        .find()
        .then(res => {
            $w("#resultsTable").rows = res.items;
        });
    wixData.query("Image-Info")
        .contains("divesite", ("#searchData").value)
        .find()
        .then(res => {
            $w("#resultsTable").rows = res.items;
        });
    $w("#resultsTable").expand();
});

the result is:

  1. I don’t get any search results and I believe that I am missing some code, but I cant’t figure out how to fix it - I have been roaming the forums for last 6 hours.
  2. if I calling the searchLightBox and I am already on the search results page, it doesn’t work at all - meaning typing in a query and pressing enter does not close the LightBox and reload the search results.

I implore someone to help with a detailed solution - I have looked at the API reference and I can’t figure out how the data is passed from lightbox to the page in a way that I can use it…

PLEASE HELP ME!!!

2

At first glance I see the following:

  • No validation of “searchData”
  • When hitting “Enter” on the lightbox page, the “searchData” is not passed on to the “searchresults” page.

Consider using:

You may also consider consolidating from 3 pages (page, lightbox, searchresults) to 2 or one.
Good luck.

1 Like
3

Thanks for the answer - but I really need something more specific . I am not a coder and don’t know java… I understand that there is some sort of issue with the code - but I need some help figuring out what it is… I can’t figure out how to pass “searchData” FROM lightbox TO the the page… this is what I need help with…

As for consolidating 3 pages - theoretically it is possible to do the search results to appear in the lightbox - but then how would I make the lightbox be responsive to the amount of results?