Database Store Filters Integration for Wix
Velo Code Solution
Wix Platform has quite an easy-to-use, convenient database (Content Manager) that can be filled in with custom data that can be fed into repeaters and dynamic pages across the site. However, to allow users to filter this data, it is only possible to set up Dropdown Filters (with certain limitations still) without Velo coding in Wix. To extend the basic functionality, we can add a Wix database product filter to the website using Velocode.
For all other types of filters Velo code is needed:
Checkboxes.
Multi-checkboxes.
Price Sliders.
Word search filters (full or partial).
Star rating.
Tag Search.
Filter logic can be:
AND logic. Use AND logic to find items that fulfil all requirements within a collection of filter or path rules. So the search would be minimised as a customer selects more and more filters, thus getting to a more personalised result.
OR logic. Use OR logic to find items that satisfy at least one set of filter or path rules. Filtering allows users of your site to navigate through hundreds and thousands of records in your database records that are displayed on the page.
Tools
Wix Velo Code
Example Code
import wixData from 'wix-data';
var filtered = [];
var arrPr = []
let arrC = []
var tc = 400;
let stepfiller = 0;
async function Filler() {
while (arrPr.length <= tc) {
let res = await wixData.query("Stores/Products").include("collections").skip(stepfiller++ * 100).limit(100).find();
tc = res.totalCount - 1;
arrPr = arrPr.concat(res.items)
if (arrPr.length -1 === tc) {
$w("#text28").hide()
$w("#image6").hide()
}
Refresh(filtered.length > 0 ? filtered : arrPr);
$w('#repeater1').show()
}
}
$w.onReady(async function () {
ResetDrops();
Filler()
});
async function ResetDrops() {
if (arrC.length == 0) {
await CollectionsFiller()
}
let productOps = []
for (let i = 0; i < arrC.length; i++) {
if (!productOps.some(e => e.label === arrC[i].name.split("*")[0])&& arrC[i].name !== "All Products"&& arrC[i].name !=="New Arrivals") {
productOps.push({
"label": arrC[i].name.split("*")[0],
"value": arrC[i].name.split("*")[0]+"*",
})
}
}
$w("#dropdown1").options = productOps;
let modelOps = []
for (let i = 0; i < arrC.length; i++) {
let label = arrC[i].name.split("*")[1];
if (typeof label && !modelOps.some(e => e.label == arrC[i].name.split("*")[1])) {
modelOps.push({
"label": arrC[i].name.split("*")[1],
"value": arrC[i].name.split("*")[1],
})
}
}
$w("#dropdown2").options = modelOps;
let markOps = []
for (let i = 0; i < arrC.length; i++) {
let label = arrC[i].name.split("*")[2]
if (label && !markOps.some(e => e.label == arrC[i].name.split("*")[2])) {
markOps.push({
"label": arrC[i].name.split("*")[2],
"value": arrC[i].name.split("*")[2],
})
}
}
$w("#dropdown3").options = markOps;
}
More Velo Integrations
Lazy Load for Repeaters
Integration Lazy Load for Wix website. Integrating lazy load system for optimization in Wix site
Ecwid Wix Integration: The Comprehensive Manual
Easily integrate Ecwid with Wix to enhance your online store. Follow our guide to improve functionality and deliver a seamless shopping experience
IDX Integration on Wix: The Essential Guide to Elevating Your Real Estate Website's Efficiency
Easily integrate IDX on Wix for seamless real estate listings, property search, and lead generation. Make your Wix site real estate-ready today
