윅스 (Wix) 코딩 강의 고급 (Advanced) - 메가 서치 (Mega Search) - 데이터 (Data)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 메가 서치 (Mega Search) - 데이터 (Data)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 메가 서치 (Mega Search) - 데이터 (Data)

강의 내용 요약

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

 

윅스 웹사이트 내에 검색 기능을 만듭니다.

 

예제 보러가기 (View Example)

Real Estate

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션
• 반복 레이아웃 / 리피터
• 라디오 버튼
• 드랍다운
• 슬라이드쇼
• 체크박스

코드 (Code)

Home

import wixData from 'wix-data';
import { debounce } from 'lodash';

const collectionName = 'realEstateProperties';
const debounceTime = 500;

$w.onReady(function () {
	initComps();
	initRepeater();
	buildFiltersAndPopulateRepeater();
});

async function initComps() {
	// populate iLocation dropdown
	const res = await wixData.query(collectionName)
		.ascending('mainLocation')
		.distinct('mainLocation')
		.then((locationData) => {
			return locationData.items.map((location) => {
				return {
					value: location,
					label: location
				}
			});
		});
	$w('#iLocation').options = res;

	// change max price according to type selection
	$w('#iType').onChange((event) => {
		$w('#iMaxPrice').max = event.target.value === 'RENT' ? 20000 : 50000000;
	});

	// bind all input elements
	const componentsTypeArray = ['RadioButtonGroup', 'Dropdown', 'Slider', 'CheckboxGroup'];

	const debounceFunction = debounce(buildFiltersAndPopulateRepeater, debounceTime);
	componentsTypeArray.forEach((compType) => {
		const compArray = $w(compType);
		compArray.forEach((comp) => {
			comp.onChange((event) => {
				debounceFunction();
			});
		});
	});
}

async function buildFiltersAndPopulateRepeater() {
	let dataQuery = wixData.query(collectionName);

	dataQuery = dataQuery.eq('type', $w('#iType').value);
	if ($w('#iLocation').value) {
		dataQuery = dataQuery.eq('mainLocation', $w('#iLocation').value);
	}

	// sliders
	dataQuery = dataQuery.ge('squareFeet', $w('#iSize').value);
	dataQuery = dataQuery.ge('bedrooms', $w('#iBedrooms').value);
	dataQuery = dataQuery.ge('bathrooms', $w('#iBathrooms').value);
	dataQuery = dataQuery.ge('levels', $w('#iLevels').value);
	dataQuery = dataQuery.ge('price', $w('#iMinPrice').value);
	if ($w('#iMaxPrice').value > 0) {
		dataQuery = dataQuery.le('price', $w('#iMaxPrice').value);
	}

	// multiple selection
	$w('#iOptions').value.forEach((selectedOption) => {
		dataQuery = dataQuery.eq(selectedOption, true);
	})

	$w('#propertyList').data = await dataQuery.find().then((res) => res.items);
}

function initRepeater() {
	$w('#propertyList').onItemReady(($item, itemData) => {
		$item('#pImage').src = itemData.thumbnailImage;
		$item('#pName').label = itemData.propertyName;
		$item('#pLocation').text = itemData.mainLocation;
		$item('#pPrice').text = '$' + String(itemData.price);
		$item('#pType').text = itemData.type;
		$item('#pBedrooms').text = String(itemData.bedrooms);
		$item('#pLevels').text = String(itemData.levels);
		$item('#pBaths').text = String(itemData.bathrooms);
		$item('#pSize').text = String(itemData.squareFeet);
	});
}

 

API

Wix Data API

wix-data - Corvid API Reference

 

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) - 검색창 만들기 (Search a Database) - 데이터 (Data)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Mega Search | Corvid by Wix Examples | Wix.com