윅스 (Wix) 코딩 - 확장 메가 메뉴 만들기 (Wix Code Tutorial: Creating an Expanding Mega Menu)

윅스 (Wix) 코딩 - 확장 메가 메뉴 만들기 (Wix Code Tutorial: Creating an Expanding Mega Menu)

 

 

 

설명)

 

이 글에서는 방문자의 선택에 따라 확장 메뉴를 만드는 방법에 대해 설명합니다. 이 글에서는 이 사이트를 사용하여 프로세스를 설명합니다. 에디터에서 사이트를 열어 템플릿 작업을 할 수 있습니다. 샘플 사이트를 설정하는 방법을 설명하고 코드를 이해하는 데 도움이되는 설명과 팁을 제공합니다.

 

 

 

 

 

 

 

 

개요 (Overview)

이 예제에서는 하위 메뉴로 분기하는 메뉴를 만들었습니다. 각 하위 메뉴에서 사용할 수 있는 선택 항목은 방문자의 이전 선택에 따라 사용자 정의됩니다. 최종 하위 메뉴 (하위 메뉴 2)에서 각 메뉴 버튼은 제품 목록이 있는 페이지로 연결됩니다.

 

 

사이트는 다음을 포함합니다 (Our site includes the following) : 

- 세 가지 메뉴 레벨 : 메인 메뉴, 서브 메뉴 1 및 서브 메뉴 2. 반복 레이아웃을 사용하여 메뉴를 생성했습니다.

- 메뉴 라벨 및 링크용 컨텐츠를 저장하는 두 개의 컬렉션.

 

 

그런 다음 코드를 추가하여 다음 작업을 수행했습니다. (Then we added code to do the following) :

1. 각 메뉴에 대한 방문자의 선택을 식별합니다.

2. 방문자의 선택에 따라 다음 하위 메뉴의 컬렉션 데이터를 필터링합니다.

3. 필터링된 컬렉션 데이터가 있는 하위 메뉴 반복 레이아웃 버튼 라벨을 로드합니다. 최종 메뉴의 경우 제품 목록 페이지로 연결되는 링크가 있는 반복 레이아웃 버튼을 로드합니다.

 

 

중요 :

코드를 코드 패널의 페이지 탭이 아닌 사이트 탭에 배치했습니다. 이렇게하면 사이트의 모든 페이지에 메뉴를 추가할 수 있습니다.

 

 

 

컬렉션 추가 (

Add Collections)

사이트에 다음 컬렉션을 추가했습니다.

 

 

메뉴 컬렉션 (Menu Collection)

메뉴 컬렉션에는 기본 메뉴 데이터가 들어 있으며 다음 입력란(필드)가 포함됩니다.

- rootTitles : 메인 메뉴 (Men, Women) 선택

 

 

부제목 컬렉션 (SubTitles Collection)

subTitles 컬렉션에는 하위 메뉴에 대한 데이터가 포함되며 다음 입력란(필드)가 포함됩니다.

- subTitles : 하위 메뉴 1의 라벨

- menu : 기본 메뉴 컬렉션에 대한 참조. 이 입력란(필드)는 방문자의 기본 메뉴 선택에 따라 컬렉션 데이터를 필터링하는 데 사용됩니다.

- img1 : 하위 메뉴 2에 이미지가 표시됩니다.

- subSubItems1 : 제품별 반복 레이아웃의 하위 메뉴 2의 상점 데이터

- subSubItems2 : 브랜드별 반복 레이아웃의 하위 메뉴 2의 상점 데이터

 

subSubItems 입력란(필드)에는 JSON 객체 배열이 텍스트로 저장됩니다. 하위 메뉴 2의 각 버튼에 대한 버튼 라벨과 링크를 정의합니다.

 

 

팁 :

최종 메뉴 버튼을 제품, 이벤트, 서비스 등을 표시하는 동적 페이지 또는 상점 제품 페이지에 연결할 수 있습니다. URL을 subSubItems 입력란(필드)의 JSON 객체에 붙여 넣습니다.

 

 

 

 

 

홈페이지 설정 (Set Up the Home Page)

홈페이지에서 다음을 추가했습니다.

- 주 메뉴(Main menu) : 버튼이 있는 반복 레이아웃

 

 

 

 

- 하위 메뉴 1(Submenu 1) :로드시 숨겨진 버튼과 주 메뉴 선택 (남성 또는 여성)을 나타내는 텍스트 요소가 있는 반복 레이아웃.

 

 

 

- 하위 메뉴 2(Submenu 2) :로드시 숨겨진 컨테이너 상자에 다음 요소가 포함되어 있습니다.

a. 제품별 각 선택 버튼이 있는 반복 레이아웃 상점

b. 브랜드별 각 선택 버튼이 있는 반복 레이아웃 상점

c. 이미지

 

 

 

코드 추가 (Add Code)

이 예제의 코드를 더 잘 이해하려면 아래 예제의 주석, 참고 및 설명을 사용합니다.

 

 

1단계 : 가져오기 및 전역 변수 (Step 1: Imports and Global Variables)

 

//-------------Imports-------------//
import wixData from 'wix-data';

//-------------Global Variables-------------//

//Number of Submenu 2 repeaters.
const subLevel2RepeaterCount = 2;

//Object containing all menu data from subTitles database collection.
let menuData;

 

 

 

subLevel2RepeaterCount 변수는 하위 메뉴 2에 있는 반복 레이아웃 수를 나타냅니다. 반복 레이아웃을 루프하여 데이터로 채울 때 이 변수를 나중에 사용합니다 (2 단계).

 

 

 

 

2단계 : 페이지가 로드될 때 (Step 2: When the Page Loads)

$w.onReady(async () => {
  //Get the menu data from the collection.
  menuData = await wixData.query("subTitles").find().then(result => result.items);

  //Set up each Submenu 2 repeater as it is loaded.
  for (let i = 1; i <= subLevel2RepeaterCount; i++) {
    $w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
      //Get the repeater button from its ID.
      const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
      //Set the item label.
      repeaterButton.label = itemData.label;
      //Set the item link.
      repeaterButton.link = itemData.url;
    });
  }
});

 

 

페이지가 로드되면 subTitles 컬렉션에서 하위 메뉴를 작성하는 데 필요한 모든 데이터를 얻습니다. 나중에 방문자의 메뉴 선택에 따라 이 데이터를 필터링합니다.

 

 

반복 레이아웃 채우기에 대한 참고사항 (Note on Populating Repeaters)

 

데이터로 반복 레이아웃을 채우는 과정은 2단계로 진행됩니다.

 

1. .data를 사용하여 반복 레이아웃의 데이터를 설정합니다. 그러면 data 배열에 새 ID가 있는 모든 항목에 대한 두 번째 단계가 트리거됩니다.

2. onItemReady 함수를 사용하여 새 항목의 데이터로 반복 레이아웃을 채웁니다.

 

이 예제에서는 두 가지 방법으로 반복 레이아웃에 데이터를 로드합니다.

 

- 하위 메뉴 1(Submenu 1) : 속성 패널 (3단계 및 6단계)을 사용하여 onItemReady 이벤트 핸들러를 반복 레이아웃에 연결하는보다 간단한 방법을 사용합니다.

- 하위 메뉴 2(Submenu 2) : 하나 이상의 반복 레이아웃이 있기 때문에 루프를 사용하여 반복 레이아웃을 채우고 루프 내에서 onItemReady를 호출합니다 (위의 7번 라인 참조). 이 코드는 onReady 함수에 있지만 하위 메뉴 2 반복 레이아웃의 데이터가 설정될 때만 트리거됩니다 (8단계).

 

 

 

 

 

3단계 : 메인 메뉴 버튼 클릭 (Step 3: Main Menu Button Clicked)

//Set actions that occur when the main menu button is clicked.
export function buttonMainMenu_click(event) {
    $w("#title").show();
    $w("#title").text = event.target.label
 $w("#boxSubSubMenu").hide();
 //Get the ID of the clicked main menu button.
 const selectedMainMenuId = event.context.itemId;
 //Get all the data of the Submenu 1 related to the main menu selection.
 const repeaterData = menuData.filter(item => item.menu === selectedMainMenuId);
 //Set the data to the Submenu 1 repeater.
 $w('#repeaterSubLevelOne').data = repeaterData;
 //Show the repeater of Submenu 1.
 $w('#repeaterSubLevelOne').show();
}

 

 

 

이 이벤트 핸들러에서 event.target 및 event.context를 사용하여 Main 메뉴에서 방문자의 선택에 따라 정보를 수집하고 사용합니다.

 

그런 다음 자바스크립트(JavaScript) 필터 함수를 사용하여 클릭한 버튼의 ID를 기반으로 menuData 객체를 필터링합니다. menuData는 subTitles 컬렉션의 모든 데이터를 포함합니다.

 

필터링된 데이터를 사용하여 하위 메뉴 1의 라벨을 로드합니다. 11행의 반복 레이아웃에 대한 데이터를 설정하여 6단계에서 onItemReady 이벤트 핸들러를 트리거합니다.

 

 

 

 

4단계 : 하위 메뉴 1 위로 마우스 올리기 (Step 4: Hover over Submenu 1 Button)

//Set an action that occurs when the mouse hovers over a Submenu 1 button.
export function buttonSub_mouseIn(event) {
 //Get the ID of the Submenu 1 button the mouse hovers over.
 const selectedRootId = event.context.itemId;
 //Get all the data of the Submenu 2 related to Submenu 1.
 const repeaterData = menuData.filter(item => item._id === selectedRootId)[0];
 //Set up the box element corresponding to the selected button in Submenu 2.
 setSubSubMenu(repeaterData); 
 //Show the Submenu 2 box.
 $w('#boxSubSubMenu').show();
    }

 

 

 

여기서는 3단계와 비슷한 코드를 실행합니다. 한 가지 차이점은 하위 메뉴 2에 2개의 반복 레이아웃이 있으므로 데이터를 사용하여 반복 레이아웃을 로드하는 루프를 실행해야한다는 것입니다. 이를 위해 setSubSubMenu 함수를 호출합니다 (8단계).

 

 

 

 

5단계 : 하위 메뉴 숨기기 2 마우스가 멀리 움직일 때 (Step 5: Hide Submenu 2 When Mouse Moves Away)

//Set an action that occurs when the mouse pointer is moved away from the Submenu 2 box.
export function boxSubSubMenu_mouseOut(event) {
 $w('#boxSubSubMenu').hide();
}

 

 

 

방문자가 하위 메뉴 2 컨테이너 상자에서 마우스를 움직이면 하위 메뉴가 숨겨집니다.

 

 

 

 

6단계 : 하위 메뉴 채우기 1 반복 레이아웃 (Step 6: Populate Submenu 1 Repeater)

 

//Set up each item in the Submenu 1 repeater as it is loaded.
export function repeaterSubLevelOne_itemReady($item, itemData, index) {
 $item('#buttonSub').label = itemData.subTitles;
}

 

 

 

이 onItemReady 이벤트 핸들러는 하위 메뉴 1 반복 레이아웃의 데이터가 3단계에서 설정되면 트리거됩니다.

 

 

 

 

7단계 : 하위 메뉴에 대한 고유 ID 만들기 2 반복 레이아웃 항목 (Step 7: Create a Unique ID for Submenu 2 Repeater Items)

 

//-------------Utility Functions for Repeater Setup-------------//

function createUniqueId() {
 //Creating a Unique Id for each of the menu sub-items by getting the current millisecond and adding a random number from 1 to 1000
 let id = String(+new Date() + Math.floor(Math.random() * 1000))
 return id;
}

 

 

반복 레이아웃에 데이터를 로드할 때 현재 반복되는 데이터 객체 배열에 _id 값이 없는 객체에 대해서만 새로운 반복 항목이 작성됩니다. ID가 있는 항목만 반복 레이아웃을 채울 것이므로 자바스크립트(JavaScript) 날짜 및 수학 함수를 사용하여 각각의 하위 메뉴 2 항목에 대한 고유한 ID를 만듭니다. 이 함수는 8단계에서 사용됩니다.

 

 

 

 

8단계 : 서브 메뉴 2 설정 (Step 8: Set Up Submenu 2)

function setSubSubMenu(repeaterData) {
 //Set the image of the Submenu 1
 $w('#image1').src = repeaterData.img1;
 for (let i = 1; i <= subLevel2RepeaterCount; i++) {
  //Convert the Submenu 2 string to a Javascript object.
  const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
  //Set a unique ID for each item.
  dataSubSub.forEach(subSubItem => {
   subSubItem._id = createUniqueId();
  })
  //Set the Submenu 2 data in the repeater.
  $w(`#repeaterSubSub${i}`).data = dataSubSub;
 }
}

 

 

마지막 서브 메뉴를 설정합니다.

 

이 함수는 매개 변수로 repeaterData를 사용하며 이 매개 변수는 방문자의 이전 선택에 따라 필터링된 subTitles 컬렉션의 데이터입니다.

 

이 함수는 다음을 수행합니다.

 

1. 하위 메뉴 2의 이미지를 설정합니다.

2. 루프에서 subSubItems JSON 객체를 자바스크립트(JavaScript) 객체로 변환하여 코드에서 사용할 수 있도록합니다.

3. 하위 메뉴 2의 각 항목에 고유한 ID를 만들려면 createUniqueId 함수 (7단계)를 호출합니다.

4. 하위 메뉴 2 반복 레이아웃에 대한 데이터를 설정합니다. 그러면 2단계에서 onItemReady 함수가 트리거되고 하위 메뉴 2 반복 레이아웃이 채워집니다.

 

 

 

 

 

 

다음 단계 (Next Steps)

- 이 예제를 에디터에서 열어서 템플릿 작업을 합니다.

- 추가 정보 :

a. 동영상 : 반복 레이아웃을 추가하고 사용하는 방법

b. 예제 : 계단식 양식 (Cascading Form)

c. API 참조 : 반복 레이아웃 (Repeaters)

d. API 참조 : 이벤트 (Events)

e. API 참조 : 데이터 쿼리 (Query data)

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-an-expanding-mega-menu