Hello Wix Velo Community,
I have created a job search container that includes 4 dropdown filters with a search button to filter a repeater for job listings.
DROPDOWNS:
-
Filter by main job category (not filtering individually)
-
Filter by sub job category (not filtering individually)
-
Filter by State
-
Filter by job type
The issue I am facing is that I have managed to filter the repeater results for the state and job type fields when clicking on search but because I am using a different collection to populate the list items on main and sub category filter it is not filtering the results.
The other thing to understand is that I am storing session results from the homepage search and getting the items from the session storage and that is all working fine but as mentioned above its the main and sub category filters that are not filtering the repeater results and only works when you select a “state” and/or “job type” will it filter the repeater results.
M goal here is to allow users to click search and filter a job result based on a single selection from ANY of the 4 filter dropdowns individually. The issue being the main category and sub category dropdown filters not filtering the repeater results. So that if a user selects from main or sub category ONLY, they will filter the results in the repeater without having to also select state and/or job type dropdown.
Any help would be greatly appreciated?
The project URL page is here:
The page code is
import { session } from ‘wix-storage’ ;
import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;
$w . onReady ( function () {
//RETRIEVE SAVED FILTER & SEARCH BASED ON SESSION 🚀
$w ( "#mainJobCategoryDropDown" ). value = session . getItem ( "Main Job Category" )
$w ( '#jobSubCategoryDropDown' ). value = session . getItem ( "Job Sub-Category" )
$w ( '#stateDropDown' ). value = session . getItem ( "State" )
$w ( '#jobTypeDropDown' ). value = session . getItem ( "Job Type" )
if ( $w ( '#mainJobCategoryDropDown' ). value . length > 0 || $w ( '#jobSubCategoryDropDown' ). value . length > 0 || $w ( '#stateDropDown' ). value . length > 0 || $w ( '#jobTypeDropDown' ). value . length > 0 ) {
$w ( "#jobsNetworkDataset" ). setFilter ( wixData . filter (). contains ( 'mainJobCategory' , session . getItem ( "Main Job Category" ))
. and ( wixData . filter (). contains ( "mainJobSubCategory" , session . getItem ( "Job Sub-Category" )))
. and ( wixData . filter (). contains ( "state" , session . getItem ( "State" )))
. and ( wixData . filter (). contains ( "jobType" , session . getItem ( "Job Type" ))));
}
//FILTER ON THIS PAGE 🎉
$w ( '#searchButton' ). onClick (() => {
session . setItem ( "Main Job Category" , $w ( "#mainJobCategoryDropDown" ). value );
session . setItem ( "Job Sub-Category" , $w ( "#jobSubCategoryDropDown" ). value );
session . setItem ( "State" , $w ( "#stateDropDown" ). value );
session . setItem ( "Job Type" , $w ( "#jobTypeDropDown" ). value );
wixLocation . to ( 'https://simoncheatham.wixsite.com/rfttejobs/hot-jobs' );
});
//CLEAR FILTER 🚀
$w ( "#clearFilter" ). onClick ( function () {
$w ( "#mainJobCategoryDropDown" ). value = **undefined** ;
$w ( "#jobSubCategoryDropDown" ). value = **undefined** ;
$w ( "#stateDropDown" ). value = **undefined** ;
$w ( "#jobTypeDropDown" ). value = **undefined** ;
session . removeItem ( "Main Job Category" );
session . removeItem ( "Job Sub-Category" );
session . removeItem ( "State" );
session . removeItem ( "Job Type" );
$w ( "#jobsNetworkDataset" ). setFilter ( wixData . filter ());
});
});
//MAIN & SUB-CATEGORY DROPDOWN DATA FILTERS
$w . onReady ( function () {
uniqueDropDown1 ();
});
function uniqueDropDown1 ( ) {
wixData . query ( "JobCategories" )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueTitles = getUniqueTitles ( results . items );
$w ( "#mainJobCategoryDropDown" ). options = buildOptions ( uniqueTitles );
session . setItem ( "Main Job Category" , $w ( "#mainJobCategoryDropDown" ). value );
});
function getUniqueTitles ( items ) {
const titlesOnly = items . map ( item => item . mainJobCategory );
**return** [... **new** Set ( titlesOnly )];
}
function buildOptions ( uniqueList ) {
**return** uniqueList . map ( curr => {
**return** { label : curr , value : curr };
});
}
}
export function mainJobCategoryDropDown_change ( event , $w ) {
uniqueDropDown2 ();
$w ( "#jobSubCategoryDropDown" ). enable ();
}
function uniqueDropDown2 ( ) {
wixData . query ( "JobCategories" )
. contains ( "mainJobCategory" , $w ( "#mainJobCategoryDropDown" ). value )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueTitles = getUniqueTitles ( results . items );
$w ( "#jobSubCategoryDropDown" ). options = buildOptions ( uniqueTitles );
session . setItem ( "Job Sub-Category" , $w ( "#jobSubCategoryDropDown" ). value );
});
function getUniqueTitles ( items ) {
const titlesOnly = items . map ( item => item . jobSubCategory );
**return** [... **new** Set ( titlesOnly )];
}
function buildOptions ( uniqueList ) {
**return** uniqueList . map ( curr => {
**return** { label : curr , value : curr };
});
}
}
//SORT BY MOST RECENT TO OLDEST JOBS DROPDOWN
$w . onReady ( function () {
$w ( “#recentSortByFilter” ). onChange (() => {
let dropdownVal = $w ( "#recentSortByFilter" ). value ;
//OPTIONS 🎉
if ( dropdownVal === "Most Recent" ) { $w ( "#jobsNetworkDataset" ). setSort ( wixData . sort (). descending ( "_createdDate" )) } // Oldest to Newest
if ( dropdownVal === "Oldest" ) { $w ( "#jobsNetworkDataset" ). setSort ( wixData . sort (). ascending ( "_createdDate" )) } // Newest to Oldest
});
$w ( "#resetButton" ). onClick ( function () {
$w ( "#recentSortByFilter" ). value = **undefined** ;
$w ( "#jobsNetworkDataset" ). setSort ( wixData . sort ());
});
});