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
Calendly Integration with Wix: Streamlining Your Scheduling Process
Add Calendly to your Wix site to streamline scheduling, manage appointments, and boost productivity. Perfect for client bookings on Wix
Wix-Square Integration: Enhancing Business Workflow
Connect Square with Wix for a seamless payment solution. Manage transactions, track sales, and handle payments directly on your Wix site
The Definitive Guide to Integrating MLS with Wix: Boosting the Online Presence of Real Estate
Learn how to integrate MLS with Wix to enhance your real estate website's online presence. Boost listings, attract more buyers, and grow your business
