윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 체크박스 만들기 (Checkbox Dropdown) - 데이터 (Data)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 체크박스 만들기 (Checkbox Dropdown) - 데이터 (Data)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 체크박스 만들기 (Checkbox Dropdown) - 데이터 (Data)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트내에 드랍다운 메뉴를 활용한 체크박스 기능을 만들어 검색 내용을 필터링할 수 있도록 합니다.

 

예제 보러가기 (View Example)

ARTICLES | Multi-Select

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 드랍다운
• 컨테이너 상자
• 텍스트
• 이미지
• 반복레이아웃 / 리피터

코드 (Code)

ARTICLES

import wixData from "wix-data";

let lastFilterContinents = [];

$w.onReady(() => {
	// handle each suggestion repeater item
	$w("#continents").onItemReady(($item, itemData, index) => {
		$item('#optionCheckbox').onChange(() => {
			filterByCheckboxes()
		})
		$item("#optionText").text = itemData.value;
	});
	loadContinents();
});

function loadContinents() {
	wixData.query('Continents')
		.find()
		.then(results => {
			$w("#continents").data = [];
			// Create and map an array for the dropdown menu options
			let continentDropdownOptions = [];
			continentDropdownOptions.push(...results.items.map(continent => {
				return { "_id": continent._id, "value": continent.title, "label": continent.title };
			}));
			$w('#continents').data = continentDropdownOptions;
		});
}
// Filtering per options checked
function filterByCheckboxes() {
	let continents = [];
	$w("#continents").forEachItem(($item, itemData, index) => {
		if ($item('#optionCheckbox').checked) {
			continents.push($item("#optionText").text);
		}
	});
	filter(continents);
	$w('#numContinentsText').text = `${continents.length} continent${((continents.length > 1) ? "s " : " ")} selected.`;
}
// Collapse or expand the multi-select menu on click
export function continentBox_click(event) {
	if ($w('#continents').collapsed === true) {
		$w("#continents").expand();
	} else {
		$w("#continents").collapse();
	}
}

function filter(continents) {
	let newContinentsFilterCheck = compareArrays(continents, lastFilterContinents);
	if (!newContinentsFilterCheck) {
		let newFilter = wixData.filter();
		newFilter = newFilter.hasSome('continent', continents);
		$w('#dataset1').setFilter(newFilter).then(function () {
			let count = $w("#dataset1").getTotalCount();
		});
		lastFilterContinents = continents;
	}
}

// Code to compare string arrays
// Used to compare the current and previous continent selections
function compareArrays(newFilterArray, lastFilterArray) {
	if (newFilterArray.length !== lastFilterArray.length) { return false } //Checking if the number of items in the filter arrays match
	//Sort both arrays for easy comparison and checking if the items match
	let sortedNewFilterArray = newFilterArray.concat().sort()
	let sortedLastFilterArray = lastFilterArray.concat().sort()
	for (let index in sortedNewFilterArray) {
		if (sortedNewFilterArray[index] !== sortedLastFilterArray[index]) return false
	}
	return true
}

 

API

$w.Checkbox API

$w.Repeater API

Wix Data API

Wix Dataset API

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 검색창 만들기 (Search a Database) - 데이터 (Data)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 다이나믹 슬라이드쇼 (Dynamic Slideshow) - 데이터 (Data)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 드랍다운 다루기 (Dropdown Custom Element) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

Checkbox Dropdown | Corvid by Wix Examples | Wix.com