Filtering Dropdown shop page

Ask the community
,
1

Hi guys,

I hope you are all keeping well. I am currently working on my car parts sales site and want to be able to search by Make Model and year (possibly more dropdowns in the future) this is my code on the HOME page…

import {wixData} from ‘wix-data’ ;

$w.onReady( function () {
uniqueDropDown1();
});

function uniqueDropDown1 (){
wixData.query( “Vehicle_Database” )
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( “#manufacturerdropdown1” ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.manufacturer);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function Manufacturer_change(event, $w) {
uniqueDropDown2();
$w( “#modeldropdown2” ).enable();
}

function uniqueDropDown2 (){
wixData.query( “Vehicle_Database” )
.contains( “manufacturer” , $w( “#manufacturerdropdown1” ).value)
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( “#modeldropdown2” ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.model);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

export function modeldropdown2_change_1(event, $w) {
uniqueDropDown3();
$w( “#yeardropdown3” ).enable();
}

function uniqueDropDown3 (){
wixData.query( “Vehicle_Database” )
.contains( “model” , $w( “#modeldropdown2” ).value)
.limit( 1000 )
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w( “#yeardropdown3” ).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.year);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}

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

export function vehiclesearch_click() {

let word = $w( “#manufacturerdropdown1” ).value;
let word1 = $w( “#modeldropdown2” ).value;
let word2 = $w( “#yeardropdown3” ).value;

local.setItem( “manufacturer” , word);
local.setItem( “model” , word1);
local.setItem( “year” , word2);

wixLocation.to(`/shop`);

}

export function reset_click(event, $w) {
$w( “#manufacturerdropdown1” ).value = undefined;
$w( “#modeldropdown2” ).value = undefined;
$w( “#yeardropdown3” ).value = undefined;
}

Once the search button is clicked I want it to go to the shop page (as it currently does) and then filter my shop dependant on the user selection. my code on the shop page so far is:

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

$w.onReady( function () {

wixData.query( “#vehicle_database” ).setFilter( wixData.filter()
.eq( “manufacturer” , local.getItem( “manufacturer” ))
.eq( “model” , local.getItem( “model” ))
.eq( “year” , local.getItem( “year” ))
);
});

But I am not sure how to link this code to the shop/product gallery… I am really close but just need the final bit of knowledge to get there :slight_smile:

please let me know if you need more information.

Link to site: https://contact827026.wixsite.com/torquemonkeyperf

Regards

Jon

2
  1. Do you want to show filter/Search Result in shop page [All Products Page] ?
  2. You used wix-Store Right ?
3

Hi Kottravai,

Thanks for your reply!

So to answer 1 i want people to be able to fill in the dropdowns on the homepage and be taken to the shop page [all products page] and the shop be filtered by their selections made on the homepage.

And to answer 2 yea its a wix store i think? its the one that came in by default

Thanks for your help,

Jon

4

In Custom Page we can do.
But We can’t do this Functionality In Wix-store’s Page(I guess).:sweat:

5

ahh gotcha so its not something that can be done :frowning: oh well back to the drawing board! if the dropdowns were on the shop page would it work then?