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
Klaviyo-Wix Integration: A Comprehensive Guide to Harnessing the Power
Connect Klaviyo with Wix to boost email marketing, track customer behavior, and grow your audience effectively. Perfect integration for eCommerce sites
Wix Etsy Integration: Streamlining Your Online Store
Learn how to connect your Wix site to Etsy, manage inventory, sync sales, and expand your online reach effortlessly with this integration guide
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.
