윅스 (Wix) 코딩 - Wix 스토어(Stores)/쇼핑몰 평점과 리뷰 기능 추가하기 (Wix Code: Adding Ratings and Reviews to a Wix Stores Site)
설명)
이 글에서는 윅스 코드(Wix Code)를 사용하여 평점 및 리뷰를 Wix Stores 사이트에 추가하는 방법에 대해 설명합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.
개요 (Overview)
사이트에서 다음을 추가했습니다. (In our site we added the following) :
- 리뷰 제출을 위해 사용자 입력 요소가 있는 리뷰 상자 라이트박스.
- 개별 제품 리뷰를 표시하는 제품 페이지의 반복 레이아웃.
- 평균 평점 결과와 제품을 추천하는 회원의 비율을 표시하는 제품 페이지의 요소 그룹.
- 리뷰 정보를 저장하는 리뷰 모음집.
- 리뷰 - 각 제품에 대한 평점 통계를 저장하는 통계 수집.
그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :
- 제품 페이지가 로드되면 제품 설명 아래에 현재 통계를 표시하고 반복 레이아웃에 리뷰를 표시합니다.
- 리뷰어가 "Write a Review" 버튼을 클릭하면 리뷰 박스 라이트박스를 엽니다.
- 리뷰어가 리뷰 상자 라이트박스에 리뷰를 게시하면 새 리뷰 데이터를 reviews 컬렉션에 저장하고 리뷰 - 통계(review-stats) 컬렉션에서 통계를 업데이트하고 라이트박스를 닫은 다음 제품 페이지에서 리뷰와 통계를 새로 고칩니다.
1단계 : 사이트 설정 (Step 1: Set up the Site)
이 기능을 재현하려면 일부 제품을 사용하여 Wix Stores를 사이트에 추가해야합니다. 스토어를 사이트에 추가하면 사이트에 페이지와 컬렉션이 자동으로 추가됩니다.
노트 :
데이터베이스에 Stores 컬렉션을 보려면 사이트를 저장 또는 게시하고 브라우저를 새로 고쳐야 할 수 있습니다.
다음은 사이트의 일부 데이터입니다.
Products, Collections 컬렉션은 Wix Stores가 있는 사이트가 있으면 자동으로 만들어집니다. 이러한 컬렉션은 읽기 전용이므로 상점 관리자를 사용하여 제품 목록을 작성해야합니다. 이 예제에서는 샘플 사이트의 저장소에 있지만 Collections 컬렉션과 함께 작업하지 않습니다.
또한 리뷰 박스 라이트박스를 사이트에 추가하고 리뷰 - 통계(review-stats) 및 리뷰(reviews) 컬렉션을 데이터베이스에 추가했습니다. 이 글 뒷부분의 리뷰 상자 라이트박스 설정에 대해 설명하겠습니다.
리뷰 - 통계(review-stats) 컬렉션에는 다음과 같은 입력란(필드)가 있습니다.
- 평점(rating) : 제품이 받은 모든 평점의 합계
- 개수(count) : 제품이 평가된 횟수
- 추천(recommended) : 제품 추천 횟수
- ID : 제품 ID (기본적으로 숨김)
리뷰 - 통계(review-stats) 컬렉션에 저장된 통계를 사용하여 리뷰 수, 평균 평점 및 각 제품의 추천 비율을 계산합니다.
리뷰(reviews) 컬렉션에는 리뷰 상자 라이트박스를 통해 입력된 리뷰 정보와 Products 컬렉션의 항목을 참조하는 입력란(필드)가 저장되는 입력란(필드)가 있습니다.
리뷰 컬렉션에 저장된 데이터를 사용하여 제품 페이지에 각 리뷰를 표시하고 리뷰 - 통계(review-stats) 컬렉션에 저장된 각 제품의 통계를 계산합니다.
2단계 : Shop Product 페이지 설정 (Step 2: Set up the Shop Product Page)
Shop Product 페이지에서 다음을 추가했습니다.
• 평균 평점 결과를 표시하는 요소 그룹 :
a. 이 제품의 평점 수 및 평균 평점을 보여주는 평점 표시
b. 제품을 추천한 리뷰어의 백분율을 표시하는 텍스트
c. 감사 메시지는 리뷰가 추가된 후에 표시됩니다.
• 리뷰 상자 라이트박스에 리뷰 양식을 열 수 있는 "Write a Review" 버튼
또한 다음을 추가합니다.
- Reviews 컬렉션에 저장된 리뷰 상세 정보를 표시하기위한 Reviews 데이터세트.
- 리뷰를 표시하는 반복 레이아웃. 각 리뷰에는 다음 내용이 포함됩니다.
a. 리뷰어 이름, 위치, 리뷰 제목 및 리뷰 텍스트의 텍스트 요소
b. 선택적 리뷰 이미지
c. 개별 리뷰어의 평가를 보여주는 평점 표시
d. 리뷰어가 제품을 권장하는지 여부를 나타내는 텍스트
e. 리뷰 제출 날짜 및 시간이 포함된 텍스트
- 추가 리뷰 로드를 위해 페이지 하단에 "load more" 텍스트
제품 페이지에는 두 가지 유형의 평점이 표시됩니다.
- 제품의 평균 평점과 제품을 추천한 리뷰어의 전체 비율. 이것은 제품 설명 아래에 표시됩니다.
- 각 리뷰어의 평가 및 각 리뷰에 표시된 제품의 추천 여부.
3단계 : 리뷰 상자 라이트박스 설정 (Step 3: Set Up the Review Box Lightbox)
리뷰 상자 라이트박스에 다음을 추가합니다.
- SubmitReviews 데이터세트는 리뷰어가 입력한 데이터를 리뷰 컬렉션에 연결합니다.
- 모든 입력 요소를 보관할 수 있는 컨테이너 상자.
- 제품을 평점을 매기고 추천하기위한 두 세트의 라디오 버튼.
- 리뷰어의 식별 정보 및 제품 리뷰를 수집하기위한 입력 요소.
- 선택 리뷰 이미지를 업로드하기위한 "Choose File"업로드 버튼.
- 리뷰를 제출하기위한 "Post Review" 버튼. 데이터가 리뷰(reviews) 및 리뷰 - 통계(review-stats) 컬렉션으로 전송됩니다.
4단계 : Product 페이지 준비 (Step 4: Prepare the Product Page)
Product 페이지에서 코드에서 데이터 컬렉션 및 라이트박스로 작업해야하는 모듈을 가져오기 시작합니다. 그런 다음 현재 제품을 나타내는 전역 변수를 정의합니다. 마지막으로 initReviews 함수를 실행하여 현재 제품의 평점 및 리뷰를 페이지에 로드합니다.
노트 :
이 예제에서는 async/await 자바스크립트(JavaScript) 기능을 사용합니다.
import wixData from 'wix-data';
import wixWindow from 'wix-window';
let product;
$w.onReady(async function () {
product = await $w('#productPage1').getProduct();
initReviews();
});
코드 이해하기 (Understanding the Code)
1-2행 : Wix Data 및 Wix Window 라이브러리로 작업하기 위해 필요한 모듈을 가져옵니다.
5행 : 전역 제품 변수를 정의합니다.
7행 : 페이지가 로드되면 다음을 수행합니다.
8행 : 현재 제품 페이지에서 getProduct 함수를 사용하여 제품 변수를 현재 표시된 제품으로 설정합니다.
9행 : initReviews 함수를 실행하여 현재 제품의 평점 및 리뷰를 로드합니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #productPage1
5단계 : Product 페이지에서 initReviews 함수 만들기 (Step 5: Create the initReviews Function on the Product Page)
initReviews 함수는 Review 데이터세트를 필터링하여 현재 표시된 제품의 리뷰만 포함하고 제품 리뷰 및 통계를 표시합니다.
노트 :
데이터세트를 필터링하는 두 가지 방법이 있습니다 : 코드 사용 (이 예제와 같이) 또는 데이터세트의 데이터세트 설정 막대를 사용합니다.
async function initReviews() {
await $w('#Reviews').setFilter(wixData.filter().eq('productId', product._id));
showReviews();
loadStatistics();
}
코드 이해하기 (Understanding the Code)
2행 : setFilter에 eq 함수를 연결하여 제품 ID가 현재 표시된 제품의 ID와 일치하지 않는 리뷰 데이터세트의 모든 항목을 필터링합니다.
3행 : 모든 필터링된 리뷰를 표시하려면 showReviews 함수를 실행합니다.
4행 : loadStatistics 함수를 실행하여 현재 제품의 통계를 로드하고 표시합니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #Reviews
- productId
6단계 : Product 페이지에서 loadStatistics 함수 만들기 (Step 6: Create the loadStatistics Function on the Product Page)
loadStatistics 함수는 현재 제품에 대한 통계를 가져와 표시합니다.
async function loadStatistics() {
const stats = await wixData.get('review-stats', product._id);
if (stats) {
let avgRating = (Math.round(stats.rating * 10 / stats.count) / 10);
let percentRecommended = Math.round(stats.recommended / stats.count * 100);
let ratings = $w('#generalRatings');
ratings.rating = avgRating;
ratings.numRatings = stats.count;
$w('#recoPercent').text = `${percentRecommended} % would recommend`;
$w('#generalRatings').show();
} else {
$w('#recoPercent').text = 'There are no reviews yet';
}
$w('#recoPercent').show();
}
코드 이해하기 (Understanding the Code)
2행 : 현재 제품의 ID를 사용하여 review-statscollection에서 제품 통계를 가져 와서 stats 변수에 할당합니다.
3행 : 현재 제품과 관련된 통계가 있는지 확인하여 하나 이상의 사용자가 제품을 평가했음을 나타냅니다. 통계가 있는 경우 다음을 수행합니다.
4행 : 제품이 평가된 횟수로 모든 리뷰어로부터 받은 모든 평점의 합계를 10으로 곱하고 반올림하여 제품의 평균 평점을 계산합니다.
5행 : 제품이 받은 추천 수의 총 수를 제품의 평가 횟수로 나눈 다음 100을 곱하여 수를 반올림하여 제품을 추천한 사람들의 비율을 계산합니다.
6행 : generalRatings ratings 요소를 가져 와서 rating 변수에 할당합니다.
7행 : 평점 요소의 평점 값을 위에 계산된 평균 평점으로 설정합니다.
8행 : 현재 제품에 대한 리뷰 - 통계 (review-stats) 컬렉션의 count 입력란(필드)에서 평점 요소의 총 평가 수를 설정합니다.
9행 : 추천 비율을 표시하는 텍스트를 설정합니다.
10행 : 평점 요소 표시.
11-14행 : 통계가 없으면 (리뷰 작성자가 아직 제품을 평가하지 못했음을 나타냄) 리뷰가 없다는 텍스트를 표시합니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야 할 수 있습니다.
- review-stats
- #generalRatings
- #recoPercent
7단계 : Product 페이지에서 reviewsRepeater_itemReady 함수 만들기 (Step 7: Create the reviewsRepeater_itemReady Function on the Product Page)
reviewsRepeater 요소를 선택하고 속성 패널에 onItemReady 이벤트 핸들러를 추가했습니다.
5단계에서 initReviews 함수는 Review 데이터세트를 필터링하여 현재 표시된 제품의 리뷰만 포함합니다. 컬렉션의 각 필터링된 항목 (행)은 itemsRepeater_itemReady 이벤트 핸들러에 itemData 매개 변수로 전달됩니다.
페이지가 로드되고 필터링된 데이터세트가 반복 레이아웃에 연결되면 reviewsRepeater_itemReady는 컬렉션의 데이터를 반복 레이아웃의 각 요소에 로드합니다.
export function reviewsRepeater_itemReady($w, itemData, index) {
if (itemData.recommends) {
$w('#recommendation').text = 'I recommend this product.';
} else {
$w('#recommendation').text = "I don't recommend this product.";
}
if (itemData.photo) {
$w('#reviewImage').src = itemData.photo;
$w('#reviewImage').expand();
}
$w('#oneRating').rating = itemData.rating;
let date = itemData._createdDate;
$w('#submissionTime').text = date.toLocaleString();
}
코드 이해하기 (Understanding the Code)
2행 : 리뷰어가 현재 항목의 리뷰 컬렉션에 있는 부울 추천 사항 입력란(필드)를 사용하여 제품을 추천했는지 확인합니다.
3-4행 : 리뷰어가 제품을 추천했는지 또는 추천하지 않았는지 여부를 나타내는 텍스트를 표시합니다.
7-9행 : 리뷰어가 사진을 업로드한 경우 항목 사진에서 이미지 URL을 설정하고 이미지를 확대합니다.
11행 : oneRating 평점 표시에서 리뷰의 평점 값을 현재 항목의 평점으로 설정합니다.
12행 : 리뷰가 제출된 날짜를 가져와서 날짜 변수에 지정합니다.
13행 : toLocalString 함수를 사용하여 방문자 컴퓨터의 날짜 형식 설정에 따라 날짜 텍스트의 서식을 지정합니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #recommendation
- #reviewImage
- #oneRating
- #submissionTime
8단계 : Product 페이지에서 showReviews 함수 만들기 (Step 8: Create the showReviews Function on the Product Page)
showReviews는 리뷰가 제출되었는지 여부에 따라 리뷰를 표시하는 리뷰 스트립을 확대하거나 축소합니다.
export function showReviews() {
if ($w('#Reviews').getTotalCount() > 0) {
$w('#reviewsStrip').expand();
} else {
$w('#reviewsStrip').collapse();
}
}
코드 이해하기 (Understanding the Code)
2행 : getTotalCount 함수를 사용하여 현재 제품의 Reviewsdataset에 리뷰가 있는지 여부를 확인합니다.
3-5행 : 리뷰가 있는 경우 리뷰 스트립을 확대합니다. 리뷰가 없으면 리뷰 스트립을 접습니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #Reviews
- #reviewsStrip
9단계 : Product 페이지에서 addReview_click 함수 만들기 (Step 9: Create the addReview_click Function on the Product Page)
리뷰 작성자가 "Write a Review"버튼을 클릭하면 addReview_click이 실행됩니다. 'Write a Review'버튼을 선택하고 속성 패널에 onClick 이벤트 핸들러를 추가했습니다.
이 함수는 리뷰 상자 라이트박스를 열고 현재 제품의 ID를 보내고 라이트박스가 닫힐 때까지 대기합니다.
라이트박스가 닫히면 이 함수는 리뷰 데이터세트를 새로 고침하여 새 리뷰가 페이지에 나타나고 제품 통계를 새로 고침하여 새 평점을 반영하고 감사 메시지를 표시합니다.
export async function addReview_click(event, $w) {
const dataForLightbox = {
productId: product._id
};
let result = await wixWindow.openLightbox('Review Box', dataForLightbox);
$w('#Reviews').refresh();
loadStatistics();
$w('#thankYouMessage').show();
}
코드 이해하기 (Understanding the Code)
2-3행 : 리뷰 상자 라이트박스로 보내지는 현재 제품의 ID를 포함하는 dataForLightbox 객체를 만듭니다.
5행 : 리뷰 박스 라이트박스를 열고 위에 생성된 제품 ID 객체를 보내고 닫을 때까지 기다립니다.
6행 : 리뷰 라이트박스가 닫히면 리뷰 데이터세트를 새로 고침하여 새 리뷰가 페이지에 표시됩니다.
7행 : 새로운 평점을 반영하도록 현재 제품 통계를 다시 로드합니다.
8행 : 감사의 메시지를 보여줍니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #Reviews
- #thankYouMessage
10단계 : Product 페이지에서 resultsPages_click 함수 만들기 (Step 10: Create the resultsPages_click Function on the Product Page)
resultsPages_click은 리뷰 작성자가 제품 페이지 하단의 "load more" 텍스트를 클릭할 때 실행됩니다. "load more" 텍스트를 선택하고 속성 패널에서 onClickevent 핸들러를 추가했습니다.
방문자가 텍스트를 클릭하면 resultsPages_click 이벤트 핸들러가 리뷰의 다른 페이지 (청크)를 reviewsRepeater에 로드합니다.
노트 :
반복 레이아웃의 각 페이지 (청크)에 표시되는 리뷰의 수는 Review 데이터세트에 정의됩니다. 데이터세트를 클릭하고 데이터세트 관리를 클릭한 다음 표시할 항목 수를 입력합니다.
export function resultsPages_click(event, $w) {
$w('#Reviews').loadMore();
}
코드 이해하기 (Understanding the Code)
1-2행 : 이벤트 핸들러가 트리거되면 Review 데이터세트는 loadMore 함수를 사용하여 리뷰의 다음 페이지 (청크)를 로드합니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #Reviews
11단계 : 리뷰 상자 라이트박스 준비 (Step 11: Prepare the Review Box Lightbox)
리뷰 박스 라이트박스에서 우리는 코드에서 데이터 컬렉션 및 라이트박스로 작업해야하는 모듈을 가져오기 시작했습니다. 그런 다음 현재 제품 ID를 저장할 변수를 선언합니다.
라이트박스의 로드가 완료되면 openLightbox 함수를 통해 9단계에서 라이트박스로 전달된 현재 제품 ID를 얻습니다.
리뷰어가 리뷰를 완료하고 "Post Review"버튼을 클릭하면 새 리뷰 데이터가 SubmitReview 데이터세트로 전송됩니다. 새 리뷰가 Review 컬렉션에 저장되기 전에 onBeforeSave 이벤트 핸들러를 사용하여 리뷰어가 제품을 평가했는지 여부를 확인합니다. 사용자가 제품을 평가하지 않으면 오류 메시지가 표시되고 리뷰는 저장되지 않습니다.
새 리뷰가 Review 컬렉션에 저장되면 onAfterSave 이벤트 핸들러를 사용하여 현재 제품에 대한 통계를 업데이트하고 라이트박스를 닫습니다.
먼저 라이트박스 페이지의 코드에 다음을 추가합니다.
import wixWindow from 'wix-window';
import wixData from 'wix-data';
let productId;
코드 이해하기 (Understanding the Code)
1-2행 : Wix Data 및 Wix Window 라이브러리로 작업하기 위해 필요한 모듈을 가져옵니다.
4행 : 제품 ID를 저장할 전역 변수를 선언합니다..
그런 다음 onReady 함수에 다음 코드를 추가합니다.
$w.onReady(function () {
productId = wixWindow.lightbox.getContext().productId;
$w('#SubmitReviews').onBeforeSave(() => {
if ($w('#radioRating').value === '') {
$w('#rateError').show();
return Promise.reject();
}
$w('#SubmitReviews').setFieldValues({
productId,
rating: $w('#radioRating').value,
recommends: $w('#radioGroup1').value
});
});
코드 이해하기 (Understanding the Code)
3행 : 페이지가 로드되면 getContext 함수를 사용하여 라이트박스가 열릴 때 전달되는 객체를 가져옵니다. 이 경우 객체는 현재 제품 ID를 포함합니다.
5행 : 새 리뷰가 SubmitReviews 데이터세트를 통해 Review 컬렉션에 저장되기 전에 발생하는 액션을 설정합니다.
6행 : 리뷰어가 제품을 평가했는지 확인합니다.
7-8행 : 리뷰어가 제품을 평가하지 않은 경우 rateError 오류 메시지를 표시하고 새 리뷰를 저장하지 않습니다.
11행 : 리뷰어가 제품을 평가한 경우 setFieldValues 함수를 사용하여 SubmitReviews 데이터세트를 업데이트합니다.
12-14행 : 데이터세트 항목을 입력 요소 값으로 업데이트합니다.. 그런 다음 항목이 Review 컬렉션에 저장됩니다.
마지막으로 onReady 함수에 다음 코드를 추가합니다.
$w('#SubmitReviews').onAfterSave(async () => {
await updateStatistics($w('#radioGroup1').value);
wixWindow.lightbox.close();
});
});
코드 이해하기 (Understanding the Code)
1행 : 새 리뷰가 SubmitReviews 데이터세트를 통해 Review 컬렉션에 저장된 후에 발생하는 액션을 설정합니다.
2행 : updateStatistics 함수를 사용하여 제품 통계를 업데이트합니다. radioGroup1 라디오 버튼에 저장된 리뷰어의 권장 사항 (또는 권장 사항)은 함수에 대한 매개 변수로 전송됩니다.
3행 : 통계가 업데이트된 후 라이트박스를 닫아 리뷰어를 상품 페이지로 되돌립니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- productID
- #SubmitReviews
- #radioRating
- #rateError
- #radioGroup1
12단계 : 리뷰 상자 라이트박스에 updateStatistics 함수 만들기 (Step 12: Create the updateStatistics Function in the Review Box Lightbox)
이 함수는 리뷰 - 통계 (review-stats) 컬렉션에 저장된 통계를 업데이트하여 현재 리뷰의 데이터를 포함합니다. 현재 제품에 대한 이전 통계가 없으면 새 통계 항목을 작성합니다.
async function updateStatistics(isRecommended) {
let stats = await wixData.get('review-stats', productId);
if (stats) {
stats.rating += parseInt($w('#radioRating').value, 10);
stats.count += 1;
stats.recommended += (isRecommended === "true") ? 1 : 0;
return wixData.update('review-stats', stats)
}
stats = {
_id: productId,
rating: parseInt($w('#radioRating').value, 10),
count: 1,
recommended: (isRecommended === "true") ? 1 : 0
};
return wixData.insert('review-stats', stats)
}
코드 이해하기 (Understanding the Code)
2행 : 리뷰 - 통계 (review-stats) 컬렉션에서 현재 제품의 리뷰 통계를 가져옵니다.
4행 :이 제품에 대한 통계 데이터가 이미 있는 경우 다음을 수행합니다.
5행 : 사용자가 선택한 라디오 버튼 평점의 값을 나타내는 문자열을 추출합니다. parseInt 함수를 사용하여 문자열을 정수로 변환합니다. 전체 평점 포인트에 정수를 추가합니다.
6행 : 평점 수를 1 늘립니다.
7행 : 리뷰어가 제품을 추천했는지 확인합니다. Review 컬렉션의 isRecommended 입력 매개 변수가 true 인 경우 권장 계수를 1만큼 증가시킵니다.
8행 : 리뷰 - 통계 (review-stats) 컬렉션에서 제품 통계를 업데이트합니다.
11행 : 이 제품에 대한 이전 통계 데이터가 없는 경우 새 통계 항목을 작성합니다.
12행 : 통계 항목의 ID를 현재 제품의 ID로 설정합니다.
13행 : 사용자가 선택한 라디오 버튼 평점의 값을 나타내는 문자열을 추출합니다. parseInt 함수를 사용하여 문자열을 정수로 변환합니다. 통계 항목의 평점을 정수로 설정합니다.
14행 : 통계 항목의 평점 수를 1로 설정하여 첫 번째 평점이기 때문에 통계 항목의 평점 수를 1로 설정합니다.
15행 : 리뷰어가 제품을 추천했는지 확인합니다. 그럴 경우 추천 횟수를 1로 설정합니다.
17행 : 새로운 제품의 통계를 리뷰 - 통계 (review-stats) 컬렉션에 삽입합니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- review-stats
- #radioRating
13단계 : 리뷰 상자 라이트박스에 radioRating_change 함수 만들기 (Step 13: Create the radioRating_change Function in the Review Box Lightbox)
리뷰어가 평점을 선택하면 radioRating_change가 실행됩니다. "Overall Rating"아래에 radioRatingradio 버튼 요소를 선택하고 속성 패널에 onChangeevent 핸들러를 추가했습니다.
방문자가 평점을 선택하면 방문자가 제품을 평가하지 않을 때 표시되는 오류 메시지가 radioRating_change 이벤트 핸들러에서 숨겨집니다.
export function radioRating_change(event, $w) {
$w('#rateError').hide();
}
코드 이해하기 (Understanding the Code)
1-2행 : 방문자가 평점을 선택할 때 "Please rate this product"라는 오류 메시지를 숨깁니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #rateError
다음 단계 (Next Steps)
- 템플릿에서 작업하려면 에디터에서 이 예제를 엽니다.
- 저장소 컬렉션이 데이터베이스에 나타나도록 사이트를 게시하고 브라우저를 새로 고칩니다.
- 다른 윅스 코드(Wix Code) Store 예제를 사용해봅니다 :
c. 윅스 (Wix) 코딩 - Wix 스토어(Stores)/쇼핑몰 선물 퀴즈 기능 추가하기 (Wix Code: Adding a Gift Quiz to a Wix Stores Site)
연관된 토픽)
윅스 홈페이지 만들기 101
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index
윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index 윅스 (Wix.com) 윅스 ADI & 템플릿 (Wix ADI & 템플릿) 윅스 웹에디터 (Wix Editor) 윅스 코딩 (Wix Code - Corvid) 윅스 해커톤 (Wix Hackathon)
limejuicer.tistory.com
출처 :
https://support.wix.com/en/article/wix-code-adding-ratings-and-reviews-to-a-wix-stores-site
댓글