Search from a lightbox on any page

Discussion Ask a question
, ,
1

I am trying to get a search function onto my site using a lightbox so that users can access the search function from any page (there will be a button in the header to open the lightbox). There are 8 text inputs on my lightbox for users to search from with the information typed here transferred to the results page

In the lightbox I have the following code:

import { local } from ‘wix-storage’;
import wixLocation from ‘wix-location’;
import wixData from ‘wix-data’;

export function dropdown1_change(event, $w) {
searchenable();
if (event.target.value === “Locomotives”) {
enableFields();
$w(‘#searchButton’).show();
} else {
enableFields();
$w(‘#iFormation’).expand();
$w(‘#searchButton’).show();
}
}

function searchenable() {
// You can add any additional logic for enabling or disabling elements here.
}

function enableFields() {
$w(‘#iClass, #iNumber, #iPrevNumber, #iOperator, #iLivery, #iName, #iDepot, #iStatus, #iFormation’).enable();
}

function runSearch() {
let word = $w(‘#iClass’).value;
local.setItem(“searchWord”, word);

let word4 = $w(‘#iNumber’).value;
local.setItem(“searchWord2”, word4);

let word3 = $w(‘#iPrevNumber’).value;
local.setItem(“searchWord3”, word3);

let word2 = $w(‘#iOperator’).value;
local.setItem(“searchWord4”, word2);

let word5 = $w(‘#iLivery’).value;
local.setItem(“searchWord5”, word5);

let word6 = $w(‘#iName’).value;
local.setItem(“searchWord6”, word6);

let word7 = $w(‘#iDepot’).value;
local.setItem(“searchWord7”, word7);

let word8 = $w(‘#iStatus’).value;
local.setItem(“searchWord8”, word8);

let word9 = $w(‘#iFormation’).value;
local.setItem(“searchWord9”, word9);

let option = $w(‘#dropdown1’).value;
switch (option) {
case “Locomotives”:
wixLocation.to(‘/loco-results-test’);
break;
case “Diesel Multiple Units”:
wixLocation.to(‘/dmu-results’);
break;
case “Electric Multiple Units”:
wixLocation.to(‘/emu-results’);
break;
case “Bi Mode Units”:
wixLocation.to(‘/bi-mode-units-results’);
break;
case “All Traction”:
wixLocation.to(‘/all-traction-results’);
break;
default:
break;
}
}

$w.onReady(function () {
$w(‘#iClass, #iNumber, #iPrevNumber, #iOperator, #iLivery, #iName, #iDepot, #iStatus, #iFormation’).onKeyPress((event) => {
if (event.key === “Enter”) {
runSearch();
}
});
});

export function searchButton_click(event) {
runSearch();
}

And on the results page, the following code:

import { local } from “wix-storage”;
import wixData from “wix-data”;
import wixLocation from “wix-location”;
import {session} from “wix-storage”;
import wixWindow from ‘wix-window’;

export function button32_click(event) {
resetSearch();
openSearchLightbox();
var sameWord = local.getItem(“searchWord”);
$w(“#iClass”).value = sameWord;
$w(“#iClass”).placeholder = sameWord;

var sameWord2 = local.getItem(“searchWord2”);
$w(“#iNumber”).value = sameWord2;
$w(“#iNumber”).placeholder = sameWord2;

var sameWord3 = local.getItem(“searchWord3”);
$w(“#iPrevNumber”).value = sameWord3;
$w(“#iPrevNumber”).placeholder = sameWord3;

var sameWord4 = local.getItem(“searchWord4”);
$w(“#iOperator”).value = sameWord4;
$w(“#iOperator”).placeholder = sameWord4;

var sameWord5 = local.getItem(“searchWord5”);
$w(“#iLivery”).value = sameWord5;
$w(“#iLivery”).placeholder = sameWord5;

var sameWord6 = local.getItem(“searchWord6”);
$w(“#iName”).value = sameWord6;
$w(“#iName”).placeholder = sameWord6;

var sameWord7 = local.getItem(“searchWord7”);
$w(“#iDepot”).value = sameWord7;
$w(“#iDepot”).placeholder = sameWord7;

var sameWord8 = local.getItem(“searchWord8”);
$w(“#iStatus”).value = sameWord8;
$w(“#iStatus”).placeholder = sameWord8;
search();
}

async function fetchData() {
const firstPage = await wixData.query(“Shunters”).limit(1000).find();
const secondPage = await wixData
.query(“Shunters”)
.limit(1000)
.skip(1000)
.find();

return firstPage.items.concat(secondPage.items);
}

$w.onReady(async function () {
var sameWord = local.getItem(“searchWord”);
$w(“#iClass”).value = sameWord;
$w(“#iClass”).placeholder = sameWord;

var sameWord2 = local.getItem(“searchWord2”);
$w(“#iNumber”).value = sameWord2;
$w(“#iNumber”).placeholder = sameWord2;

var sameWord3 = local.getItem(“searchWord3”);
$w(“#iPrevNumber”).value = sameWord3;
$w(“#iPrevNumber”).placeholder = sameWord3;

var sameWord4 = local.getItem(“searchWord4”);
$w(“#iOperator”).value = sameWord4;
$w(“#iOperator”).placeholder = sameWord4;

var sameWord5 = local.getItem(“searchWord5”);
$w(“#iLivery”).value = sameWord5;
$w(“#iLivery”).placeholder = sameWord5;

var sameWord6 = local.getItem(“searchWord6”);
$w(“#iName”).value = sameWord6;
$w(“#iName”).placeholder = sameWord6;

var sameWord7 = local.getItem(“searchWord7”);
$w(“#iDepot”).value = sameWord7;
$w(“#iDepot”).placeholder = sameWord7;

var sameWord8 = local.getItem(“searchWord8”);
$w(“#iStatus”).value = sameWord8;
$w(“#iStatus”).placeholder = sameWord8;

scrapped ();
convertedClass69 ();
showButton();
$w(“#Shunters”).onReady(function () {
search();

});
});

export function searchButton_click() {
search();
}

let queryResults;
async function search() {
let queryBuilder = wixData.query(“Shunters”);

const iClass = $w(“#iClass”).value;
if (iClass) {
queryBuilder = queryBuilder.contains(“class1”, iClass);
}

const iNumber = $w(“#iNumber”).value;
if (iNumber) {
queryBuilder = queryBuilder.contains(“number”, iNumber);
}

const iPrevNumber = $w(“#iPrevNumber”).value;
if (iPrevNumber) {
queryBuilder = queryBuilder.contains(“previousNumber”, iPrevNumber);
}

const iOperator = $w(“#iOperator”).value;
if (iOperator) {
queryBuilder = queryBuilder.contains(“operator”, iOperator);
}

const iLivery = $w(“#iLivery”).value;
if (iLivery) {
queryBuilder = queryBuilder.contains(“livery”, iLivery);
}

const iName = $w(“#iName”).value;
if (iName) {
queryBuilder = queryBuilder.contains(“name”, iName);
}

const iDepot = $w(“#iDepot”).value;
if (iDepot) {
queryBuilder = queryBuilder.contains(“depot”, iDepot);
}

const iStatus = $w(“#iStatus”).value;
if (iStatus) {
queryBuilder = queryBuilder.contains(“status”, iStatus);
}

queryResults = await queryBuilder
.limit(12)
.ascending(“class1”)
.ascending(“sort2”)
.ascending(“sort”)
.find();
$w(“#repeater2”).data = queryResults.items;
console.log(queryResults is ${JSON.stringify(queryResults)});
}

function openSearchLightbox() {
// Open the Lightbox with the specified ID
wixWindow.openLightbox(“Search Lightbox”);
}

export async function loadingStrip_viewportEnter(event) {
$w(“#loadingGif”).show();
const nextResults = await queryResults.next();
$w(“#loadingGif”).hide();

queryResults = nextResults;
const data = $w(“#repeater2”).data;
$w(“#repeater2”).data = $w(“#repeater2”).data.concat(nextResults.items);
console.log(“Done loading more data”);
}

function scrapped () {
$w(“#repeater2”).onItemReady( ($w, itemData, index) => {
console.log(itemData.status); // show value of forSale field in developers console
if(itemData.status === “Scrapped”) {
$w(‘#scrappedStatus’).show();
$w(‘#finalOperatorHeader’).show();
$w(‘#finalOperatorText’).show();
$w(‘#finalLiveryHeader’).show();
$w(‘#finalLiveryText’).show();
$w(‘#finalNameHeader’).show();
$w(‘#finalNameText’).show();
$w(‘#scrappedAtHeader’).show();
$w(‘#scrappedAtText’).show();
$w(‘#scrappedDateHeader’).show();
$w(‘#scrappedDateText’).show();
$w(‘#prevNoSmallHeader’).show();

  $w('#text484').hide();
  $w('#operatorText').hide();
  $w('#liveryHeader').hide();
  $w('#liveryText').hide();
  $w('#nameHeader').hide();
  $w('#nameText').hide();
  $w('#depotHeader').hide();
  $w('#depotText').hide();
  $w('#statusHeader').hide();
  $w('#statusText').hide();
  $w('#prevNoHeader').hide();

}

});
}

function convertedClass69 () {
$w(“#repeater2”).onItemReady( ($w, itemData, index) => {
console.log(itemData.status); // show value of forSale field in developers console
if(itemData.status === “Converted to Class 69”) {
$w(‘#scrappedStatus’).show();
$w(‘#finalOperatorHeader’).show();
$w(‘#finalOperatorText’).show();
$w(‘#finalLiveryHeader’).show();
$w(‘#finalLiveryText’).show();
$w(‘#finalNameHeader’).show();
$w(‘#finalNameText’).show();
$w(‘#convertedAtHeader’).show();
$w(‘#scrappedAtText’).show();
$w(‘#convertedDateHeader’).show();
$w(‘#scrappedDateText’).show();
$w(‘#prevNoSmallHeader’).show();
$w(‘#convertedNotesGroup’).show();

  $w('#text484').hide();
  $w('#operatorText').hide();
  $w('#liveryHeader').hide();
  $w('#liveryText').hide();
  $w('#nameHeader').hide();
  $w('#nameText').hide();
  $w('#depotHeader').hide();
  $w('#depotText').hide();
  $w('#statusHeader').hide();
  $w('#statusText').hide();
  $w('#prevNoHeader').hide();

}

});
}

export async function resetSearch() {
// Clear input fields
$w(“#iClass”).value = “”;
$w(“#iNumber”).value = “”;
$w(“#iPrevNumber”).value = “”;
$w(“#iOperator”).value = “”;
$w(“#iLivery”).value = “”;
$w(“#iName”).value = “”;
$w(“#iDepot”).value = “”;
$w(“#iStatus”).value = “”;

// Clear query results
queryResults = null;
$w(“#repeater2”).data = ;

$w(“#iClass”).placeholder = “Enter Class”;
$w(“#iNumber”).placeholder = “Enter Number”;
$w(‘#iPrevNumber’).placeholder = “Enter Prev Number”;
$w(‘#iOperator’).placeholder = “Enter Operator”;
$w(‘#iLivery’).placeholder = “Enter Livery”;
$w(‘#iName’).placeholder = “Enter Name”;
$w(‘#iDepot’).placeholder = “Enter Depot”;
$w(‘#iStatus’).placeholder = “Enter Status”;

// Perform a new search (if needed)

}

function showButton () {

$w(‘#repeater2’).onItemReady(myItemReady);

function myItemReady($w, itemData, index) {
if (itemData.logs) {
$w(‘#button12’).show();
}
}
}

export function button12_click_1(event) {

let $item = $w.at(event.context);
let currentItem = $item(‘#Shunters’).getCurrentItem();
let dynamicPageID = ${currentItem.number}
let collectionID = ${currentItem.title}

console.log('https://www.ukraillog.co.uk/‘+collectionID+’/'+dynamicPageID);
wixLocation.to('https://www.ukraillog.co.uk/‘+collectionID+’/‘+dynamicPageID+’/'+“from-locomotive-results”);
}

This all works as expected when first running a search and also works correctly if, after completing the first search, I go back to the Home Page to commence another search. However, if I simply re-open the lightbox search whilst on the results page, it doesn’t work as the newly input search doesn’t seem to transfer over to the input fields on the results page.

Does anybody have any suggestions as to how I can adapt this code to get this to work whilst on the results page to allow users the chance to conduct multiple searches without having to go back to the Home Page to start a new search please?