loading product options into user input

Ask the community
, ,
1

is there any tutorials to load the “Store/Products” product options into an user input ?

1214×483 126 KB

I’ve found a tutorial to filter by product name and filter by product collection and succes applying it, but not yet found a tutorial to load product options into user input , perhaps multiple user input, like dropdown and radio button…

here’s my current code : ( currently looking the code for the fillOptionsFilterDropdown() function )
import wixData from ‘wix-data’;

$w.onReady( function () {
fillCollectionFilterDropdown();
fillOptionsFilterDropdown();
});

let lastTitleFilter;
let lastCollectionFilter;
let lastOptionsFilter;
let debounceTimer;

function filter(titleFilter, collectionFilter, optionsFilter) {
if (lastTitleFilter !== titleFilter || lastCollectionFilter !== collectionFilter || lastOptionsFilter !== optionsFilter) {
let newFilter = wixData.filter();
if (titleFilter)
newFilter = newFilter.contains(‘name’, titleFilter);
if (collectionFilter)
newFilter = newFilter.hasSome(‘collections.id’, collectionFilter);
if (optionsFilter)
newFilter = newFilter.ge(‘item3’, optionsFilter);

    $w("#storeProductsDataset").setFilter(newFilter); 
    lastTitleFilter = titleFilter; 
    lastCollectionFilter = collectionFilter; 
    lastOptionsFilter = optionsFilter; 
}

}

export function titleFilterInput_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#titleFilterInput”).value, lastCollectionFilter, lastOptionsFilter);
}, 200);
}

export function collectionFilterDropdown_change(event) {
filter(lastTitleFilter, $w(“#collectionFilterDropdown”).value, lastOptionsFilter);
}

export function optionFilterDropdown_change(event) {
filter(lastTitleFilter, lastCollectionFilter, $w(“#optionFilterDropdown”).value);
}

function fillCollectionFilterDropdown() {
wixData.query(“Stores/Collections”)
.skip(1)
.find()
.then(collections => {
let collectionOptions = [{ “value”: “”, “label”: “Choose Collection” }];
collectionOptions.push(…collections.items.map(collectionOnDatabase => {
return { “label”: collectionOnDatabase.name, “value”: collectionOnDatabase._id };
}));
$w(“#collectionFilterDropdown”).options = collectionOptions;
});
}

function fillOptionsFilterDropdown() {
wixData.query(“Stores/Products”)
.skip(1)
.find()
.then(options => {
// pastikan settingan “show text on load” disetting ke “item from dropdown”
let productOptions = [{ “value”: “”, “label”: “Choose an Option” }];
productOptions.push(…options.items.map(optionOnDatabase => {
return { “label”: optionOnDatabase.name, “value”: optionOnDatabase._id };
}));
$w(“#optionFilterDropdown”).options = productOptions;
});
}

and here’s my site experiment :
https://abronson9.wixsite.com/mysite-1