Question:
How do I set the default box, that is checked in a multiple checkbox input, that is connected to a repeater and database through code through a selection tag that is not seen?
Product:
Velo Dev Mode Wix Web Editoer
What are you trying to achieve:
I am trying to have a page on a website already pre-checked. so when a visitor visits, it only shows that data in the repeater connected to that selection tag in the database. I need it to be able to be unchecked by a visitor if they want to change selection tags by unchecking the box and checking another box on the same page. It also needs to allow to have multiple boxes checked at the same time if the visitor wants to add to what is shown in the repeater in the default view. How do I code it so that it’s defaulted to a selection tag I choose but can be changed by the person viewing the site?
What have you already tried:
I’ve tried every code I could find online and nothing seems to work for what I need exactly. I am newer to coding and have only a basic understanding of it. I’m not sure with Wix which code to use to get all of the things I am looking for that will work together to get the desired effect. Some of the articles I’ve tried:
https://www.wix.com/wix-lp/new-wixcode/forum/coding-with-velo/one-selection-tag-automatically-chosen
https://forum.wixstudio.com/t/one-selection-tag-automatically-chosen/11454/6
https://forum.wixstudio.com/t/tag-selection/10088/7
Additional information:
Since the site is not yet published, here is a screenshot of what I am trying to achieve when you arrive at the page’s URL:
Current code I have on the page:
import wixData from 'wix-data';
let debounceTimer;
$w.onReady(() => {
$w("#searchbar").onKeyPress(function () {
$w("#searchbar").value;
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w("#searchbar").value);
}, 200);
})
let searchWord;
function filter(search) {
if (searchWord !== search) {
$w("#dataset1").setFilter(wixData.filter().contains('type', search)
.or(wixData.filter().contains("price", search))
.or(wixData.filter().contains("propertyName", search))
.or(wixData.filter().contains("about", search))
.or(wixData.filter().contains("sku", search))
.or(wixData.filter().contains("squareFeet", search))
//Insert more field filter here ====> here <====
)
.then(countItems)
searchWord = search
}
}
function countItems() {
let count = $w("#dataset1").getTotalCount()
count > 0 ? $w("#text152").text = `${count} Results Found` : $w("#text152").text = `No Results Found`;
return countItems;
}
$w("#dataset1").onReady(function () {
countItems();
});
})
$w.onReady(function () {
populatePlansRepeater();
$w("minValueInput, #maxValueInput").onChange(filterPlansBySize)
});
async function populatePlansRepeater(){
const sizeQueryResult = await wixData.query("Properties").find();
const size = sizeQueryResult.items;
$w("#repeaterplans").data = size;
$w("#repeaterplans").expand();
}
async function filterPlansBySize() {
const minSize = Number($w("#minValueInput").value);
const maxSize = Number($w("#maxValueInput").value);
if(maxSize > 0) $w("#minValueInput").max = maxSize;
if(maxSize > 0) $w("#maxValueInput").min = minSize;
const minSizeQuery = wixData.query("Properties").ge("squareFeet1", minSize);
const maxSizeQuery = wixData.query("Properties").le("squareFeet1", maxSize);
let sizeQuery = wixData.query("Properties");
if(minSize >= 0){
sizeQuery = sizeQuery.and(minSizeQuery);
}
if(maxSize > 0){
sizeQuery = sizeQuery.and(maxSizeQuery);
}
const sizeQueryResult = await sizeQuery.find();
const size = sizeQueryResult.items;
$w('#repeaterplans').data = size;
}
Last code I tried but I’m not sure if I calling the right value for the selection tag for “Coastal Home Plans”
$w.onReady(function () {
let homeplanOptions = $w("#checkboxGroup2").options;
homeplanOptions.push({"label": "Coastal Home Plans", "value": "coastal"});
$w("#checkboxGroup2").options = homeplanOptions;
});
$w("#checkboxGroup2").onClick(() => {
$w("#dataset1").setFilter( wixData.filter()
.hasSome("coastal", $w("#checkboxGroup2").value));
});
Any and all help is appreciated! I’m very new at this coding thing so please explain throughly as I don’t have a large knowledge with it and sending me the Velo API doesn’t help.
Thanks! 