윅스 (Wix) 코딩 - Wix 스토어(Stores)/쇼핑몰 사이트 장바구니에 여러 제품 담기 기능 추가하기 (Adding Multiple Items to the Cart in a Wix Stores Site)
설명)
이 글에서는 윅스 코드(Wix Code)를 사용하여 Wix Stores 사이트의 장바구니에 여러 항목을 한 번에 추가하는 방법에 대해 설명합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 윅스 에디터(Wix Editor)에서 사이트를 열면 따라할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.
개요 (Overview)
사이트에서는 방문객들이 맞춤형 매력 팔찌를 만들 수 있습니다. 방문자는 팔찌의 재질과 5가지 매력을 선택하여 추가합니다. 사이트 방문자가 사용자 정의 프로세스를 완료하면 선택한 모든 매력과 함께 팔찌가 장바구니에 추가됩니다.
사이트에는 다양한 팔찌와 매력 종류가 있는 Wix 스토어가 있습니다.
다음을 포함하는 Charm Bracelet 페이지를 추가했습니다 (We also added a Charm Bracelet page which contains) :
- 팔찌에 추가된 매력을 나타내는 5개의 오버레이 이미지가 있는 매력 팔찌의 이미지. 오버레이된 이미지는 로드시 숨겨집니다.
- 컨테이너 상자를 사용하여 구현된 세 개의 접을 수 있는 섹션. 이 섹션은 사이트 방문자가 맞춤형 팔찌를 구매하기 전에 완료해야하는 3단계를 나타냅니다. 1단계와 2단계는 다음 섹션으로 이동하는 버튼을 포함하고 3단계는 카트에 항목을 추가하는 버튼을 포함합니다. 사이트 방문자는 섹션 헤더 역할을 하는 텍스트 요소를 클릭하여 섹션 간을 이동할 수도 있습니다.
a. 첫 번째 섹션에는 팔찌 재질 선택을 위한 3개의 버튼이 있습니다.
b. 두 번째 섹션에는 사용 가능하고 선택된 매력을 보여주는 반복 레이아웃이 있습니다.
c. 세 번째 섹션에는 선택한 재료 팔찌, 어떤 매력을 선택했는지 보여주는 반복 레이아웃 및 총가격을 나타내는 또 다른 텍스트 요소가 표시된 텍스트 요소가 있습니다.
- 장바구니.
그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :
- 사이트 방문자가 섹션간에 쉽게 전환할 수 있도록 페이지의 탐색을 설정합니다.
- 팔찌와 모든 매력에 대한 제품 정보를 얻습니다.
- 팔찌 매력을 선택하고 표시하기위한 반복 레이아웃 데이터 및 논리를 추가합니다.
- 선택한 팔찌와 매력의 가격을 계산하여 상점 장바구니에 추가합니다.
1단계 : 사이트 설정 (Step 1: Set Up the Site)
이 기능을 재현하려면 일부 제품을 사용하여 Wix Stores를 사이트에 추가해야합니다. 사이트에서는 제품이 다른 팔찌와 매력 유형입니다. 스토어를 사이트에 추가하면 사이트에 페이지와 컬렉션이 자동으로 추가됩니다.
노트 :
- 이 예제에서는 샘플 사이트의 저장소에 있지만 Collections 컬렉션과 함께 작업하지 않습니다.
- 데이터베이스에 Stores 컬렉션을 보려면 사이트를 저장 또는 게시하고 브라우저를 새로 고쳐야할 수 있습니다.
다음은 사이트의 일부 데이터입니다.
2단계 : Charm Bracelet 페이지 설정 (Step 2: Set Up the Charm Bracelet Page)
Charm Bracelet 페이지에 추가된 내용은 다음과 같습니다.
- Products 컬렉션에 연결된 데이터세트.
- 장바구니.
- 팔찌와 매력을 위한 이미지. 팔찌 이미지는 선택한 재질에 따라 바뀝니다. 선택한 매력에 따라 charmPlace 이미지가 변경됩니다.
- 설명 정보를 표시하기 위한 일부 텍스트 요소.
- 세 개의 버튼은 섹션 머리글처럼 보입니다.
- 사용자 지정 프로세스의 세 단계에 대한 세 개의 컨테이너 상자. 요소는 쉽게 접히고 함께 확장될 수 있도록 컨테이너 상자에 그룹화됩니다.
a. 첫 번째 컨테이너 상자에는 팔찌 재질을 선택하기 위한 버튼과 다음 단계로 이동하기위한 버튼이 있습니다.
b. 두 번째 컨테이너 상자에는 팔찌 매력을 선택하는 반복 레이아웃과 다음 단계로 이동하기 위한 버튼이 있습니다. 각 반복 레이아웃 항목은 세 개의 레이어로 구성됩니다.
1. 매력을 여전히 선택할 수 있는지 여부를 나타내는 매력 오버레이.
2. 실제 매력을 보여주는 매력 이미지.
3. 매력이 선택되었는지를 나타내는 매력 테두리.
c. 세 번째 컨테이너 상자에는 사용자 지정된 팔찌를 검토하고 장바구니에 품목을 추가하는 요소가 있습니다.
1. 선택된 팔찌의 재질을 보여주는 텍스트 요소.
2. 선택한 매력을 보여주는 반복 레이아웃.
3. 선택된 팔찌와 매력의 가격을 보여주는 텍스트 요소.
4. 선택한 모든 항목을 장바구니에 추가하는 버튼.
3단계 : 가져오기 및 전역 변수 만들기 (Step 3: Create an Import and Global Variables)
이 사이트의 모든 코드가 Charm Bracelet 페이지에 추가됩니다.
코드는 import 문과 일부 변수 선언으로 시작합니다.
import wixData from 'wix-data';
const MAX_NUMBER_OF_CHARMS = 5;
const selectedCharms = [];
let braceletsMap = {};
let selectedBracelet;
1행 : 사이트 컬렉션을 쿼리하는 데 사용되는 wix-data 모듈을 가져옵니다.
3행 : 팔찌에 추가할 수 있는 최대 매력 수를 결정하는 상수를 만듭니다.
4행 : 사이트 방문자가 선택한 매력을 포함할 배열을 만듭니다.
5행 : 다양한 종류의 팔찌에 대한 제품 정보를 포함할 개체를 만듭니다.
6행 : 선택한 팔찌 유형을 저장할 변수를 만듭니다.
4단계 : onReady 함수 만들기 (Step 4: Create the onReady Function)
페이지가 로드되면 다양한 유형의 팔찌에 대한 제품 정보를 얻고 나중에 사용할 수 있는 편리한 방법으로 저장합니다.
노트 :
이 예제에서는 async / await 자바스크립트(JavaScript) 기능을 사용합니다.
$w.onReady(async () => {
const braceletNames = ['Silver Bracelet', 'Rose Gold Bracelet', 'Gold Bracelet'];
let newQuery = await wixData.query("Stores/Products")
.hasSome("name", braceletNames).find();
const allBracelets = newQuery.items;
allBracelets.forEach(product => {
const keyName = product.name.split(' ')[0].toLowerCase();
braceletsMap[keyName] = product;
} );
} );
1행 : onReady( ) 이벤트 핸들러를 선언합니다.
2행 : 사용 가능한 모든 팔찌 유형의 배열을 만듭니다.
3-4행 : Products 컬렉션을 쿼리하여 2행에서 만든 목록의 팔찌 이름과 일치하는 제품을 찾습니다.
5행 : 쿼리 결과에 반환된 항목을 가져옵니다.
6-9행 : 쿼리에서 반환된 각 항목에 대해 팔찌 유형에 해당하는 팔레트 맵 객체에 키를 만듭니다 (예 : '실버 팔찌'의 키가 은색으로 설정됨). 그런 다음 해당 키 값을 해당 팔찌 유형에 대해 검색된 제품 정보로 설정합니다.
5단계 : 각 머리글에 대해 onClick 함수 만들기 (Step 5: Create onClick Functions for Each Header)
사용자 정의 프로세스의 각 단계마다 헤더가 있습니다. 헤더는 실제로 사이트 방문자가 클릭하여 관련 섹션을 확장하고 다른 모든 섹션을 축소 할 수 있는 버튼입니다.
export function selectBraceletText_click(event, $w) {
$w('#bracelectSelectionStrip').expand();
$w('#charmsSelectionStrip').collapse();
$w('#addToCartStrip').collapse();
}
export function chooseCharmsText_click(event, $w) {
$w('#bracelectSelectionStrip').collapse();
$w('#charmsSelectionStrip').expand();
$w('#addToCartStrip').collapse();
}
export function reviewBraceletText_click(event, $w) {
$w('#bracelectSelectionStrip').collapse();
$w('#charmsSelectionStrip').collapse();
$w('#addToCartStrip').expand();
}
1-5, 7-11, 13-17행 : 헤더 버튼을 클릭하면 해당 섹션이 펼쳐지고 다른 모든 섹션은 축소됩니다.
6단계 : 각 재료 버튼에 대해 onClick 함수 만들기 (Step 6: Create onClick Functions for Each Material Button)
사용자 지정 프로세스의 1단계에서 사이트 방문자는 세 개의 버튼 중 하나를 사용하여 매력 팔찌의 재질을 선택합니다. 버튼은 유사한 onClick 이벤트 핸들러에 연결됩니다.
export function gold_click(event, $w) {
selectBracelet(braceletsMap.gold);
}
export function silver_click(event, $w) {
selectBracelet(braceletsMap.silver);
}
export function rosegold_click(event, $w) {
selectBracelet(braceletsMap.rose);
}
1-3, 5-7, 9-11행 : 버튼 이벤트 핸들러는 selectBracelet( ) 함수를 호출하여 선택된 재료에 해당하는 제품 정보를 전달합니다. selectBracelet( ) 함수는 선택한 팔찌 재질이 변경되고 이 글의 7단계에서 자세히 설명될 때 페이지 요소에 필요한 모든 변경 작업을 수행합니다.
7단계 : selectBracelet 함수 만들기 (Step 7: Create the selectBracelet Function)
selectBracelet( ) 함수는 선택한 팔찌 재질에 해당하는 Products 컬렉션에서 정보를 받습니다.
function selectBracelet(bracelet) {
selectedBracelet = bracelet;
$w('#bracelet').src = bracelet.mainMedia;
$w('#nextButton').enable();
$w('#chooseCharmsText').enable();
$w('#selectedBracelet').text = bracelet.name + " + these charms:";
$w('#selectedBracelet').show();
}
2행 : selectedBracelet 전역 변수를 선택한 팔찌의 제품 정보로 설정합니다.
3행 : 선택된 팔찌의 제품 정보에서 팔찌 이미지를 주 이미지로 설정합니다..
4행 : 사용자 정의 프로세스의 다음 단계로 이동하는 데 사용되는 버튼을 사용 가능하게합니다. 이 버튼을 클릭할 때 실행되는 코드에 대한 설명은이 글의 8단계를 참조합니다.
5행 : 사용자 정의 프로세스의 다음 단계로 이동하는 데 사용되는 표제를 사용 가능하게합니다. 이 버튼을 클릭할 때 실행되는 코드에 대한 설명은이 글의 5단계를 참조합니다.
6행 : 선택한 팔찌 유형을 반영하도록 사용자 정의 프로세스의 3단계에서 검토 텍스트를 설정합니다.
7행 : 사용자 정의 프로세스의 3단계에서 검토 텍스트를 표시합니다.
8단계 : nextButton_click 함수 만들기 (Step 8: Create the nextButton_click Function)
nextButton_click( ) 함수는 사용자 정의 프로세스의 1단계에서 다음 버튼에 연결됩니다. 버튼은 2단계로 이동하는 데 사용됩니다.
export function nextButton_click(event, $w) {
$w('#bracelectSelectionStrip').collapse();
$w('#charmsSelectionStrip').expand();
$w('#chooseCharmsText').enable();
}
2행 : 첫 번째 섹션 접기.
3행 : 두 번째 섹션을 펼칩니다.
4 행 : 두 번째 섹션의 머리글 버튼를 사용합니다.
9단계 : charmsRepeater_itemReady 함수 만들기 (Step 9: Create the charmsRepeater_itemReady Function)
charmsRepeater_itemReady( ) 함수는 사용자 지정 프로세스의 2단계에서 charms를 선택하는 데 사용되는 반복 레이아웃에 연결됩니다. 함수는 작성되는 각 반복 레이아웃 항목에 대해 호출됩니다. 특정 매력을 클릭했을 때 일어나는 일을 설정합니다.
export function charmsRepeater_itemReady($w, itemData, index) {
$w('#charmImage').onClick(() => {
if ($w('#charmBorder').hidden) {
selectedCharms.push(itemData);
$w('#charmBorder').show();
showCharmOnBracelet(itemData.mainMedia);
$w('#selectedCharmsRepeater').data = selectedCharms;
if (selectedCharms.length === MAX_NUMBER_OF_CHARMS) {
disableCharmsSelection();
}
} else {
if (selectedCharms.length === MAX_NUMBER_OF_CHARMS) {
enableCharmsSelection();
}
const indexOfCharm = selectedCharms.findIndex(item => item._id === itemData._id);
selectedCharms.splice(indexOfCharm, 1);
$w('#selectedCharmsRepeater').data = selectedCharms;
hideCharmFromBracelet(itemData.mainMedia);
$w('#charmBorder').hide();
}
});
}
2행 : 매력 이미지에 onClick 이벤트 핸들러를 만듭니다.
3행 : 항목의 테두리가 숨겨져 있으면 매력이 현재 선택되지 않은 것입니다.
4행 : 선택한 매력의 목록에 클릭된 매력을 추가합니다.
5행 : 테두리가 보이면 매력이 선택되었음을 나타냅니다.
6행 : 선택된 charms 이미지로 showCharmOnBracelet( ) 함수를 호출합니다. showCharmOnBracelet( ) 함수는 이 글의 10단계에서 설명한대로 지정된 매력 이미지를 팔찌 이미지의 다음 열린 지점에 추가합니다.
7행 : 사용자 지정 프로세스의 3단계에서 반복 레이아웃를 재설정하여 새로 선택한 매력을 반영합니다.
8-10행 : 선택 항목의 최대 개수에 도달했음을 의미하는 경우이 기사의 11단계에서 설명하는 disableCharmsSelection( ) 함수를 호출하여 다른 매력 선택을 비활성화합니다.
11행 : 항목의 테두리가 표시되면 매력이 현재 선택되었음을 의미합니다.
12-14행 : 선택 해제가 최대 매력 수를 더 이상 선택하지 않았다면 이 글의 11단계에서 설명하는 enableCharmsSelection( ) 함수를 호출하여 매력 선택을 추가로 사용 가능하게 설정합니다.
15-16행 : 선택 해제된 매력의 색인을 찾아 선택한 매력의 목록에서 제거합니다.
17행 : 사용자 정의 프로세스의 3단계에서 반복 레이아웃를 재설정하여 새로 선택 취소된 매력을 반영합니다.
18행 : 선택된 charms 이미지로 hideCharmFromBracelet( ) 함수를 호출합니다. hideCharmFromBracelet( ) 함수는 이 글의 10단계에서 설명한대로 팔찌 이미지에서 지정된 매력 이미지를 제거합니다.
19행 : 테두리를 숨겨 매력이 더 이상 선택되지 않았음을 나타냅니다.
10단계 : showCharmOnBracelet 및 hideCharmFromBracelet 함수 만들기 (Step 10: Create the showCharmOnBracelet and hideCharmFromBracelet Functions)
showCharmOnBracelet( ) 및 hideCharmFromBracelet( ) 함수는 사용자 정의 프로세스의 2단계에서 팔찌 이미지를 선택하면 팔찌 이미지에 매력을 추가하거나 제거하는 데 사용됩니다.
function showCharmOnBracelet(charmImage) {
for (let i = 1; i <= 5; i++) {
if ($w(`#charmPlace${i}`).hidden) {
$w(`#charmPlace${i}`).src = charmImage;
$w(`#charmPlace${i}`).show();
break;
}
}
}
function hideCharmFromBracelet(charmImage) {
for (let i = 1; i <= 5; i++) {
if ($w(`#charmPlace${i}`).src === charmImage) {
$w(`#charmPlace${i}`).src = 'http://';
$w(`#charmPlace${i}`).hide();
break;
}
}
}
2-8행 : 숨겨진 매력 이미지로 첫 번째 매력 장소를 찾고 이미지가 전달된 이미지로 설정한 다음 매력 이미지를 표시합니다.
12-18행 : 전달된 이미지와 일치하는 매력 장소를 찾고 이미지 소스를 빈 이미지로 설정한 다음 매력 이미지를 숨깁니다.
11단계 : disableCharmsSelection 및 enableCharmsSelection 함수 만들기 (Step 11: Create the disableCharmsSelection and enableCharmsSelection Functions)
disableCharmsSelection( ) 및 enableCharmsSelection( ) 함수는 사용자 정의 프로세스의 2단계에서 charm 선택을 비활성화하거나 활성화하는 데 사용됩니다.
function disableCharmsSelection() {
$w('#charmsRepeater').forEachItem(($w, itemData) => {
if (!isCharmSelected(itemData)) {
$w('#charmOverlay').show();
}
});
}
function enableCharmsSelection() {
$w('#charmsRepeater').forEachItem($w => {
$w('#charmOverlay').hide();
});
}
2-6행 : charms 반복 레이아웃의 각 항목에 대해 매력이 선택되어 있지 않으면 항목이 선택되지 않게하는 오버레이를 표시합니다. 매력이 선택되었는지 확인하려면 isCharmSelected( ) 함수가 호출됩니다. isCharmSelected( ) 함수는 이 글의 12단계에서 설명합니다.
9-12행 : charms 반복 레이아웃의 각 항목에 대해 오버레이를 숨겨서 매력을 선택할 수 있습니다.
12단계 : isCharmSelected 함수 만들기 (Step 12: Create the isCharmSelected Function)
isCharmSelected () 함수는 특정 매력이 선택되었는지 확인합니다.
function isCharmSelected(charmItem) {
return selectedCharms.findIndex(item => item._id === charmItem._id) > -1;
}
2행 : 자바스크립트 findIndex( ) 함수를 사용하여 선택한 매력이 선택한 매력의 목록에 있는지 확인합니다.
13단계 : selectedCharmsRepeater_itemReady 함수 만들기 (Step 13: Create the selectedCharmsRepeater_itemReady Function)
selectedCharmsRepeater_itemReady( ) 함수는 사용자 지정 프로세스의 3단계에서 선택한 매력을 표시하는 데 사용되는 반복 레이아웃에 연결됩니다. 함수는 작성되는 각 반복 레이아웃 항목에 대해 호출됩니다.
export function selectedCharmsRepeater_itemReady($w, itemData, index) {
$w('#selectedCharmImage').src = itemData.mainMedia;
}
2행 : 항목의 이미지를 반복 레이아웃의 데이터에서 지정된 이미지로 설정합니다.
14단계 : finishButton_click 함수 만들기 (Step 14: Create the finishButton_click Function)
finishButton_click( ) 함수는 사용자 정의 프로세스의 2단계에서 완료 버튼에 연결됩니다. 버튼은 프로세스의 3단계로 이동하는 데 사용됩니다.
export function finishButton_click(event, $w) {
$w('#bracelectSelectionStrip').collapse();
$w('#charmsSelectionStrip').collapse();
calcAndShowPrice();
$w('#addToCartStrip').expand();
$w('#reviewBraceletText').enable();
$w('#addToCartButton').enable();
}
2-3행 : 섹션 1과 2를 접습니다.
4행 : calcAndShowPrice( ) 함수를 사용하여 섹션 3에 표시할 팔찌와 매력의 가격을 계산합니다. calcAndShowPrice( ) 함수는 이 글의 15단계에서 설명합니다.
5행 : 세 번째 섹션을 확장합니다.
6행 : 사용자 정의 프로세스의 3단계로 이동하는 데 사용되는 표제를 사용 가능하게합니다. 이 버튼를 클릭할 때 실행되는 코드에 대한 설명은 이 글의 5단계를 참조합니다.
7행 : 팔찌와 선택한 매력을 장바구니에 담는 버튼을 활성화합니다. 이 버튼을 클릭할 때 실행되는 코드에 대한 설명은 이 글의 16단계를 참조합니다.
15단계 : calcAndShowPrice 함수 만들기 (Step 15: Create the calcAndShowPrice Function)
calcAndShowPrice( ) 함수는 선택된 팔찌와 매력의 가격을 계산합니다. 그런 다음 세 번째 섹션에 가격을 표시합니다.
function calcAndShowPrice() {
let price = selectedBracelet.price;
selectedCharms.forEach(charm => {
price += charm.price;
});
$w('#price').text = price.toString();
}
2행 : 선택한 팔찌 가격을 확인합니다.
3-5행 : 선택한 각 매력에 대해 가격을 총 가격에 더합니다.
6행 : 세 번째 섹션에 계산된 가격을 표시합니다.
16단계 : addToCartButton_click 함수 만들기 (Step 16: Create the addToCartButton_click Function)
addToCartButton_click( ) 함수는 사용자 정의 프로세스의 3단계에서 장바구니에 추가 버튼에 연결됩니다. 버튼은 선택된 팔찌와 매력을 상점 장바구니에 추가하는 데 사용됩니다.
export async function addToCartButton_click(event, $w) {
await $w('#shoppingCartIcon').addToCart(selectedBracelet._id);
selectedCharms.forEach(async charm => {
await $w('#shoppingCartIcon').addToCart(charm._id);
});
}
2행 : 선택한 팔찌를 상점 장바구니에 추가합니다.
3-5행 : 상점의 장바구니에 선택한 매력을 추가합니다.
다음 단계 (Next Steps)
- 템플릿에서 작업하려면 에디터에서 이 예제를 엽니다.
- 저장소 컬렉션이 데이터베이스에 나타나도록 사이트를 게시하고 브라우저를 새로 고칩니다.
- 다른 윅스 코드(Wix Code) Stores 예제를 사용해봅니다.
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-multiple-items-to-the-cart-in-a-wix-stores-site
댓글