윅스 (Wix) 코딩 - Wix 스토어(Stores)/쇼핑몰 제품 구성 기능 추가하기 (Wix Code: Adding a Product Configurator to a Wix Stores Site)
설명)
이 글에서는 윅스 코드(Wix Code)를 사용하여 제품 구성자를 Wix Stores 사이트에 추가하는 방법에 대해 설명합니다. 제품 구성자는 사이트 방문자가 사용자 정의 스웨터를 디자인하기 위해 다양한 패턴과 색상을 선택할 수 있습니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하고 작동시키기 위해 추가한 코드를 설명합니다.
개요 (Overview)
사이트에서 다음을 추가했습니다.
- Sweater 페이지 :
a. 기본 스웨터 이미지와 몸, 소매, 주머니, 목선의 오버레이 이미지.
b. 이름, 가격 및 설명을 표시하는 요소.
c. 각 스웨터 부품의 패턴 또는 색상을 선택하기위한 섹션. 각 섹션에는 패턴 또는 색상을 선택하는 버튼이 있는 반복 레이아웃이 있는 접을 수 있는 컨테이너와 각 컨테이너를 확장하거나 접을 수 있는 헤더 버튼
- combinedMaterialsImages 컬렉션. 컬렉션에는 각 스웨터 부품에 사용할 수 있는 각 패턴 또는 색상 옵션에 대한 항목 (행)이 있습니다. 항목에는 패턴 또는 색상을 표시하기위한 이미지가 포함됩니다.
그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :
- Sweater 페이지가 로드되면 스웨터 사용자 지정 설정을 지웁니다.
- 방문자가 머리글 버튼을 클릭하면 반복 레이아웃이 들어있는 컨테이너를 확장하여 선택 항목의 패턴이나 색이 있는 버튼을 표시합니다. 다른 섹션의 컨테이너를 축소합니다.
- 방문자가 버튼을 클릭하면 방문자의 선택을 객체에 저장합니다.
- 모든 선택이 완료되면 장바구니에 추가 버튼을 활성화합니다. 방문자가 버튼을 클릭하면 사용자 지정 제품을 쇼핑 카트에 추가합니다.
1단계 : 사이트 설정 (Step 1: Set Up the Site)
이 기능을 재현하려면 최소한 하나의 제품으로 사이트에 Wix Stores를 추가해야합니다. 스토어를 사이트에 추가하면 사이트에 페이지와 컬렉션이 자동으로 추가됩니다.
Products, Collections 컬렉션은 Wix Stores가 있는 사이트가 있으면 자동으로 만들어집니다. 이러한 컬렉션은 읽기 전용이므로 상점 관리자를 사용하여 제품 목록을 작성해야합니다. 이 예제에서는 샘플 사이트의 저장소에 있지만 Collections 컬렉션과 함께 작업하지 않습니다.
노트 :
데이터베이스에 Store 컬렉션을 보려면 사이트를 저장 또는 게시하고 브라우저를 새로 고쳐야 할 수 있습니다.
이 예제는 Products 컬렉션의 제품 중 하나인 Patchwork Sweater 제품을 기반으로합니다.
또한 Sweater 페이지와 combinedMaterialsImages 컬렉션을 데이터베이스에 추가했습니다. 이 글 뒷부분의 Sweater 페이지 설정에 대해 설명하겠습니다.
combinedMaterialsImages 컬렉션에는 4개의 입력란(필드)가 있습니다.
- Title : 스웨터 부품의 패턴 또는 색상 이름
- option : 패턴 또는 색상이 변경되는 스웨터 부분
- choiceImage : 패턴 또는 색상의 샘플 이미지
- displayImage : 특정 패턴이나 색상이있는 스웨터 부품의 이미지
choiceImage 이미지는 각 스웨터 부품의 패턴 또는 색상 샘플을 표시하는 데 사용되며 displayImage 이미지는 스웨터 그림에서 선택한 패턴 / 색상을 표시합니다.
2단계 : Sweater 페이지 설정 (Step 2: Set Up the Sweater Page)
Sweater 페이지에서 다음을 추가했습니다.
• 페이지 요소를 깔끔하고 체계적으로 유지하기위한 스트립.
• 각 스웨터 부품의 이미지로 오버레이 된 스웨터의 기본 이미지.
기본 스웨터 이미지는 다음과 같습니다.
스웨터의 각 부분은 다음과 같습니다.
- 또한 새로 고침 버튼을 추가하여 기본 스웨터 이미지로 재설정하고 스웨터 사용자 정의 프로세스를 다시 시작합니다.
페이지가 로드되거나 새로고침 버튼을 클릭하면 개별 스웨터 부품 이미지가 숨겨지고 기본 스웨터 이미지가 표시됩니다.
- 스웨터의 제목, 가격 및 제품 컬렉션의 설명.
- 축소되고 확대하는 각 스웨터 부품을 사용자 정의하기위한 컨테이너.
- 스웨터 부품 색상 또는 패턴을 선택하기위한 버튼이 있는 각 컨테이너 내부의 반복 레이아웃. 방문자가 버튼을 가리키면 검정 테두리가 나타납니다 (마우스 오버 효과는 코드없이 버튼 디자인을 사용하여 추가됩니다). 버튼을 클릭하면 스웨터 부품의 패턴이나 색상이 선택됩니다.
- 스웨터 부품의 이름과 위아래 화살표가 있는 각 반복 레이아웃 위에 있는 머리글 버튼. 버튼을 클릭하면 해당 스웨터 부품에 대한 반복 레이아웃이 있는 컨테이너가 펼쳐지고 다른 스웨터 부품에 대해서는 컨테이너가 축소됩니다.
노트 :
아래 그림에서 두 개의 화살표가 별도로 표시됩니다. 실제 사이트에서는 겹치기 때문에 표시되는 코드를 코드가 제어합니다.
- 5가지 데이터세트 :
a. 제품의 제목, 가격 및 설명을 표시하는 Products 컬렉션 데이터세트
b. combinedMaterialsImages 컬렉션에 연결된 네 개의 필터링된 데이터세트, 각 스웨터 부품에 하나. 데이터세트는 옵션 (몸체, 소매, 주머니, 목선)로 필터링됩니다. 필터링된 각 데이터세트는 해당 반복 레이아웃의 버튼에 연결됩니다.
- 방문자의 카트에 사용자 정의된 스웨터를 추가하기위한 장바구니에 추가 버튼. 장바구니에 추가 버튼은 사용할 수 없으며 기본적으로 회색으로 표시됩니다. 모든 스웨터 부품에 대해 패턴이나 색상을 선택한 후 버튼이 활성화되어 검은색으로 표시됩니다.
- 장바구니에 추가된 제품 수를 표시하는 장바구니 아이콘. 장바구니를 클릭하면 방문자가 Cart 페이지로 이동하여 체크아웃할 수 있습니다.
3단계 : Sweater 페이지 준비 (Step 3: Prepare the Sweater Page)
Sweater 페이지에서 Wix Windows에서 작업해야하는 모듈을 가져오기 시작합니다. 이 모듈을 사용하여 방문객이 데스크톱이나 모바일 장치에 있는지 확인합니다. 이 코드는 코드 패널의 맨 위에 추가해야합니다.
그런 다음 코드 전체에 전역 변수를 사용하도록 선언합니다. 마지막으로 clearSelection 함수를 호출하여 사용자 정의 설정을 지우고 스웨터를 기본 상태로 되돌립니다.
노트 :
이 예의 모든 코드는 Sweater 페이지에 있습니다.
import wixWindow from 'wix-window';
const NUMBER_OF_CHOICES = 4;
const productId = "ad8e5eee-5939-d0aa-6094-e620986543fe";
let selectedOptions = {};
$w.onReady(function () {
clearSelection();
});
코드 이해하기 (Understanding the Code)
1행 : Wix Window 라이브러리로 작업하는 데 필요한 모듈을 가져옵니다.
3-5행 : 다음 변수를 정의합니다.
- NUMBER_OF_CHOICES : 사용자 정의할 수 있는 스웨터 부품 수
- productId : Products 컬렉션에서 스웨터의 하드 코딩된 제품 ID
- selectedOptions : 각 스웨터 부품에 대해 선택한 패턴 또는 색상을 저장하는 객체
7-8행 : 페이지가 로드되면 clearSelection 함수를 호출하여 사용자 정의 설정을 지웁니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야할 식별자가 없습니다.
4단계 : refreshButton_click 함수 만들기 (Step 4: Create the refreshButton_click Function)
스웨터 이미지의 새로고침 버튼을 클릭하면 refreshButton_click 이벤트 핸들러가 clearSelection 함수를 호출하여 스웨터 사용자 정의 설정을 지웁니다.
export function refreshButton_click(event, $w) {
clearSelection();
}
코드 이해하기 (Understanding the Code)
1-2행 : 새로고침 버튼을 클릭하면 clearSelection 함수를 실행하여 스웨터 사용자 정의 설정을 지웁니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
5단계 : clearSelection 함수 만들기 (Step 5: Create the clearSelection Function)
clearSelection 함수는 사용자 정의된 선택 항목을 모두 지우므로 스웨터는 기본 설정으로 되돌아갑니다. clearSelection은 Sweater 페이지가 로드될 때 및 방문자가 스웨터 이미지의 새로고침 버튼을 클릭할 때 실행됩니다.
function clearSelection() {
selectedOptions = {};
$w('#bodyImg').hide();
$w("#sleevesImg").hide();
$w('#necklineImg').hide();
$w("#pocketImg").hide();
$w("#bodyImg").src = 'https://';
$w("#sleevesImg").src = 'https://';
$w("#pocketImg").src = 'https://';
$w("#necklineImg").src = 'https://';
$w("#addToCartButton").disable();
}
코드 이해하기 (Understanding the Code)
2행 : 각 스웨터 부품에 대한 방문자의 패턴 또는 색상 선택 사항을 포함하는 selectedOptions 객체를 지웁니다.
3-6행 : 기본 스웨터만 표시되도록 겹쳐진 스웨터 부품 이미지를 숨깁니다.
7-10행 : 스웨터 부품 이미지를 지웁니다.
11행 : 장바구니에 추가 버튼을 사용 중지합니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #bodyImg
- #sleevesImg
- #necklineImg
- #pocketImg
- #addToCartButton
6단계 : bodySelectionRepeater_itemReady 함수 만들기 (Step 6: Create the bodySelectionRepeater_itemReady Function)
노트 :
이 섹션에서는 스웨터의 "본문"부분을 예로 사용합니다. 코드는 다음을 제외하고 다른 스웨터 부품과 동일합니다.
- "body"라는 단어는 "sleeve", "pocket" 또는 "neckline"으로 바뀝니다.
- toggleFold 매개 변수(1)는 각 스웨터 부품의 해당 색인 번호 (2, 3 및 4)로 대체됩니다.
반복 레이아웃 요소를 선택하고 속성 패널에 onItemReady 이벤트 핸들러를 추가했습니다.
bodyDataset은 combinedMaterialsImages 컬렉션을 필터링하여 option 입력란(필드)가 body인 컬렉션의 항목만 포함합니다. 컬렉션의 각 필터링된 항목 (행)은 itemData 매개 변수로 bodySelectionRepeater_itemReady 이벤트 핸들러에 전달됩니다.
페이지가 로드되고 필터링된 데이터세트가 반복 레이아웃에 연결되면 bodySelectionRepeater_itemReady가 "본문" 항목과 연결된 각 패턴 / 컬러 이미지를 반복 레이아웃의 버튼에 로드합니다.
반복 레이아웃에서 버튼을 클릭하면 onClick 이벤트 핸들러가 selectChoiceForOption 함수를 실행합니다.
방문자가 모바일 장치를 사용하는 경우 버튼을 클릭하면 toggleFold 함수가 실행되고 반복 레이아웃이 들어있는 컨테이너가 축소됩니다.
export function bodySelectionRepeater_itemReady($w, itemData, index) {
$w('#selectBodyButton').onClick(() => {
selectChoiceForOption($w, 'body', itemData);
if (wixWindow.formFactor === 'Mobile') {
toggleFold(1);
}
});
}
코드 이해하기 (Understanding the Code)
1행 :로드된 bodySelectionRepeater의 각 항목을 설정합니다.
2행 : 방문자가 본문 옵션에 대한 선택사항을 클릭할 때 발생하는 동작을 설정합니다.
3행 : 버튼을 클릭하면 컬렉션에서 선택된 itemData를 사용하여 본문 스웨터 부분에 대해 selectChoiceForOption 함수를 실행합니다.
4-5행 : 모바일 장치에서 사이트를 보고있는지 확인합니다. 그럴 경우 본문 스웨터 부품과 연결된 색인 번호로 toggleFold를 실행하여 반복 레이아웃을 보관하는 컨테이너를 접습니다.
사이트의 컬렉션을 기반으로 변경할 필요가 있는 식별자 (Identifiers you may need to change based on your site's collections)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- #selectBodyButton
- Body
7단계 : selectChoiceForOption 함수 만들기 (Step 7: Create the selectChoiceForOption Function)
selectChoiceForOption 함수는 방문객이 스웨터 부품의 특정 패턴이나 색상을 선택할 때 실행됩니다. selectedOptions 객체에 선택 항목을 추가하고 선택된 패턴 또는 색상을 스웨터 부품에 표시하며 모든 스웨터 부품 선택이 완료되면 장바구니에 추가 버튼을 활성화합니다.
function selectChoiceForOption($w, option, choiceData) {
selectedOptions[capitalizeFirstLetter(option)] = choiceData.title;
$w(`#${option}Img`).src = choiceData.displayImage;
$w(`#${option}Img`).show();
if (Object.keys(selectedOptions).length === NUMBER_OF_CHOICES) {
$w('#addToCartButton').enable();
}
}
코드 이해하기 (Understanding the Code)
1행 : 다음 매개 변수를 사용하여 함수를 실행합니다.
• $ w : 전역 선택자
• option : 현재 스웨터 부품 (예 : 바디)
• choiceData : 선택한 combinedMaterialsImages 컬렉션의 항목
2행 : selectedOptions 객체 (예 : Body : Stripe Pattern)에 선택한 선택 항목의 패턴/색상 이름을 추가합니다. 스웨터 파트 옵션은 Product 컬렉션에서 대문자로 표시되기 때문에 먼저 옵션 키를 대문자로 만듭니다.
3행 : 옵션 매개 변수에서 스웨터 부품 이미지의 이름을 추출하려면 템플릿 리터럴 (백틱으로 표시된 문자열) 내에서 $ {expression}을 사용합니다. combinedMaterialsImages 컬렉션에서 이미지를 선택한 선택 항목의 displayImage로 변경합니다.
4행 : 스웨터에 선택한 이미지를 표시합니다.
5행 : selectedOptions 객체에 모든 스웨터 부품에 대한 선택 항목이 포함되어 있는지 확인합니다. 이 작업은 Object.keys 함수를 사용하여 개체의 길이를 선택 항목 수와 비교하여 수행됩니다.
6행 : 스웨터 부품을 모두 선택했다면 addToCartButton 버튼을 활성화합니다.
사이트의 요소에 따라 변경해야 할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야 할 수 있습니다.
- #${option}Img
- #addToCartButton
8단계 : capitalizeFirstLetter 함수 만들기 (Step 8: Create the capitalizeFirstLetter Function)
capitalizeFirstLetter 함수는 함수에 전달 된 문자열의 첫 글자를 대문자로 시작합니다.
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
코드 이해하기 (Understanding the Code)
2행 : 입력 문자열의 첫 글자를 대문자로 합니다. 이 작업은 chartAt 함수를 사용하여 문자열의 첫 번째 문자를 반환하고 toUpperCase를 사용하여 문자를 대문자로 사용하고 slice를 사용하여 두 번째 문자 (소문자)를 제거하여 수행됩니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
9단계 : option1Button_click 함수 만들기 (Step 9: Create the option1Button_click Function)
노트 :
이 섹션에서는 스웨터의 "본문" 부분을 예로 사용합니다. 코드는 다음을 제외하고 다른 스웨터 부품과 동일합니다.
- option1button_click의 숫자 "1"을 해당 옵션 번호 (2, 3 및 4)로 바꿉니다.
- toggleFold 함수에 전달된 매개 변수의 숫자 "1"을 해당 옵션 번호 (2, 3 및 4)로 바꿉니다.
option1Button_click은 반복 레이아웃 위의 버튼을 클릭하면 toggleFold 함수를 호출하는 onClick 이벤트 핸들러입니다. 10 단계에서 toggleFold에 대해 설명합니다.
export function option1Button_click(event, $w) {
toggleFold(1);
}
코드 이해하기 (Understanding the Code)
2행 : 색인이 "1"인 toggleFold 함수를 호출합니다.
사이트에서 이 코드를 작동시키려면 여기에서 변경해야 할 식별자가 없습니다.
10단계 : toggleFold 함수 만들기 (Step 10: Create the toggleFold Function)
toggleFold는 방문자가 클릭한 버튼 아래에서 컨테이너를 확대하거나 축소합니다. 컨테이너가 현재 축소된 경우 함수는 컨테이너를 확대합니다. 컨테이너가 현재 확대되어 있으면 이 함수는 컨테이너를 축소합니다. toggleFold는 다른 모든 스웨터 부품 컨테이너도 접습니다.
function toggleFold(index) {
let $fold = $w(`#option${index}Box`);
let $arrowDown = $w(`#arrowDown${index}`);
let $arrowUp = $w(`#arrowUp${index}`);
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowUp.hide();
} else {
$fold.collapse();
$arrowDown.hide();
$arrowUp.show();
}
for (let i = 1; i <= NUMBER_OF_CHOICES; i++) {
if (i !== index) {
$w(`#option${i}Box`).collapse();
$w(`#arrowDown${i}`).hide();
$w(`#arrowUp${i}`).show();
}
}
}
코드 이해하기 (Understanding the Code)
2-4행 : 현재 스웨터 부품의 컨테이너, 위쪽 화살표 및 아래쪽 화살표에 대한 식별자를 정의합니다.
5-8행 : 현재 컨테이너가 축소되어 확장한 다음 위쪽 화살표를 숨기고 아래쪽 화살표를 표시합니다.
9-13행 : 현재 컨테이너가 펼쳐져 있으면 축소하고 아래쪽 화살표를 숨기고 위쪽 화살표를 표시합니다.
14행 : 다른 모든 컨테이너 접기. 각 스웨터 부품 색인 :
15-18행 : 색인이 현재 스웨터 부분과 관련이 없으면 컨테이너를 접고 아래쪽 화살표를 숨기고 위쪽 화살표를 표시합니다.
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야 할 수 있습니다.
- #option1Box
- #arrowUp
- #arrowDown
11단계 : addToCartButton_click 함수 만들기 (Step 11: Create the addToCartButton_click Function)
addToCartButton은 장바구니에 추가 버튼을 클릭하면 실행되는 이벤트 핸들러입니다. 사용자 정의된 제품을 카트에 추가하여 Wix API addToCart 기능을 실행합니다.
export function addToCartButton_click(event, $w) {
$w('#shoppingCartIcon1').addToCart(productId, 1, {choices: selectedOptions});
}
코드 이해하기 (Understanding the Code)
2행 : 장바구니에서 다음 입력을 사용하여 addToCart 함수를 실행합니다.
• 스웨터의 제품 ID
• 장바구니에 추가 할 맞춤형 스웨터 수량
• selectedOptions 객체에 포함 된 방문자가 선택한 스웨터 옵션
사이트의 요소에 따라 변경해야할 수 있는 식별자 (Identifiers you may need to change based on your site's elements)
이 정확한 시나리오와 코드를 사이트에서 사용하려면 사이트의 콘텐츠와 일치하도록 다음 항목을 수정해야할 수 있습니다.
- shoppingCartIcon1
다음 단계 (Next Steps)
- 템플릿에서 작업하려면 에디터에서 이 예제를 엽니다.
- 저장소 컬렉션이 데이터베이스에 나타나도록 사이트를 게시하고 브라우저를 새로 고칩니다.
- 다른 Wix Code Store 예제를 사용해봅니다 :
d. 윅스 (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-a-product-configurator-to-a-wix-stores-site
댓글