윅스 (Wix) 코딩 - 예약 앱 컬렉션 활용 아이디어 (Wix Code: Ideas for Working with Your Bookings App Collections)

윅스 (Wix) 코딩 - 예약 앱 컬렉션 활용 아이디어 (Wix Code: Ideas for Working with Your Bookings App Collections)

 

 

 

설명)

 

이 글에서는 윅스 코드(Wix Code)로 예약 사이트를 향상시킬 수 있는 방법에 대한 아이디어를 제시합니다.

 

이 글 전체에서 이 사이트를 참조하여 프로세스를 설명합니다. 그것은 다른 장소에서 투어를 제공하는 여행 사이트입니다. 그것은 각 위치에 모든 서비스뿐만 아니라 각 서비스에 대한 사용자 정의 예약 페이지를 나열하는 페이지를 갖추고 있습니다.

 

구체적으로 설명하면 다음과 같습니다.

- 우리가 만든 컬렉션과 윅스 예약 앱 서비스 컬렉션(Wix Bookings App Services Collection)과의 연결 방법.

- 컬렉션의 정보를 사용하여 서비스를 선보일 수 있도록 고안된 맞춤형 페이지와 예약(Bookings) 앱의 기존 페이지에 링크를 하는 방법.

- 고객으로부터 리뷰를 얻기 위해 작성한 양식 및 해당 리뷰를 페이지에 표시하는 방법.

 

 

이 글의 대부분에는 코드가 필요하지 않습니다. 방문자가 리뷰를 추가할 수 있는 리뷰 및 양식을 표시하는 페이지에는 여기 글에 포함된 간단한 코드가 필요합니다. 코드를 복사하여 페이지에 붙여넣은 다음 코드를 약간 조정하여 제대로 작동하게 할 수 있습니다.

 

 

새 컬렉션 (New Collections)

첫 번째 일은 사이트에 선보이고자 하는 정보를 저장하기 위한 새로운 컬렉션을 만드는 것이었습니다. 참조 입력란(필드)를 사용하여 새 컬렉션을 윅스 예약(Wix Bookings) 응용 프로그램에서 제공하는 Services 컬렉션에 연결했습니다. 이 글의 뒷부분에서 이러한 참조 입력란(필드)를 기반으로 데이터세트를 필터링한 방법을 볼 수 있으므로 페이지마다 매번 관련 정보만 표시됩니다.

 

 

Locations collection

이 컬렉션은 서비스가 이루어지는 위치를 저장합니다. 여기에는 이미지, 다양한 설명 및 동적 페이지 URL 입력란(필드)가 포함됩니다. 이 컬렉션을 사용하여 위치에 대한 동적 항목 페이지를 만듭니다.

 

 

 

 

 

Service_Locations collection

이 컬렉션은 Services 컬렉션을 가리키는 참조 입력란(필드)와 방금 만든 Locations 컬렉션을 가리키는 두 개의 참조 입력란(필드)를 사용하여 각 서비스를 해당 위치에 매핑합니다. 이 기사의 뒷부분에서 위치 동적 항목 페이지를 만들 때 이 컬렉션을 사용하여 각 위치에서 사용할 수 있는 서비스를 표시하는 방법을 확인할 수 있습니다.

 

 

 

 

 

Extra_Service_Info collection

이 컬렉션에는 픽업 포인트, 대상 고객, 시간 및 추가 이미지를 포함한 각 서비스에 대한 추가 정보가 포함되어 있습니다. 여기서 다시 우리는 참조 입력란(필드)를 사용하여 이 정보를 Services 컬렉션의 각 서비스에 연결했습니다. 이 글의 뒷부분에서 사용자 정의 예약 페이지를 만들 때 이 모음집을 사용할 것입니다.

 

 

 

 

 

Service_Reviews collection

이 컬렉션은 각 서비스에 대해 사용자가 남긴 리뷰를 저장합니다. 또한 이 컬렉션에는 서비스 컬렉션을 가리키는 참조 입력란(필드)와 검토가 제출 된 날짜, 검토 텍스트 및 검토자에 대한 정보를 저장하는 입력란(필드)가 있습니다.

 

방문자가 콘텐츠를 만들 수 있도록 이 컬렉션의 권한을 설정했습니다.

 

 

 

마스터/세부정보 페이지 (Master/Detail Pages)

데모 사이트에는 2개의 마스터/세부정보 페이지가 있으며 둘 다 동적 항목 페이지입니다. 두 페이지 모두 참조 입력란(필드)별로 필터링된 여러 데이터세트를 사용합니다. 자세한 내용은 이 글을 참조합니다.

 

- 첫 번째 페이지는 Locations 컬렉션에 연결되어 있으며 각 페이지에서 제공되는 위치 및 서비스에 대한 정보를 표시합니다.

- 두 번째 페이지는 Services 컬렉션에 연결된 사용자 정의 예약 양식입니다. 여기에는 각 서비스에 대한 추가 정보와 각 서비스에 대한 사용자 피드백이 나열됩니다.

 

 

 

서비스에 대한 세부정보가 있는 위치 페이지 (Locations Page with Details about the Services)

이 페이지를 보려면 데모 사이트의 홈페이지에서 "Portland Metro Area" 항목의 "Explore" 버튼을 클릭합니다. 현재보고있는 이 페이지는 Locationscollection에 연결된 동적 항목 페이지입니다. 포틀랜드 위치에 대한 정보를 표시하는 것 외에도 거기에서 제공되는 서비스를 나열하는 방법에 유의합니다. 이 페이지를 어떻게 설정하는지 보도록하겠습니다.

 

1. Locations 컬렉션에서 시작하여 우리는 텍스트 요소와 컬렉션의 입력란(필드)에 연결된 이미지를 사용하여 동적 항목 페이지를 만들고 디자인했습니다.

2. 페이지에 두 번째 데이터세트를 추가하고 Service_Locations 컬렉션에 연결한 다음 "Location" 참조 입력란(필드)로 필터링했습니다. 이로 인해 동적 페이지 (이 경우 포틀랜드 메트로 영역)의 현재 위치와 위치가 일치하는 항목만 데이터세트에 표시됩니다. 이 필터를 설정하는 방법에 대한 자세한 내용은 여기를 참조합니다.

3. 이 필터링된 데이터세트에 반복 레이아웃을 연결했습니다. Services_Locations 컬렉션의 참조 입력란(필드)는 Services 컬렉션을 가리키기 때문에 Services 컬렉션의 입력란(필드)에 요소를 연결할 수 있습니다. 페이지에 해당 컬렉션에 직접 연결된 데이터세트가 없더라도 사실입니다. 즉, 반복 레이아웃의 이미지, 서비스 이름 및 가격 정보는 예약 앱에 추가한 정보에서 직접 가져온 것입니다.

4. 반복 레이아웃의 "Book It" 버튼은 맞춤 예약 페이지로 연결됩니다.

 

 

이것은 페이지가 에디터에서 보이는 것과 같습니다. "Locations" 데이터세트에 연결된 요소는 빨간색으로 표시됩니다. 반복 레이아웃과 모든 요소는 필터링된 "Services_Locations" 데이터세트에 연결되며 파란색으로 표시됩니다.

 

 

 

 

피드백이 있는 사용자 정의 예약 페이지 (Customized Booking Page with Feedback)

Portland Metro Area 페이지에서 "Food Cart Tastings" 아래에 있는 "Book It"버튼을 클릭하면 해당 서비스의 맞춤 예약 페이지로 이동합니다. 이것은 또한 마스터/세부 동적 항목 페이지이지만 반전이 있습니다 : 2세트의 세부정보를 표시합니다.

- 첫 번째 세부 정보 세트는 페이지 상단에 표시되는 추가 정보입니다.

- 두 번째 상세 정보는 페이지 하단에 표시되는 리뷰입니다.

 

 

추가 서비스 정보 세부 정보 (Additional Service Information Details)

서비스 동적 항목 페이지의 맨 위에는 Extra_Service_Info 컬렉션에 저장한 정보가 표시됩니다. 이전 페이지와 거의 같은 방식으로 구축했습니다.

 

1. Wix App Services 컬렉션에서 시작하여 우리는 동적 항목 페이지를 만들고 디자인했습니다. "Book It" 버튼은 Services 컬렉션의 "Booking Flow Entry UR" 입력란(필드)에 연결됩니다. 즉, 방문자가 "Book It"를 클릭하면 정규 윅스 예약 앱(Wix Bookings App) 캘린더 페이지로 연결됩니다.

2. 페이지에 다른 데이터세트를 추가하고 이를 Extra_Service_Info 컬렉션에 연결했습니다. 우리는 "Service" 참조 입력란(필드)로 이 데이터세트를 필터링했습니다. 그런 다음 요소를 이 필터링된 데이터세트에 연결했습니다. "When", "For Who", "Pickup "아래의 요소는 페이지 하단의 이미지와 마찬가지로 Extra_Service_Info 컬렉션에 직접 연결됩니다.

 

 

 

 

리뷰 표시 섹션 (Review Display Section)

사용자 지정된 예약 페이지의 검토 섹션은 Service_Reviews 컬렉션에 연결됩니다. 이 서비스에 대한 리뷰와 리뷰를 얻을 수있는 양식이 표시됩니다. 페이지의 이 부분은 작동시키기 위해 약간의 코드가 필요합니다.

1. 세 번째 데이터세트를 페이지에 추가하고 Service_Reviews 컬렉션에 연결한 다음 "Service" 참조 입력란(필드)로 필터링했습니다. 동일한 컬렉션을 가리키는 2개의 데이터세트를 추가하게 될 것이므로 이 첫 번째 데이터세트를 "Display Reviews"로 변경하여 의미있는 데이터세트로 만들었습니다.

2. 받은 총 리뷰 수를 표시하기 위해 텍스트 요소를 페이지에 추가하고 다음 코드를 작성하여 총 개수를 계산한 다음 요소에 표시합니다.

 

$w("#displayReviews").onReady(() => {
    let count = $w("#displayReviews").getTotalCount(); 
    $w('#reviewsCount').text = (count + " Reviews")
});

 

 

 

사이트에서 이 코드를 사용하려면 이러한 대체 코드를 만들어야합니다.

- '#displayReviews': 데이터세트의 ID

- '#reviewsCount': 리뷰 수가 표시되는 텍스트 요소의 ID

 

 

3. 우리는이 데이터세트에 반복 레이아웃을 연결하고 텍스트 요소를 첨부하고 동일한 텍스트 세트에 연결하여 검토자의 텍스트와 검토자의 이름을 표시합니다.

4. 날짜의 형식화된 버전을 표시하기 위해 텍스트 요소를 반복 레이아웃에 첨부하고 다음 코드를 사용했습니다.

 

$w('#reviewRepeater').onItemReady(($item, itemData, index) => {
   $item('#dateDisplay').text = itemData.review_date.toLocaleDateString("en-US");
})

 

 

 

사이트에서 이 코드를 사용하려면 이러한 대체 코드를 만들어야합니다.

- '#reviewRepeater': 반복 레이아웃의 ID

- '#dateDisplay': 날짜를 표시하는 텍스트 요소의 ID

- review_date : 컬렉션에 있는 날짜 입력란(필드)의 입력란(필드) 키

 

 

 

5. "Book It"버튼은 윅스 예약 앱(Wix Bookings App) 캘린더 페이지로 연결됩니다. 연결 패널에서 "Booking Flow Entry URL"동적 페이지로 나타납니다.

 

 

 

리뷰 제출 양식 (Form for Submitting Reviews)

사용자 정의 예약 페이지 하단에는 방문자가 동적 항목 페이지에 표시되는 서비스에 대한 리뷰를 제출할 수 있는 양식이 있습니다. 이것이 만든 방법입니다.

 

1. 페이지에 4번째 데이터세트를 추가하고 이를 Service_Reviews 컬렉션에 연결하고 모드를 "쓰기 전용"으로 설정했습니다. 이전 섹션에서 추가 한 "Display reviews" 데이터세트와 구별하기 위해 "Get reviews"라고했습니다.

2. 3개의 입력 요소를 추가하고 이를 데이터세트의 해당 입력란(필드)에 연결했습니다. 제출 버튼을 추가하고 제출 후 이 페이지에 남아있도록 구성했습니다.

3. 오늘 날짜와 컬렉션에 저장된 데이터에서 검토중인 서비스를 포함하도록 다음 코드를 작성했습니다.

 

 

$w('#getReviews').onBeforeSave(() => {
    $w('#getReviews').setFieldValue('service', $w('#dynamicDataset').getCurrentItem()._id);
    $w('#getReviews').setFieldValue('review_date', new Date());
})

 

 

사이트에서 이 코드를 사용하려면 이러한 대체 코드를 만들어야합니다.

- '#getReviews': Services_Reviews 컬렉션에 연결된 데이터세트의 ID

- 'service': Services 컬렉션을 가리키는 참조 입력란(필드)의 입력란(필드) 키

- '#dynamicDataset': 동적 데이터세트의 ID

- 'review_date': Services_Reviews 컬렉션에 있는 날짜 입력란(필드)의 입력란(필드) 키

 

 

 

4. 다음 코드를 추가하여 새 항목을 컬렉션에 저장한 후 리뷰를 표시하는 데이터세트를 새로 고칩니다. 즉, 제출된 새 리뷰는 페이지에 표시됩니다.

 

$w('#getReviews').onAfterSave(() => {
    $w('displayReviews').refresh();
})

 

 

사이트에서 이 코드를 사용하려면 이러한 대체 코드를 만들어야합니다.

- '#getReviews': 데이터세트의 ID

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-ideas-for-working-with-your-bookings-app-collections