Setting Dropdown, Search, and Sort by Functions to Display One Collection on a Dynamic Page

Ask the community
, ,
1

Hello all!

I am currently building a custom shop page that uses text input and dropdown menus to quick search products by their names, filter results by specific collections (“#collection”,“#shipTime”,“#color”), as well as sort by price, date, or alphabetical order.

My question is, is it possible to use the search, filter, and sort by functions I’ve set up to display products within one specific collection, as opposed to the entire ‘Stores/Products’ database?

I have my repeater set up on a dynamic page so that every shop-related collection of mine has its own page. The repeater is set to the "Stores/Products’ database, which is manually filtered to reference the collection the page is dedicated to. On preview, the filtering is correct for every dynamic page but once the repeater is sorted, searched, filtered, or reset, products from any collection are pulled. Ideally, I’d only like products from the collection the page is dedicated to to be displayed.

Is there a way to set queries or references in this code so that this doesn’t happen?

Provided below is what I’m using:

import wixData from 'wix-data';

$w.onReady(function () {

});
export function repeater1_itemReady($item, itemData, index) {
    $item("#price").text = itemData.price + ' ' + itemData.currency;
}

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 shipTime_change(event) {
    defaultSort = await false;
    filter(filterName, $w("#shipTime").value);
}

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

export async function sortBy_change(event) {
    defaultSort = await false;
 if($w("#sortBy").value === 'A-Z') {
        $w("#productsDataset").setSort(wixData.sort()
        .ascending("name")
        );
    } else if($w("#sortBy").value === 'Z-A') {
        $w("#productsDataset").setSort(wixData.sort()
        .descending("name")
        );
    } else if($w("#sortBy").value === 'New to Old') {
        $w("#productsDataset").setSort(wixData.sort()
        .ascending("_updatedDate")
        );
    } else if($w("#sortBy").value === 'Old to New') {
        $w("#productsDataset").setSort(wixData.sort()
        .descending("_updatedDate")
        );
    } else if($w("#sortBy").value === 'Price High to Low') {
        $w("#productsDataset").setSort(wixData.sort()
        .descending("price")
        );
    } else if($w("#sortBy").value === 'Price Low to High') {
        $w("#productsDataset").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;
    $w("#shipTime").value = await undefined;
    $w("#color").value = await undefined;
    defaultSort = await true;
    filter();
}

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

let filterName;
let collectionName;
let shipName;
let colorName;

let debounceTimer;

async function filter(name, collection, shipTime, color) {
 if(filterName !== name || collectionName !== collection || shipName !== shipTime || colorName !== color) {  
 let newFilter = wixData.filter();

 if(name)
        newFilter = newFilter.contains('name', name);
 if(collection)
        newFilter = newFilter.hasSome('collections', [collection]);
 if(shipTime)
        newFilter = newFilter.hasSome('shipTime', shipTime);
 if(color)
        newFilter = newFilter.hasSome('color', color);

 await $w("#productsDataset").setFilter(newFilter);
 
 if(defaultSort === true) {
        $w("#productsDataset").setSort(wixData.sort()
        .descending("_updatedDate")
        );
    }
 
 let count = $w("#productsDataset").getTotalCount();
    $w("#count").text = 'Total Products: (' + count + ')';
    filterName = name;
    collectionName = collection;
    shipName = shipTime;
    colorName = color;
    }
}

Thanks in advance!

2

Did you ever figure how to force the gallery to display just one collection?