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

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

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

강의 내용 요약

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

 

수업을 예약할 수 있는 서비스 페이지 및 상품을 판매할 수 있는 상품 페이지를 만듭니다.

 

예제 보러가기 (View Example)

awakening-positivity

 

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

Log In | Wix

 

 

강의 내용 만드는법

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

• 데이터베이스 컬렉션
• 동적 페이지
• 이미지
• 텍스트
• 버튼

 

코드 (Code)

Redirect

// This page does not contain any code.
// It contains a link that navigates to the dynamic page that is used to display the site’s services.

 

Bookings/Services Servcies

//-------------Page Setup-------------//

// Populate some elements when the dataset is ready. Other elements are 
// connected to the dataset using the Connect to Data button. 
export function scheduleDataset_ready() {
	// Get the current service's schedule. 
	const schedule = $w("#scheduleDataset").getCurrentItem();
	// Calculate the current service's duration (e.g. 1 hr 30 min).
	const duration = getDurationFromMinutes(schedule.serviceDurationInMinutes);
	// Populate the duration text with the calculated duration. 
	$w("#duration").text = duration;
	// Populate the schedule repeater with the service's schedule data.
	populateSchedule(schedule.serviceSchedule);
}

// Populate the schedule repeater with the service's schedule data.
function populateSchedule(serviceSchedule) {
	// Process the service's schedule data so it can be used to set the schedule repeater's data.
	const repeaterArray = Object.keys(serviceSchedule)
		.map(day => ({ _id: day, day, times: mapTimes(serviceSchedule[day]) }))
		.filter(day => day.times.length > 0);
	// Set the schedule repeater's data, thereby populating the repeater's elements.
	$w("#schduleRepeater").data = repeaterArray;
}

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

// Set up each item in the schedule repeater as it is loaded.
export function schduleRepeater_itemReady($item, itemData, index) {
	// Populate the day text with the scheduling item's long day text. 
	$item("#day").text = shortDaysToLongDays[itemData.day];
	// Populate the times text with a single time or joined times (e.g. 10:00 am or 9:30 am / 2:00 pm).
	$item("#times").text = itemData.times.join(" / ");
}

//-------------Date and Time Helpers-------------//

// Map short day names to full day names.
const shortDaysToLongDays = {
	sun: 'Sunday',
	mon: 'Monday',
	tue: 'Tuesday',
	wed: 'Wednesday',
	thu: 'Thursday',
	fri: 'Friday',
	sat: 'Saturday'
};

// Get the time of the given date formatted as HH:MM AM/PM.
function getTimeOfDay(date) {
	return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }).toLowerCase();
}

// Get a duration text from a given number of minutes (e.g. 1 hr 30 min).
function getDurationFromMinutes(mins) {
	// Calculate how many hours are in the duration.
	const hours = Math.floor(mins / 60);
	// Calculate how many minutes are left over.        
	const minutes = mins % 60;
	// Create the hours text.
	const hoursOutput = hours === 0 ? `` : hours === 1 ? `1 hr` : `${hours} hrs`;
	// Create the minutes text.
	const minutesOutput = minutes === 0 ? `` : `${minutes} min`;
	// Return the hours and minutes texts.
	return `${hoursOutput} ${minutesOutput}`;
}

// Format schedule times.
function mapTimes(times) {
	return times.map(time => {
		// Split the time into hour, minute, and seconds sections.
		const splitStartTime = (time.startTime).split(":");
		// Determine if the time is am or pm.
		const suffix = splitStartTime[0] < 12 ? 'am' : 'pm';
		// Return the hour, minutes, and suffix texts.
		return `${(splitStartTime[0] % 12 + ":" + splitStartTime[1])} ${suffix}`;
	})
}

 

API

Wix Bookings API

wix-bookings - Corvid API Reference

 

 

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

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

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

 

 

연관된 토픽)

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

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

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

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

Service Page | Corvid by Wix Examples | Wix.com