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
Lightspeed Wix Integration: Enhance Your E-commerce Platform
Enhance your e-commerce store with Lightspeed Wix integration. Streamline operations, improve customer experience, and boost sales effortlessly
Integrating Wix with Firebase
Discover how connecting Wix with Firebase can expand your site's functionality and improve user engagement.
Wix Pipedrive Integration: The Ultimate Guide to Streamline Your Sales Funnel
Connect Wix with Pipedrive effortlessly. Streamline leads, automate workflows, and manage your CRM directly from your Wix website with Davydov Consulting.
