Wix 도움말 센터
    홈
  1. 사이트 제작
  2. 고급 기능
  3. CMS
  4. 사이트에 CMS 컬렉션 콘텐츠 연결하기
    5. CMS 기능요청: 동적 라이트박스

CMS 기능요청: 동적 라이트박스

기능요청|해당 기능에 대한 투표를 진행하고 있습니다.
현재는 라이트박스를 CMS 컬렉션에 연결해 동적으로 만들 수 없습니다. 하지만, 라이트박스에 추가된 요소를 CMS 컬렉션 콘텐츠에 연결해 요소(예: 텍스트, 이미지, 버튼)를 동적으로 만들 수는 있습니다.
Wix는 Wix가 제공하는 모든 서비스 및 제품을 개선하기 위해 노력하고 있으며, 모든 사용자 분들의 의견을 수렴하기 위해 최선을 다하고 있습니다.

임시 해결책

Velo를 사용하면 동적 아이템 페이지에서 열리는 라이트박스를 생성하고 라이트박스를 열었던 페이지에 표시된 것과 동일한 아이템을 표시할 수 있습니다.

예를 들어, 제공하는 서비스를 표시하는 동적 아이템 페이지가 있는 경우, 페이지의 버튼을 라이트박스에 연결할 수 있습니다. 라이트박스에서는 텍스트, 이미지, 버튼과 같은 요소를 동일한 컬렉션에 연결되는 데이터세트에 연결할 수 있습니다. 결과적으로 방문자가 동적 아이템 페이지의 버튼을 클릭하면 페이지에 표시된 동일한 아이템에 대한 추가 정보가 포함된 라이트박스가 열립니다. 
시작하기 전:
사이트에 다음이 포함되어 있는지 확인하세요.
Wix 에디터
Studio 에디터
  1. 에디터로 이동합니다.
  2. 관련 동적 아이템 페이지로 이동합니다. 
  3. Velo 개발자 모드를 활성화합니다. 
    1. 에디터 상단 개발자 모드를 클릭합니다. 
    2. 개발자 모드 활성화하기를 클릭합니다. 
  4. 아래의 코드를 복사해 페이지 코드 상단에 붙여넣습니다.
1import wixWindowFrontend from 'wix-window-frontend';
동적 아이템 페이지 코드 상단에 코드 스니펫을 추가하는 스크린샷
  1. 아래 코드 스니펫을 복사해 $w.onReady(function () { 다음에 붙여넣습니다.
1$w('#openLightbox').onClick(async () => { const item = await $w('#dynamicDataset').getCurrentItem(); const id = item._id; wixWindowFrontend.openLightbox("Dynamic Lightbox", id); })
2
동적 아이템 페이지의 코드에 두 번째 코드 스니펫을 붙여넣는 스크린샷
  1. 붙여넣은 샘플 코드에서 아래 나열된 ID를 사이트에서 사용하는 ID로 변경합니다.
    • openLightbox: 라이트박스를 여는 버튼의 ID로 변경합니다. 
    • dynamic Dataset 동적 페이지 데이터세트의 ID로 변경합니다.
    • Dynamic Lightbox: 라이트박스 이름으로 변경합니다.
코드에서 변경되어야 하는 ID 및 라이트박스 이름을 보여주는 스크린샷
  1. 에디터에서 라이트박스로 이동합니다. 
  2. 데이터세트를 추가하고 동적 아이템 페이지와 동일한 컬렉션에 연결합니다.
    1. 에디터 왼쪽에서 CMS를 클릭합니다.
    2. 콘텐츠 요소 추가를 클릭합니다. 
    3. 데이터세트를 클릭합니다.
    4. 컬렉션 선택 드롭다운을 클릭하고 동적 항목 페이지에 연결되는 동일한 컬렉션을 선택합니다. 
    5. 추가를 클릭합니다. 
  3. 데이터세트 설정에서 최대 표시 아이템 수 입력란을 클릭하고 숫자 1을 입력합니다.
  4. 라이트박스의 요소(예: 텍스트, 이미지, 버튼)를 데이터세트에 연결합니다.
    1. 라이트박스에서 관련 요소를 클릭합니다. 
    2. CMS에 연결 아이콘을 클릭합니다.
    3. 연결 아래에서 드롭다운을 클릭해 관련 컬렉션 입력란 또는 데이터세트 작업을 선택합니다. 
    4. 연결하고자 하는 라이트박스의 각 요소에 대해 이 단계를 반복합니다. 
  5. 아래의 코드 스니펫을 복사해 라이트박스 코드 상단에 붙여넣습니다. 
1import wixWindowFrontend from 'wix-window-frontend'; import wixData from 'wix-data';
라이트박스 코드 상단에 코드 스니펫을 붙여넣는 스크린샷
  1. 아래 코드 스니펫을 복사해 $w.onReady(function () { 다음에 붙여넣습니다.
1const getData = async () => { const id = await wixWindowFrontend.lightbox.getContext(); $w('#dataset1').setFilter(wixData.filter().eq('_id', id)); } getData();
위의 코드 스니펫을 라이트박스 코드에 추가하는 스크린샷
  1. 붙여넣은 샘플 코드에서 dataset1 을 라이트박스 데이터세트의 ID로 변경합니다. 
  2. 사이트 미리보기를 통해 기능을 테스트합니다. 
  3. 준비가 되면, 사이트를 게시합니다. 
참고: 계획된 기능 및 예상 시간을 포함한 모든 정보는 순수하게 정보를 제공하기 위한 것이며, Wix의 재량에 따라 언제든지 변경 또는 취소될 수 있습니다. 이는 향후의 기능 사용 가능 여부 또는 구현에 대한 약속, 책임, 보장을 나타내지 않으며 구매 결정을 내릴 때 이에 의존해서는 안 됩니다.

관련 게시물

Wix 에디터: 라이트박스 추가 및 설정하기