윅스 (Wix) 코딩 강의 중급 (Intermediate) - 서비스 리스트 (Service List) - 윅스 예약시스템 (Wix Bookings)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 서비스 리스트 (Service List) - 윅스 예약시스템 (Wix Bookings)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 서비스 리스트 (Service List) - 윅스 예약시스템 (Wix Bookings)

강의 내용 요약

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

 

예약 가능한 서비스의 리스트를 보거나 필터링하는 기능을 만듭니다.

 

예제 보러가기 (View Example)

Classes | Custom Service List

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션
• 사이트 페이지
• 열 스트립
• 텍스트
• 반복 레이아웃 / 리피터
• 버튼

 

코드 (Code)

Classes

//-------------Imports-------------//

// Import the wix-data module for creating dataset filters.
import wixData from "wix-data";
// Import the wix-bookings module for getting available service slots.
import wixBookings from "wix-bookings";

import wixWindow from 'wix-window';

let isMobile;

$w.onReady(() => {
	isMobile = wixWindow.formFactor === "Mobile";
})

function showLoader(show = false) {
	if (show === false) {
		$w("#servicesLoaderMobile").hide();
		$w("#servicesLoader").hide();
	}
	if (show === true) {
		if (isMobile === true) {
			$w("#servicesLoaderMobile").show();
		}
		else {
			$w("#servicesLoader").show();
		}
	}
}

//-------------Repeater Setup-------------//

// Set up each item in the services repeater as it is loaded. Note that 
// most of the repeater elements are populated using a dataset. 
export async function servicesRepeater_itemReady($item, itemData, index) {
	if (index === 0) {
		showLoader(false);
	}
	// Get the item's service ID.
	const serviceId = itemData._id;
	// Retrieve the available slots for the item's service.
	const availability = await wixBookings.getServiceAvailability(serviceId);
	// Store the first available slot as the next available slot.
	const nextAvailableSlot = availability.slots[0];
	// If there is an available slot:
	if (nextAvailableSlot) {
		// Set the nextSlot text to the month and day of the next available slot.
		$item("#nextSlot").text = getMonthDay(nextAvailableSlot.startDateTime);
	}
	// If there are no available slots: 
	else {
		// Set the nextSlot text to ???.
		$item("#nextSlot").text = "???";
	}
}

//-------------Category Button Clicks-------------//

// Filter the displayed services using the "BREATHE" button.
export function breatheButton_click(event) {
	// Create a filter that filters out all services that are not in the Breathe category.
	const breatheQuery = wixData.filter().eq("category", "BREATHE");
	// Set the active category to the breathe category.
	setActiveCategory("BREATHE", breatheQuery);
	// Scroll the page to the list of services.
	scrollToServiceStrip();
}

// Filter the displayed services using the "MOVE" button.
export function moveButton_click(event) {
	// Create a filter that filters out all services that are not in the Move category.
	const moveQuery = wixData.filter().eq("category", "MOVE");
	// Set the active category to the move category.
	setActiveCategory("MOVE", moveQuery);
	// Scroll the page to the list of services.
	scrollToServiceStrip();
}

// Filter the displayed services using the "NOURISH" button.
export function nourishButton_click(event) {
	// Create a filter that filters out all services that are not in the Nourish category.
	const nourishQuery = wixData.filter().eq("category", "NOURISH");
	// Set the active category to the nourish category.
	setActiveCategory("NOURISH", nourishQuery);
	// Scroll the page to the list of services.
	scrollToServiceStrip();
}

//-------------Change Category-------------//

// Set the category of services to display.
async function setActiveCategory(title, queryFilter) {
	$w("#servicesRepeater").data = [];
	// Populate the title text with the given title.
	$w("#stripTitle").text = title;
	showLoader(true)

	// Filter the categories dataset using the given filter.
	await $w("#categoriesDataset").setFilter(queryFilter);
}

// Scroll down to the displayed services.
function scrollToServiceStrip() {
	$w("#servicesStrip").scrollTo();
}

//-------------Date Helpers-------------//

// Get the month and day of the given date formatted as DD/MM.
function getMonthDay(date) {
	return date.toLocaleDateString([], { day: "numeric", month: "numeric" });
}

 

 

 

API

$w.Repeater API

Wix Data API

Wix Bookings API

 

 

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

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

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

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 서비스 페이지 (Service Page) - 윅스 예약시스템 (Wix Bookings)

윅스 (Wix) 코딩 강의 중급 (Intermediate) - 서비스 페이지 (Service Page) - 윅스 예약시스템 (Wix Bookings)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Service List | Corvid by Wix Examples | Wix.com