윅스 (Wix) 코딩 - 맞춤 예약 서비스 기능 만들기 (Wix Code: Creating a Custom Bookings Experience)

윅스 (Wix) 코딩 - 맞춤 예약 서비스 기능 만들기 (Wix Code: Creating a Custom Bookings Experience)

 

 

 

설명)

 

Wix Code Bookings API를 사용하면 사이트에서 제공하는 서비스에 대한 사용자 정의 예약 환경을 만들 수 있습니다.

 

 

 

전제 조건 (Prerequisites)

Bookings API를 사용하기 전에 Bookings App을 사용하여 서비스를 설정합니다.

 

예약에 대한 지불을 받는 경우, Booking API를 사용하기 전에 지불을 허용하도록 사이트를 설정해야합니다. 자세한 내용은 지급 수령 정보를 참조합니다.

 

 

노트 :

지불을 허용하도록 사이트를 설정할 때 제공하려는 지불 방법을 선택하고 지불 통화를 설정합니다.

Bookings API를 사용하여 모든 유형의 윅스(Wix) 계정에서 일대일 세션 예약을 체크아웃할 수 있습니다. 진행중인 세션 또는 비즈니스 프리미엄 플랜으로 업그레이드해야하는 세션 세트에 대한 예약 체크아웃합니다.

 

 

Bookings API

Bookings API는 서비스의 사용 가능한 슬롯을 얻고 사용가능한 슬롯 중 하나를 예약하는데 사용되는 두 가지 클라이언트측 함수로 구성됩니다.

- getServiceAvailability( ) - 주어진 서비스에 대해 사용 가능한 슬롯을 검색하기 위해 호출됩니다. 이 함수를 호출하기 전에 먼저 예약할 서비스의 ID를 검색해야합니다.

- checkoutBooking( ) - 서비스를 예약하고 필요한 경우 현재 사이트 방문자에게 지불 정보를 입력하도록 요청할 때 호출됩니다. 이 기능을 사용하려면 예약할 특정 서비스 슬롯과 서비스 예약시 필요한 모든 양식 입력란(필드) 값을 전달해야합니다.

 

Bookings API에 대한 자세한 정보는 API Reference의 wix-booking을 참조합니다.

 

 

 

예약 수명 주기 (Bookings Lifecycle)

다음 목록은 Bookings API의 사용 방법을 보여주기 위해 표준 예약 생명주기에서 수행된 단계를 설명합니다. 이 흐름을 따라할 필요가 없음을 기억합니다. Bookings API를 사용하여 사이트의 특정 요구를 충족시키는 사용자 지정 예약 흐름을 만들 수 있습니다.

 

1. Bookings/Services 컬렉션에서 서비스 목록을 가져와서 표시합니다.

2. 사용자가 표시된 서비스 중 하나를 선택합니다.

3. 선택한 서비스의 서비스 ID (_id) 값을 사용하여 getServiceAvailability( ) 함수를 호출합니다. 위에서 수행한 쿼리의 결과에서 해당 ID를 얻습니다. (선택적으로 ServiceAvailabilityOptions 객체를 전달하여 반환되는 슬롯의 제한을 변경할 수 있습니다.)

4. 리턴된 슬롯을 표시합니다. Bookings/Staff 컬렉션에서 반환된 슬롯과 관련된 직원 멤버 항목을 검색할 수도 있습니다.

5. 서비스 요소가 있는 경우 입력 요소를 표시하여 서비스의 양식 입력란(필드)를 수집합니다. 입력란(필드) 속성에서 위에 수행한 쿼리의 결과에서 양식 입력란(필드) 목록을 검색합니다.

6. 사용자가 양식 입력란(필드) 값을 입력하고 예약을 체크아웃해야 함을 나타냅니다.

7. checkoutBooking( ) 함수를 호출합니다. 필요한 경우 선택한 슬롯 객체, 양식 입력란(필드)의 값 및 지불 유형을 전달합니다. 지정된 지불 유형은 사이트 대시보드의 서비스 구성과 일치해야합니다. 유료 서비스를 무료로 예약할 수는 없습니다.

- 서비스가 무료인 경우 paymentOptions 객체를 전달할 필요가 없습니다.

- 서비스가 무료가 아니고 지불이 온라인이어야 함을 나타내는 paymentOptions 객체를 전달하면 사용자가 신용카드 정보와 같은 지불 정보를 입력할 수 있는 지불 팝업이 표시됩니다.

- 서비스가 무료가 아니고 결제가 오프라인이어야 함을 나타내는 paymentOptions 객체를 전달하면 결제 팝업이 사용자에게 표시되지 않습니다.

 

 

 

 

 

 

예약 예제 (Bookings Example)

다음은 위에서 설명한 샘플 예약 수명주기를 달성하기 위해 페이지 요소 및 코드를 사용하는 방법을 보여주는 예제입니다. 예제 단계는 위 목록의 번호와 일치합니다.

 

노트 :

이 예제에서는 예약 수명주기를 주도하는 코드에 중점을 둡니다. 우리는 예약 과정을 통해 사용자를 안내하는 데 도움이 되는 추가 코드를 포함하지 않습니다. 수명 주기를 페이지의 섹션으로 분할하고 수명 주기의 특정 시점에서 사용자와 관련이 있는 섹션에 따라 섹션을 확장하거나 축소할 수 있습니다.

 

 

1단계 : 서비스 검색 및 표시 (Step 1: Retrieve and Display Services)

사이트의 서비스 목록을 검색하여 여러 가지 방법으로 표시할 수 있습니다. 이 예제에서는 반복 레이아웃에 연결된 데이터세트를 사용합니다. 이를 통해 우리는 표시되는 서비스 데이터와 최소한의 코드 사용 방법을 완벽하게 사용자 정의할 수 있습니다.

 

서비스 목록을 검색하는 또 다른 옵션은 다음과 같습니다.

- 사이트의 Bookings/Services 컬렉션을 쿼리합니다

 

 

서비스 목록을 표시하는 다른 옵션은 다음과 같습니다.

- 표(Table)

- 갤러리

- 드롭다운

- 라디오 버튼

- 체크박스

 

이 예에서는 ID bookingsDataset이 Bookings/Services 컬렉션에 연결된 데이터세트를 추가합니다. 다음 페이지 요소는 데이터세트를 통해 컬렉션의 입력란(필드)에 연결됩니다.

 

 

유형 (Type)	ID	입력란(필드)에 연결
반복 레이아웃 (Repeater)	servicesRepeater	-
텍스트 (Text)	titleText	서비스 이름 (Service Name)
이미지 (Image)	serviceImage	서비스 사진 (Service Image)
텍스트 (Text)	taglineText	서비스 태그라인(Service Tagline)
텍스트 (Text)	priceText	가격 요약 (Price Summary)
버튼 (Button)	bookButton	-

 

 

 

 

 

2단계 : 사용자 서비스 선택 (Step 2: User Selects Service)

서비스를 표시하는 방법에 따라 사용자의 서비스 선택에 대해 다르게 대응해야합니다. 결론은 사용자가 선택한 서비스의 ID를 얻어야한다는 것입니다.

 

이 예에서는 사용자가 데이터세트에 연결된 반복 레이아웃의 버튼을 클릭하므로 버튼의 클릭 이벤트를 사용하여 선택한 서비스의 ID를 가져올 수 있습니다.

 

속성 패널을 사용하여 onClick 이벤트 이벤트 핸들러를 bookButton에 추가합니다. 이벤트 핸들러에서 이벤트의 컨텍스트를 사용하여 선택한 서비스의 ID를 검색합니다. 컨텍스트는 클릭된 bookButton을 알고 있으며 해당 항목의 ID를 가져올 수 있습니다.

 

export function bookButton_click(event) {
 const serviceId = event.context.itemId;
}

 

 

 

3단계 : 사용 가능한 슬롯 검색 (Step 3: Retrieve Available Slots)

getServiceAvailability( )를 호출하여 선택한 서비스의 사용 가능한 슬롯을 검색합니다. 이 함수는 선택된 서비스의 ID를 전달해야합니다.

이 예에서는 이미 선택한 서비스의 ID를 얻었습니다. 따라서 getServiceAvailability( )를 호출할 때 사용해야합니다.

 

먼저 페이지 코드 상단에서 Bookings API를 가져와야합니다.

 

import wixBookings from 'wix-bookings';

 

 

그런 다음 이전 단계에서 만든 이벤트 핸들러에 함수 호출을 추가할 수 있습니다. 나중에 사용할 수 있도록 슬롯을 저장해야하므로 availableSlots라는 변수도 만듭니다.

 

let availableSlots;

export function bookButton_click(event) {
  const serviceId = event.context.itemId;
  
  wixBookings.getServiceAvailability(event.context.itemId)
    .then( (availability) => {
      availableSlots = availability.slots;
  } );
}

 

getServiceAvailability( )를 호출할 때 반환할 슬롯을 구체화하는 날짜시간 범위를 정의하는 객체를 선택적으로 전달할 수 있습니다.

 

 

 

4단계 : 사용 가능한 슬롯 표시 (Step 4: Display Available Slots)

다시 한번, 방금 검색한 데이터를 다양한 방법으로 표시할 수 있습니다. 이 예에서는 드롭다운을 사용하여 사용 가능한 슬롯을 모두 표시합니다. 우리는 슬롯 데이터를 드롭다운에 적합한 형식으로 처리하기 위해 약간 처리해야합니다. 드롭다운의 ID는 slotDropdown입니다.

 

사용 가능한 슬롯을 표시하는 다른 옵션은 다음과 같습니다.

- 반복 레이아웃 (Repeater) 

- 표 (Table)

- 라디오 버튼 (Radio Buttons)

- 체크박스 (Checkboxes)

 

다시 위에서 만든 이벤트 핸들러에 코드를 추가합니다.

 

export function bookButton_click(event) {
  const serviceId = event.context.itemId;
  
  wixBookings.getServiceAvailability(event.context.itemId)
    .then( (availability) => {
      availableSlots = availability.slots;
      //---Added in this step---//
      const slotOptions = availableSlots.map( (slot) => {
        let date = slot.startDateTime;
        return {
          "label": date.toLocaleDateString() + " " + date.toLocaleTimeString(),
          "value": slot._id
        }
      } );
      $w('#slotDropdown').options = slotOptions;
      //---End of added in this step---//
 } );
}

 

 

 

5단계 : 양식 입력란(필드) 표시 (Step 5: Display Form Fields)

또한 선택된 서비스 양식 입력란(필드)를 수집하기 위해 입력 요소를 표시해야합니다. 여기서 우리는 ID가 formFieldRepeater 인 반복 레이아웃을 사용합니다. 반복 레이아웃의 각 항목은 ID fieldInput을 가진 단일 텍스트 입력으로 구성됩니다. 반복 레이아웃의 각 항목은 서비스의 양식 입력란(필드) 중 하나를 수집하는데 사용됩니다. 여기에서는 필요한 정보만 수집하도록 선택합니다.

 

먼저 위에 작성한 이벤트 핸들러에 코드를 추가합니다.

 

export function bookButton_click(event) {
  const serviceId = event.context.itemId;
  
  wixBookings.getServiceAvailability(event.context.itemId)
    .then( (availability) => {
      availableSlots = availability.slots;
      const slotOptions = availableSlots.map( (slot) => {
        let date = slot.startDateTime;
        return {
          "label": date.toLocaleDateString() + " " + date.toLocaleTimeString(),
          "value": slot._id
  }
      } );

      $w('#slotDropdown').options = slotOptions;

      //---Added in this step---//
      let $item = $w.at(event.context);
      let formFields = $item("#bookingsDataset").getCurrentItem().form.fields;

      formFields = formFields.filter(field => field.constraints.required)
      
      $w('#formFieldRepeater').data = formFields;
      //---End of added in this step---//
 } );
}

 

 

 

 

그런 다음 각 텍스트 입력 요소에 자리 표시자 텍스트를 설정하는 반복 레이아웃에 대한 이벤트 핸들러를 추가합니다.

 

export function formFieldRepeater_itemReady($item, itemData, index) {
 $item("#fieldInput").placeholder = itemData.label;
}

 

 

반복 레이아웃은 에디터에서 다음과 같이 보입니다 (반복 레이아웃 내부에 입력 요소가 있음).

 

 

 

 

채워지면 사이트에서 다음과 같이 보입니다.

 

 

 

 

6단계 : 사용자가 양식 입력란(필드) 값 및 서적 서비스에 입장

이 시점에서 사용자는 방금 설정한 반복 레이아웃의 양식 입력란(필드) 값을 입력합니다. 그런 다음 사용자가 예약을 처리해야 함을 나타냅니다. 이 예에서는 checkoutButton이라는 ID를 가진 버튼을 사용합니다.

 

설정 패널을 사용하여 checkoutButton에 onClick 이벤트 이벤트 핸들러를 추가합니다. 여기서 우리는 사용자가 양식 입력란(필드)에 입력한 모든 데이터를 수집합니다.

 

export function checkoutButton_click(event) {
  let formFieldValues = []; // list of values user entered
    
  // for each item in the repeater  
  $w('#formFieldRepeater').forEachItem( ($item, itemData, index) => {
    // add an object containing the corresponding form field's
    // ID and the value that the user entered
    formFieldValues.push( {
      "_id": itemData._id,
      "value": $item("#fieldInput").value
    } );
  } );
}

 

 

 

 

7단계 : 예약 체크 아웃 (Step 7: Booking Checkout)

checkoutBooking( )을 호출하여 예약 결제를 수행합니다. 이 함수는 사용자가 선택한 슬롯 객체와 양식 입력란(필드) 값을 전달해야합니다. 이것들을 bookingInfo라는 이름의 객체에 함께 묶습니다. 양식 입력란(필드) 데이터를 formFieldValues라는 변수에 이미 수집했음을 기억합니다.

checkoutBooking( )을 호출할 때 지불 옵션을 정의하는 객체를 선택적으로 전달할 수 있습니다. 이 예에서는 오프라인으로 지불하는 서비스를 사용하고 있으므로 지불 옵션을 전달하지 않을 것입니다.

또한 계산에 의해 반환된 결과를 처리합니다. confirmationText라는 ID를 가진 텍스트 요소에 사용자에게 체크 아웃 상태를 표시합니다.

 

export function checkoutButton_click(event) {
  let formFieldValues = []; 
    
  $w('#formFieldRepeater').forEachItem( ($item, itemData, index) => {
    formFieldValues.push( {
      "_id": itemData._id,
      "value": $item("#fieldInput").value
    } );
  } );
    
  //---Added in this step---//
  // build bookingInfo object
  let bookingInfo = {
    // selected slot object  
    "slot": availableSlots.find( (slot) => slot._id === $w('#slotDropdown').value),
    // form filed values collected above
    "formFields": formFieldValues
  };
 
  // booking checkout  
  wixBookings.checkoutBooking(bookingInfo)
    .then( (results) => {
      $w('#confirmationText').text = results.status;
    } );
    //---End of added in this step---//
}

 

 

결제가 수행되면 사용자에게 서비스의 지불 유형이 반영된 경험이 제공됩니다.

- 서비스가 무료인 경우 체크 아웃은 다른 입력없이 예약됩니다.

- 서비스가 무료가 아니고 지불이 온라인이어야 함을 나타내는 paymentOptions 객체를 전달하면 사용자가 신용카드 정보와 같은 지불 정보를 입력할 수 있는 지불 팝업이 표시됩니다.

- 서비스가 무료가 아니고 결제가 오프라인이어야함을 나타내는 paymentOptions 객체를 전달하면 결제 팝업이 사용자에게 표시되지 않습니다.

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-a-custom-bookings-experience