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
Wix Order Fulfillment
Automate your Wix store's order fulfillment process with VeloCode. Streamline operations from order to delivery, hassle-free.
Custom Checkout Page in Wix
Enhance your Wix store with a custom checkout page. Boost sales and user experience with tailored checkout solutions. Get professional customization today!
Wix Payment Providers
Simplify payment provider integration on your Wix site with VeloCode. Connect with leading services for secure and easy transactions.
