윅스 (Wix) 코딩 - Wix 스토어(Stores)/쇼핑몰 선물 퀴즈 기능 추가하기 (Wix Code: Adding a Gift Quiz to a Wix Stores Site)
설명)
이 글에서는 윅스 코드(Wix Code)를 사용하여 Wix Stores 사이트에 선물 퀴즈를 추가하는 방법에 대해 설명합니다. 방문객은 구매하려는 선물을받는 사람에 대한 정보를 제공하고 사이트는 답변을 기반으로 권장 사항을 제공합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.
개요 (Overview)
사이트에서 다음을 추가했습니다 (In our site we added the following) :
- 슬라이드쇼가 포함된 선물 퀴즈 페이지. 각 슬라이드에는 질문과 버튼이 포함되어 있습니다. 마지막 슬라이드에는 권장 제품을 표시하는 반복 레이아웃이 있습니다. 반복되는 각 항목에는 추천된 선물의 이미지, 이름 및 가격을 표시하는 요소가 있습니다.
- 두 개의 입력란(필드)가 있는 productsKeywords 컬렉션 :
a. keywords : 제품과 관련된 키워드 목록
b. product : Products 컬렉션의 항목을 가리키는 참조 입력란(필드)
그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :
- 각 질문에 사용자의 대답을 저장 한 후 다음 슬라이드로 이동합니다.
- 사용자가 마지막 슬라이드에 도달하면 각 제품과 관련된 productKeywords 컬렉션의 키워드를 사용자의 대답과 비교하여 제품 목록을 필터링합니다.
- 일치하는 제품을 임의로 선택하여 제품 데이터로 반복 레이아웃을 채웁니다.
1단계 : 사이트 설정 (Step 1: Set Up the Site)
이 기능을 재현하려면 일부 제품을 사용하여 Wix Stores를 사이트에 추가해야합니다. 스토어를 사이트에 추가하면 사이트에 페이지와 컬렉션이 자동으로 추가됩니다.
노트 :
데이터베이스에 상점 컬렉션을 보려면 사이트를 저장 또는 게시하고 브라우저를 새로 고쳐야 할 수 있습니다.
다음은 사이트의 일부 데이터입니다.
Products, Collections 컬렉션은 Wix Stores가 있는 사이트가 있을 때 자동으로 만들어집니다. 이러한 컬렉션은 읽기 전용이므로 상점 관리자를 사용하여 제품 목록을 작성해야합니다. 이 예제에서는 샘플 사이트의 저장소에 있지만 Collections 컬렉션과 함께 작업하지 않습니다.
또한 사이트에 Gift Quiz 페이지를 추가하고 데이터베이스에 productsKeywords 컬렉션을 추가했습니다. 이 글 뒷부분의 Gift Quiz 페이지 설정에 대해 설명하겠습니다.
productsKeywords 컬렉션에는 두 개의 입력란(필드)가 있습니다.
- keywords : 제품과 관련된 키워드 목록
- product : Products 컬렉션의 항목을 가리키는 참조 입력란(필드)
예제에서 우리는 키워드를 메인 입력란(필드)로 만들고 컬렉션에서 Title 입력란(필드)를 삭제했습니다.
2단계 : Gift Quiz 페이지 설정 (Step 2: Set Up the Gift Quiz Page)
Gift Quiz 페이지에서 슬라이드쇼를 추가했습니다. 각 슬라이드에는 퀴즈 질문과 각 대답에 대한 버튼이 있습니다. 질문에 답변하면 다음 슬라이드가 표시되도록 슬라이드쇼가 설정됩니다.
버튼 ID는 productsKeywords 컬렉션에 나열된 키워드와 동일합니다. 이렇게하면 사용자의 답변을 각 제품과 관련된 키워드와 쉽게 비교할 수 있습니다. 답변이 제품 키워드와 일치하면 제품이 권장 제품 목록에 추가됩니다.
슬라이드쇼의 마지막 슬라이드에는 반복 레이아웃에 권장되는 선물이 표시됩니다. 반복되는 각 항목에는 추천된 선물의 이미지, 이름 및 가격을 표시하는 요소가 있습니다.
라이브 사이트에서 마지막 슬라이드 모습은 다음과 같습니다.
3단계 : 퀴즈 질문에 대한 답변 수집 및 저장 (Step 3: Collect and Store Answers to Quiz Questions)
Gift Quiz 페이지에서 wix-data 모듈을 가져와서 시작합니다. 코드에서 컬렉션으로 작업해야합니다. 이 코드는 페이지 상단에 있어야합니다. 그런 다음 코드 전체에서 사용할 전역 변수를 선언합니다.
노트 :
이 예의 모든 코드는 Gift Quiz 페이지에 있습니다.
import wixData from 'wix-data';
const selectedAnswers = [];
const quizAnswersIds = ["bestie", "girlfriend", "myself",
"surpriseMe", "accessories", "clothing", "beauty",
"surpriseMe2", "gold", "red", "lavender"
];
let numberOfSlides;
코드 이해하기 (Understanding the Code)
1행 : Wix 데이터 라이브러리로 작업할 모듈을 가져옵니다.
3-8행 : 다음 변수를 정의합니다..
- selectedAnswers : 사용자의 답변을 저장하는 배열
- quizAnswersIDs : 가능한 모든 대답의 ID를 나열하는 배열
- numberOfSlides : 퀴즈의 슬라이드 수와 결과를 표시하는 슬라이드 수
이제 퀴즈 질문에 사용자의 답변을 수집하고 저장하는 코드를 추가해 보겠습니다. 이 코드는 Gift Quiz 페이지가 로드 될 때마다 실행됩니다.
$w.onReady(() => {
numberOfSlides = $w('#quizSlides').slides.length;
quizAnswersIds.forEach(answer => {
$w(`#${answer}`).onClick(() => {
selectedAnswers.push(answer);
$w('#quizSlides').next();
})
})
});
코드 이해하기 (Understanding the Code)
1행 : 페이지가 로드되면 onReady 함수 내부의 코드가 실행됩니다.
2행 : numberOfSlides를 슬라이드쇼의 길이로 설정합니다.
3행 : 각 퀴즈 응답 ID에 대해 다음을 수행합니다..
4행 : 답변 ID와 연결된 버튼이 클릭되었는지 확인합니다.
5-6행 : 버튼을 클릭하면 selectedAnswers 배열에 ID를 추가하고 다음 슬라이드로 이동합니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야 할 수 있습니다.
- Values of quizAnswersIDs array
- quizSlides
4단계 : quizSlides_change 함수 만들기 (Step 4: Create the quizSlides_change Function)
quizSlides_change 함수는 사용자가 새 슬라이드로 이동할 때마다 실행되는 이벤트 핸들러입니다. quizSlides_change는 다른 여러 함수를 호출합니다.
- isQuizFinished : 퀴즈가 끝났는지 확인합니다.
- getKeywordsPerProduct : 퀴즈가 끝나면 productsKeywords 컬렉션에서 각 제품과 관련된 모든 키워드를 가져옵니다
- filterProductsPerAnswer : 키워드가 답변과 일치하지 않는 제품을 필터링합니다.
- map : 일치하는 각 제품의 제품 ID를 추출합니다.
- getRandomItemsFromArray : 사용자에게 추천 할 일치하는 제품의 임의 목록을 가져옵니다.
- getProductsData : 리피터에 배치 할 권장 제품의 모든 제품 세부 정보를 가져옵니다.
이 글 뒷부분의 각 기능에 대한 자세한 설명을 제공할 것입니다.
노트 :
이 예제에서는 async/await 자바스크립트(JavaScript) 기능을 사용합니다.
export async function quizSlides_change(event, $w) {
if (isQuizFinished()) {
let quizProducts = await getKeywordsPerProduct();
selectedAnswers.forEach(answer => {
quizProducts = filterProductsPerAnswer(quizProducts, answer);
});
quizProducts = quizProducts.map(quizProduct => quizProduct.productId);
quizProducts = getRandomItemsFromArray(quizProducts, numberOfSlides);
$w('#recommendedProducts').data = await getProductsData(quizProducts);
}
}
코드 이해하기 (Understanding the Code)
2행 : 퀴즈가 끝났는지 확인합니다.
3행 : 퀴즈가 끝나면 productsKeywords 컬렉션에서 각 제품과 관련된 모든 키워드를 가져옵니다.
4-5행 : 각 사용자의 답변에 대해 제품 키워드와 일치하지 않는 제품을 걸러냅니다.
7행 : 나머지 (일치하는) 제품 각각에 대해 제품 ID를 추출합니다.
8행 : 일치하는 제품 목록에서 임의의 제품 그룹을 선택합니다.
9행 : 추천 제품 반복 레이아웃의 데이터를 임의로 선택한 일치 제품의 제품 데이터로 설정합니다. 데이터가 정의되면 recommendedProducts_itemReadyevent 핸들러가 실행되어 각 반복 레이아웃 항목 요소에 데이터 값을 채웁니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 이 항목을 사이트의 일치 조건과 일치하도록 수정해야할 수 있습니다.
- #recommendedProducts
5단계 : isQuizFinished 함수 만들기 (Step 5: Create the isQuizFinished Function)
isQuizFinished 함수는 현재 슬라이드가 마지막 슬라이드인지 여부를 확인하여 퀴즈가 완료되었는지 확인합니다.
function isQuizFinished() {
return $w('#quizSlides').currentIndex === numberOfSlides - 1;
}
코드 이해하기 (Understanding the Code)
2행 : quizSlides 슬라이드쇼의 현재 슬라이드가 마지막 슬라이드인 경우 부울 값 true를 반환합니다. numberOfSlides에서 1을 뺀 이유는 자바스크립트(JavaScript) 배열이 0부터 시작했기 때문입니다. 예를 들어, 4 요소가 있는 배열은 0-3부터 번호가 매겨지고 마지막 슬라이드의 현재 색인은 4가 아닌 3입니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 이 항목을 사이트의 일치 조건과 일치하도록 수정해야 할 수 있습니다.
- quizSlides
6단계 : getKeywordsPerProduct 함수 만들기 (Step 6: Create the getKeywordsPerProduct Function)
getKeywordsPerProduct는 productKeywords 컬렉션에서 각 제품과 관련된 모든 키워드를 가져옵니다. 키워드는 나중에 퀴즈 응답과 비교되어 일치하는 제품을 찾습니다.
async function getKeywordsPerProduct() {
let productsKeywords = await wixData.query("productsKeywords").find();
productsKeywords = productsKeywords.items;
productsKeywords = productsKeywords.map(item => {
return {
productId: item.product,
keywords: item.keywords.split(",")
}
});
return productsKeywords;
}
코드 이해하기 (Understanding the Code)
2행 : productKeywords 컬렉션에 대한 쿼리를 실행합니다. 쿼리에 필터가 추가되지 않았으므로 find는 컬렉션의 모든 항목을 반환합니다.
3행 : collection 키워드를 productsKeywords 변수에 저장합니다.
4-7행 : 각 제품의 제품 ID 및 키워드를 포함하는 객체에 항목을 매핑하여 구성합니다.
10행 : productsKeyword는 모든 제품 ID와 키워드를 포함하는 객체를 반환합니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
7단계 : filterProductsPerAnswer 함수 만들기 (Step 7: Create the filterProductsPerAnswer Function)
filterProductsPerAnswer는 제품 키워드 목록을 사용자의 답변과 비교하여 키워드에 퀴즈 응답이 포함되지 않은 모든 제품을 필터링합니다. 각 답변에 대해 함수를 호출한 후에는 키워드가 모든 퀴즈 응답과 일치하는 제품 목록이 남습니다.
function filterProductsPerAnswer(quizProducts, answer) {
const filteredProducts = quizProducts.filter(quizProduct => {
return quizProduct.keywords.includes(answer)
});
return filteredProducts;
}
코드 이해하기 (Understanding the Code)
2행 : 필터링 된 제품을 필터의 결과로 설정합니다.
3행 : 키워드에 해답을 포함하지 않는 모든 제품을 제외합니다.
5행 : 필터링된 제품 목록을 반환합니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
8단계 : getRandomItemsFromArray 함수 만들기 (Step 8: Create the getRandomItemsFromArray Function)
퀴즈 응답과 일치하는 수십 개의 제품이 있을 수 있으므로 getRandomItemsFromArray 함수는 recommendedProducts repeater에 표시할 미리 정의된 수의 일치하는 제품을 무작위로 선택합니다. 이 예에서는 표시되는 항목의 수를 슬라이드쇼의 슬라이드 수로 설정합니다.
일치하는 제품 수가 사용자가 선택한 미리 정의된 수보다 적을 가능성이 있기 때문에 이 코드는 반복 레이아웃 길이를 두 숫자 중 낮은 숫자로 정의합니다.
무작위로 선택하면 퀴즈를 여러 번 실행하는 사용자가 여러가지 대답을 얻을 수 있습니다.
function getRandomItemsFromArray(productsArr, numberOfItems){
const productsIds = [];
let numberOfProducts = productsArr.length;
for (let i = 0; i < numberOfItems && i < numberOfProducts; i++){
const randomIndex = getRandomInt(0, productsArr.length -1 );
productsIds.push(productsArr[randomIndex]);
productsArr.splice(randomIndex, 1);
}
return productsIds;
}
코드 이해하기 (Understanding the Code)
2행 : 무작위로 선택된 제품의 제품 ID를 저장할 productID 변수를 정의합니다.
3행 : 일치하는 제품 수를 필터링된 제품이 포함된 배열의 길이로 설정합니다.
4행 : 표시하려는 미리 정의된 번호 또는 제품 수 (둘 중 적은 수)에 대해 다음을 수행합니다.
5행 : getRandomInt 함수를 사용하여 randomIndex를 일치하는 제품 배열의 무작위로 선택된 색인 번호로 설정합니다.
6행 : 임의의 색인에 있는 제품을 권장 제품 목록에 추가합니다.
7행 : 제품이 권장 제품 목록에 추가되면 가능한 제품 목록에서 제품을 제거하여 선택합니다.
9행 : 무작위로 선택된 제품의 제품 ID 목록을 반환합니다.
사이트에서 이 코드를 작동 시키려면 여기에서 변경해야 할 식별자가 없습니다.
9 단계 : getRandomInt 함수 만들기 (Step 9: Create the getRandomInt Function)
getRandomInt 함수는 함수에 전달된 두 숫자 사이의 임의의 숫자를 반환합니다. getRandomItemsFromArray는 이 함수를 사용하여 배열의 첫 번째 및 마지막 색인 값을 전달하여 일치하는 제품이 포함된 배열의 임의 색인 값을 가져옵니다.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
코드 이해하기 (Understanding the Code)
2행 : 자바스크립트 수학 함수를 사용하여 두 개의 지정된 값 사이에 임의의 숫자를 반환합니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
10단계 : getProductsData 함수 만들기 (Step 10: Create the getProductsData Function)
getProductsData는 권장 제품의 ID를 사용하여 Stores' Products 컬렉션에서 각 권장 제품의 데이터를 가져옵니다. 이 데이터는 마지막 슬라이드에서 반복 레이아웃을 채웁니다.
async function getProductsData(productsIds) {
const productsData = await wixData.query("Stores/Products")
.hasSome("_id", productsIds)
.find();
return productsData.items;
}
코드 이해하기 (Understanding the Code)
2행 : 상점> 제품 콜렉션 조회의 결과로 productsData를 설정합니다.
3-4행 : ID가 권장 제품 ID 중 하나와 일치하는 항목으로 쿼리를 구체화합니다.
5행 : 각 제품의 데이터 항목을 반환합니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다
11단계 : recommendedProducts_itemReady 함수 만들기 (Step 11: Create the recommendedProducts_itemReady Function)
recommendedProducts_itemReady는 반복 레이아웃 데이터에 저장된 값에 따라 반복 레이아웃의 각 권장 제품 항목의 특성을 설정하는 onItemReady 이벤트 핸들러입니다.
export function recommendedProducts_itemReady($w, itemData, index) {
$item('#name').text = itemData.name;
$item('#image').src = itemData.mainMedia;
$item('#image').link = itemData.productPageUrl;
$item('#price').text = itemData.formattedPrice;
}
코드 이해하기 (Understanding the Code)
2-5행 : 각 반복 레이아웃 특성을 해당 제품 특성으로 채웁니다. 이미지 링크를 클릭하면 제품을 구매할 수 있는 제품 페이지로 연결됩니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #name
- #image
- #price
다음 단계 (Next Steps)
- 템플릿에서 작업하려면 에디터에서 이 예제를 엽니다.
- 저장소 컬렉션이 데이터베이스에 나타나도록 사이트를 게시하고 브라우저를 새로 고칩니다.
- 다른 윅스 코드(Wix Code) Store 예제를 사용해봅니다 :
연관된 토픽)
윅스 홈페이지 만들기 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-a-gift-quiz-to-a-wix-stores-site
댓글