Trouble with Custom Site Searchbar

Ask the community
,
1

Hey guys and gals. I’ve been working recently on a custom site search to enhance the features for my site search that allows me to exclude products that I don’t want being visible to all users (wholesale and premium member products were being found by standard users in the stock site search).

I have gotten the “search results” page to function exactly as desired, but am having trouble getting the search bar in the header to function and could use some help figuring out what I’m doing wrong.

site url for reference: http://www. ortizperformance .com/

In the masterpage.js for the header, I have:

export function searchButton_click() {

    let word = $w("#searchBar").value;

    local.setItem("searchWord", word);

    wixLocation.to(`/search-results`);

}

Then on my search-results/ page, I have currently:


import {local} from 'wix-storage';
import wixData from 'wix-data';

export async function name_keyPress(event) {
    defaultSort = await false;
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        filter($w("#name").value, collectionName);
    }, 200);
}

export async function collection_change(event) {
    defaultSort = await false;
    filter(filterName, $w("#collection").value);
}

export async function sortBy_change(event) {
    defaultSort = await false;
    if($w("#sortBy").value === 'A-Z') {
        $w("#dataset1").setSort(wixData.sort()
        .ascending("name")
        );
    } else if($w("#sortBy").value === 'Z-A') {
        $w("#dataset1").setSort(wixData.sort()
        .descending("name")
        );
    } else if($w("#sortBy").value === 'Oldest First') {
        $w("#dataset1").setSort(wixData.sort()
        .ascending("_updatedDate")
        );
    } else if($w("#sortBy").value === 'Newest First') {
        $w("#dataset1").setSort(wixData.sort()
        .descending("_updatedDate")
        );
    } else if($w("#sortBy").value === 'Price High to Low') {
        $w("#dataset1").setSort(wixData.sort()
        .descending("price")
        );
    } else if($w("#sortBy").value === 'Price Low to High') {
        $w("#dataset1").setSort(wixData.sort()
        .ascending("price")
        );
    }
}

let defaultSort = false;

export async function reset_click(event) {
    $w("#name").value = await undefined;
    $w("#collection").value = await undefined;
    $w("#sortBy").value = await undefined;
    defaultSort = await true;
    filter();
}

export function dataset1_ready() {
    let count = $w("#dataset1").getTotalCount();
    $w("#count").text = 'Total Products: (' + count + ')';

    var sameWord = local.getItem("searchWord");
    $w("#name").value = sameWord;
    $w("#name").placeholder = sameWord;
    
}

let filterName;
let collectionName;

let debounceTimer;

async function filter(name, collection) {
    if(filterName !== name || collectionName !== collection) {
        let newFilter = wixData.filter();
        if(name)
        newFilter = newFilter.contains('name', name);
        if(collection)
        newFilter = newFilter.hasSome('collections', [collection]);
    await $w("#dataset1").setFilter(newFilter);
    if(defaultSort === true) {
        $w("#dataset1").setSort(wixData.sort()
        .ascending("name")
        );
    }
    let count = $w("#dataset1").getTotalCount();
    $w("#count").text = 'Total Products: (' + count + ')';
    filterName = name;
    collectionName = collection;
    }
}

With this code, I am only copying the “Search term” into the reference field for the results page, but does not act on it. When I have tried multiple different ways to action the page, the whole thing crashes and I return 0 results and it just dumps the full database results as is.

The code I’ve attempted is:

$w.onReady(function () {

    var sameWord = local.getItem("searchWord");

    $w("#name").value = sameWord;

    $w("#name").placeholder = sameWord;

    $w('#dataset1').onReady(function () {

        search();

    });

});

function search(name, collection) {
	if(filterName !== name || collectionName !== collection) {
		let newFilter = wixData.filter();
		if(name)
		newFilter = newFilter.contains('name', name);
		if(collection)
		newFilter = newFilter.hasSome('collections', [collection]);
	await $w("#dataset1").setFilter(newFilter);
	if(defaultSort === true) {
		$w("#dataset1").setSort(wixData.sort()
		.ascending("name")
		);
	}
	let count = $w("#dataset1").getTotalCount();
	$w("#count").text = 'Total Products: (' + count + ')';
	filterName = name;
	collectionName = collection;
	}
}

I don’t need it to be too elaborate, and on the initial search I only want the term itself to be acted on and the user will refine the search with the additional filters if desired. I’d also ideally like the search term to be the input text, not the pre-fill reference as it doesn’t seem to clear with the reset button since it’s a pre-fill reference.

Appreciate any ideas that can help resolve this.