Checkbox Option from low to high

Ask the community
,
1

Details:
I’m no expert at using codes so this project got a bit challenging for me. I’m building an affiliate website that uses repeaters. The challenge part was to search for a keyword through a text input found in header and provide the result in results page. That worked well for me.

The other thing I’m having trouble figuring out is to filter the repeater. When I simply connect the checkbox to the database, it works well but the issue is the order of the options. It’s random and I hope we can make it from low to high. The field type I’m using is Text so I can use the $ for it.

It’s currently built using WiX Studio. The codes was just from watching youtube and was modified through ChatGPT, surprisingly it worked but ChatGPT couldn’t figure out the filter part.

Any help, work around, alteration is appreciated.

Here’s the website and you can see the filter checkbox in All Products page.
https://codecandy.wixstudio.io/website

The code I’ve used on master page for the header keyword search is this.

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

$w.onReady(function () {
$w(“#repeaterAll”).onItemReady(($item, itemdata) => {
$item(“#title”).text = itemdata.title;
$item(“#description”).text = itemdata.description;
});

$w("#searchInput").onKeyPress((event) => {
    if (event.key === "Enter") {
        search();
    }
});

$w("#searchButton").onClick(search);

async function search() {
    const query = $w("#searchInput").value;
    local.setItem('searchQuery', query);
    wixLocation.to("/results-page");
}

});

And the code for the results page is this.

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

$w.onReady(async function () {
try {
$w(“#newSearch”).onKeyPress((event) => {
if (event.key === “Enter”) {
performSearch($w(“#newSearch”).value);
}
});

    $w("#newSearchButton").onClick(async () => {
        const newQuery = $w("#newSearch").value;
        $w("#searchQueryText").text = `Results for: ${newQuery}`;
        await performSearch(newQuery);
    });

    $w("#searchInput").onKeyPress((event) => {
        if (event.key === "Enter") {
            performSearch($w("#searchInput").value);
        }
    });

    $w("#searchButton").onClick(() => {
        performSearch($w("#searchInput").value);
    });

    const initialQuery = local.getItem('searchQuery') || "";
    $w("#searchQueryText").text = `Results for: ${initialQuery}`;
    await performSearch(initialQuery);

} catch (error) {
    console.error("An error occurred:", error);
}

});

async function performSearch(query) {
try {
const titleQuery = wixData.query(“Products”).contains(“title”, query);
const searchQuery = wixData.query(“Products”).contains(“search”, query);

    const mockDataQueryResult = await titleQuery.or(searchQuery).find();

    const mockData = mockDataQueryResult.items || [];

    if ($w("#repeaterAll")) {
        $w("#repeaterAll").data = mockData;

        if (mockData.length === 0) {
            $w("#noResult").show();
        } else {
            $w("#noResult").hide();
        }
    } else {
        console.error("Repeater with ID 'repeaterAll' not found.");
    }
} catch (error) {
    console.error("An error occurred during the search:", error);
}

}