윅스 (Wix) 코딩 예제 - 평점 입력 및 표시하기 (Wix Code Tutorial: Capturing and Displaying Ratings)

윅스 (Wix) 코딩 예제 - 평점 입력 및 표시하기 (Wix Code Tutorial: Capturing and Displaying Ratings)

 

 

 

설명)

 

이 예제에서는 방문자의 항목 평점을 캡처하고 표시하는 방법을 보여줍니다. 평점 표시 요소를 설정하여 현재 평균 평점 및 총 평점 수를 표시합니다. 그런 다음 평점 입력 요소를 사용하여 방문자의 평점을 캡처하고 새로운 평균 평점 및 총 평점 수를 계산한 다음 컬렉션 및 평점 표시 요소를 새 값으로 업데이트합니다.

 

 

 

방문자 비율을 허용하려는 항목이 포함된 컬렉션과 해당 컬렉션에 연결된 데이터세트가 있는 페이지가 필요합니다.

 

이 예제는 3 부분으로 구성됩니다.

- 컬렉션 및 페이지 설정 방법

- 복사하여 페이지에 붙여넣을 수 있는 코드

- 코드에 대한 자세한 설명

 

 

 

설정하기 (Setting Up)

이 섹션에서는 컬렉션에서 준비해야할 항목과 에디터에서 페이지에서 수행해야할 작업에 대해 설명합니다.

 

 

컬렉션 (In your collection)

1. 컬렉션의 권한이 사용자 입력을 허용하는지 확인합니다.

2. 평균 평점, 제출된 평점 수 및 제출된 모든 평점의 합계에 대해 3개의 새 숫자 입력란(필드)를 추가합니다.. 이 입력란(필드)를 비워두거나 시작 값을 입력할 수 있습니다. 평균 평점은 1에서 5사이 여야합니다. 

 

 

페이지 (In your page)

1. 데이터세트의 모드를 "읽기 및 쓰기"로 설정합니다. 이렇게하면 방문자가 컬렉션의 정보를 업데이트할 수 있습니다.

2. 다음 요소를 추가합니다.

a. 평점 표시 요소는 컬렉션의 새 숫자 입력란(필드)에 연결됩니다.

b.. 방문자가 항목에 대한 평점을 선택할 때 사용할 수 있는 평점 입력 요소. 평점에 대한 기본 설정을 사용하거나 자신을 정의할 수 있습니다. 데이터세트에 연결하지 않습니다.

 

 

 

 

 

코드 (Code)

이 섹션에는 2개의 파트가 있습니다. 첫 번째 부분에서는 평점 입력 요소에 이벤트 핸들러를 추가하는 방법을 보여줍니다. 두 번째 부분에는 페이지에 복사하여 붙여넣을 수 있는 실제 코드가 있습니다.

 

이벤트 핸들러 추가하기 (Adding the event handler)

이벤트 핸들러는 방문자가 특정 작업을 수행할 때만 실행되는 코드를 추가합니다. 코드에서는 "onChange" 이벤트를 사용하여 방문자가 평점 입력에서 선택을 하면 평점이 저장됩니다.

 

이벤트 핸들러를 추가하려면 (To add the event handler) :

1. 평점 입력을 선택합니다.

2. 속성 패널에서 "onChange"위로 마우스를 이동하고 + 아이콘을 클릭한 다음 앤터(Enter) 키를 누릅니다.

 

 

이벤트 핸들러의 코드는 [코드] 패널의 아래쪽에 추가됩니다. 아래 이미지는 페이지에서 어떻게 보였는지 보여줍니다.

 

 

 

 

코드 추가하기 (Adding the code)

1. 아래 코드를 복사하여 "//Add your code for this event here:"라는 줄 위에 이벤트 핸들러 함수에 붙여 넣습니다. 원하는 경우 해당 행을 삭제할 수 있습니다.

 

$w("#dataset1").onReady(() => {
  // get the current item from the dataset
  const currentItem = $w("#dataset1").getCurrentItem();

  // get the current average rating, number of ratings, and
  //total ratings for the current dataset item
  const average = currentItem.avg;
  const count = currentItem.numRatings;
  const total = currentItem.totalRatings;

  // get the new rating from the ratings input
  const newRating = $w('#ratingsInput1').value;

  // calculate the new average rating based on the current
  //average and count
  const newAverageLong = (total + newRating) / (count +1);
  // Round the average rating to 1 decimal point
  const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);

  // set the dataset fields to the new average, total
  // ratings, and number of ratings
  $w('#dataset1').setFieldValues({
   'avg': newAverageShort,
   'totalRatings': total + newRating,
   'numRatings': (count + 1)
  });
  
  // save the dataset fields to the collection
  $w('#dataset1').save()
   .catch((err) => {
    console.log('could not save new rating');
   });
 });

 

 

2. 다음의 것들을 바꿉니다.

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

- avg : 평균 평점을 유지하는 컬렉션 입력란(필드)의 입력란(필드) 키

- numRatings : 수집된 총 평점 수를 포함하는 입력란(필드)의 입력란(필드) 키

- totalRatings : 수집된 모든 평점의 합계를 저장하는 입력란(필드)의 입력란(필드) 키

- '#ratingsInput1': 드롭다운 요소의 ID

 

3. 페이지를 미리보고 평점 입력 요소를 테스트합니다. 평점을 추가할 때 평점에 요소 업데이트가 표시되는 방법을 확인합니다.

4. 데이터 관리자로 돌아가 해당 항목의 평균 평점 및 총 평점 수가 컬렉션에서 어떻게 업데이트되었는지 확인합니다.

 

 

 

코드 이해하기 (Understanding the Code)

먼저 데이터세트에서 현재 항목을 읽습니다. 그런 다음 average, count, total이라는 변수를 정의하고 해당 값을 항목의 현재 평균 평점, 평점 수 및 모든 평점의 합계로 설정합니다.

 

const currentItem = $w("#myDataset").getCurrentItem();
const average = currentItem.averageRating;
const count = currentItem.numRatings;

 

 

newRating이라는 변수를 정의하고 그 값을 평점 입력에서 사용자가 선택한 평점으로 설정합니다.

 

const newRating = Number($w('#ratingsInput1').value);

 

 

그런 다음 업데이트된 평균 평점을 계산하여 newAverageLong이라는 변수에 저장합니다. 그런 다음 소수점 이하 1 자리로 결과를 반올림한 다음 newAvergeShort 변수에 할당합니다.

 

const newAverageLong = (total + newRating) / (count + 1);
const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);

 

 

 

이제 새로운 평균 평점, 모든 평점의 합계 및 총 평점 수를 현재 항목에 저장합니다. 오류가 발생하면 이를 처리하기 위한 코드가 포함됩니다.

 

  $w('#dataset1').setFieldValues({
   'avg': newAverageShort,
   'totalRatings': total + newRating,
   'numRatings': (count + 1)
  });
  $w('#dataset1').save()
   .catch((err) => {
    console.log('could not save new rating');
   });
 });
}

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-capturing-and-displaying-ratings