윅스 (Wix) 코딩 예제 - 코딩으로 동적 항목 페이지의 이전 및 다음 버튼 만들기 (Wix Code Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code)

윅스 (Wix) 코딩 예제 - 코딩으로 동적 항목 페이지의 이전 및 다음 버튼 만들기 (Wix Code Tutorial: Creating Previous and Next Buttons for a Dynamic Item Page with Code)

 

 

 

설명)

 

이전 버튼과 다음 버튼을 동적 페이지에 추가하려면 두 개의 버튼을 추가하고 페이지의 데이터세트에 연결하고 일반 페이지에서와 같이 Actions 목록에서 Previous 및 Next를 선택해야합니다. 하지만 아직 작동하지 않습니다.

 

왜 작동하지 않는지 이해하려면 동적 항목 페이지의 작동 방식에 대해 약간 이해해야합니다. 동적 항목 페이지는 페이지에 도달하는 데 사용된 URL의 동적 섹션을 사용하여 표시할 항목을 결정합니다. 페이지가 로드되면 적절한 항목을 데이터베이스에서 가져와 페이지의 동적 데이터세트를 통해 페이지에 액세스할 수 있습니다. 항목 페이지이므로 데이터세트에 항목이 하나만 있습니다. 따라서 데이터세트의 이전 및 다음 작업을 사용하여 탐색할 "이전" 또는 "다음"항목이 없습니다.

 

이 글에서는 코드를 사용하여 동적 항목 페이지의 이전 및 다음 버튼을 만드는 방법을 보여줍니다. 두 페이지에 코드를 추가하면됩니다. 첫째, 사용자가 동적 항목 페이지에 도달하는 데 사용하는 색인 ​​페이지에서 모든 관련 항목 페이지 링크를 저장하는 코드를 추가합니다. 그런 다음 동적 항목 페이지에서 링크를 검색하고 페이지에 추가할 이전 및 다음 버튼에서 사용하는 코드를 추가합니다.

 

이 글에서는 인덱스 페이지를 사용하여 컬렉션 중 하나의 여러 항목을 단일 페이지에 표시한다고 가정합니다. 사용자는 색인 페이지의 항목 중 하나를 선택하여 관련 동적 항목 페이지에 도달합니다. 항목 페이지의 이전 항목과 다음 항목의 순서는 사용자가 출현한 색인 페이지에 의해 결정됩니다.

 

 

노트 :

getPreviousDynamicPage( ) 및 getNextDynamicPage( ) 함수 또는 이전 동적 페이지 및 다음 동적 페이지 데이터세트 작업을 사용하여 동적 항목 페이지에서 이전 및 다음 버튼을 만들 수도 있습니다. 그러나 이러한 기능을 사용할 때는 항목 순서를 제어할 수 없습니다.

 

 

 

 

색인 페이지 (Index Page)

색인 페이지는 일반 페이지 또는 동적 카테고리 페이지일 수 있습니다. 두 경우 모두 페이지에는 컬렉션에 연결된 데이터세트와 각 항목을 동적 항목 페이지에 연결하도록 설정된 표(Table) 또는 갤러리가 있습니다.

 

동적 항목 페이지에서 이전 및 다음 버튼을 만들려면 색인 페이지를 전혀 변경할 필요가 없습니다. 우리는 뒤에서 작동할 코드를 추가하기만하면됩니다.

 

 

노트 :

동적 항목 페이지의 이전 항목과 다음 항목의 순서는 색인 페이지의 데이터세트 정렬 순서에 따라 결정됩니다.

 

 

인덱스 페이지에 추가할 코드는 다음과 같습니다. (The code we will add to the index page does the following) :

- 데이터세트에서 컬렉션 항목을 검색합니다.

- 각 항목에 대한 동적 항목 페이지의 상대 URL을 가져옵니다.

- 나중에 사용할 수 있도록 사용자의 로컬 브라우저 저장소에 URL을 저장합니다.

 

코드 패널의 페이지탭에 있는 인덱스 페이지에 다음 코드를 추가합니다.

 

import {local} from 'wix-storage';

const linkField = "link-to-item"; // replace this value

$w.onReady(function () {
  $w("#myDataset").onReady(() => {
    const numberOfItems = $w("#myDataset").getTotalCount();
  
    $w("#myDataset").getItems(0, numberOfItems)
      .then( (result) => { 
        const dynamicPageURLs = result.items.map(item => item[linkField]);
        local.setItem('dynamicPageURLs', dynamicPageURLs);
      } )
      .catch( (err) => {
        console.log(err.code, err.message);
      } );
  } );
} );

 

 

 

 

노트 :

위의 코드를 최적화하는 방법은 아래 부록을 참조합니다.

 

 

이 코드가 특정 상황에 맞는지 확인하려면 두 가지 작업을 수행해야합니다.

 

첫째, 이 코드는 페이지의 데이터세트에 myDataset이라는 ID가 있다고 가정합니다. 해당 ID가없는 경우 데이터세트의 ID를 myDataset으로 변경하거나 "#myDataset"이 표시된 코드를 변경하여 데이터세트의 실제 ID를 반영해야합니다. 요소를 선택하고 속성 패널에서 ID 입력란(필드)를 편집하여 요소의 ID를 변경할 수 있습니다.

 

둘째, 이 코드는 컬렉션에서 동적 항목 페이지로의 URL을 가져와야합니다. 해당 입력란(필드)의 입력란(필드) 키가 모든 상황에 따라 다르므로 적절한 입력란(필드) 키를 반영하도록 코드를 편집해야 합니다.

 

 

이 줄에

const linkField = "link-to-item"; // replace this value

 

큰 따옴표 안의 값을 올바른 입력란(필드) 키로 변경합니다.

 

 

동적 페이지를 추가할 때마다 해당 페이지의 상대 URL을 사용하여 컬렉션에 입력란(필드)가 자동으로 만들어집니다. 데이터 관리자에서 이전 및 다음 버튼을 추가할 동적 항목 페이지의 URL이 있는 입력란(필드)를 찾아야합니다.

 

컬렉션 입력란(필드)의 입력란(필드) 키를 찾으려면 에디터에서 데이터 관리자의 입력란(필드) 위로 마우스를 가져갈 때 나타나는 수직 타원을 클릭하고 속성 관리를 선택합니다. 입력란(필드) 이름이 아닌 입력란(필드) 키를 사용해야합니다.

 

 

중요 :

이 코드는 데이터세트의 모든 항목에 대한 URL을 가져옵니다. 매우 큰 컬렉션을 사용하는 경우, 데이터세트에서 검색된 항목의 수를 제한하고자 할 수 있습니다.

 

 

노트 :

동일한 동적 항목 페이지로 연결되는 인덱스 페이지가 두 개 이상인 경우이 코드를 각 페이지에 추가해야합니다.

 

 

 

 

항목 페이지 (Item Page)

동적 항목 페이지에서 두 개의 버튼을 페이지에 추가하는 것으로 시작합니다. 버튼의 디자인과 텍스트는 자유롭게 변경하고 버튼에 대한 링크는 추가하지 않습니다.

 

동적 항목 페이지에 추가할 코드는 다음과 같습니다.

- 이전 및 다음 버튼 비활성화합니다.

- 사용자의 로컬 브라우저 저장소에 저장된 URL을 검색합니다.

- 현재 페이지의 URL을 검색합니다.

- 모든 URL 목록에서 현재 페이지 URL의 위치를 ​​가져옵니다.

- "이전" 페이지에 대한 URL이 있으면 이전 버튼의 링크를 해당 URL로 설정하고 이전 버튼을 활성화합니다

- "다음" 페이지에 대한 URL이 있으면 해당 URL에 다음 버튼의 링크를 설정하고 다음 버튼을 활성화합니다

 

코드 패널의 페이지탭에 있는 동적 항목 페이지에 다음 코드를 추가합니다.

 

import {local} from 'wix-storage';
import wixLocation from 'wix-location';

$w.onReady(function () {
  $w("#previous").disable();
  $w("#next").disable();
 
  if (local.getItem('dynamicPageURLs')) {
    const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');

    const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');
    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);

    if (currentPageIndex > 0) {
      $w("#previous").link = dynamicPageURLs[currentPageIndex - 1];
      $w("#previous").enable();
    }

    if (currentPageIndex < dynamicPageURLs.length - 1) {
      $w("#next").link = dynamicPageURLs[currentPageIndex + 1];
      $w("#next").enable();
    }
  }
} );

 

 

 

노트 :

위의 코드를 최적화하는 방법은 아래 부록을 참조합니다.

 

 

 

 

이 코드는 버튼의 전후에 ID가 있다고 가정합니다. 버튼에 ID가 없는 경우 버튼의 ID를 이전 및 다음으로 변경하거나 "#previous"및 "#next"라고 표시된 부분의 코드를 변경하여 버튼의 실제 ID를 반영해야합니다. 요소를 선택하고 속성 패널에서 ID 입력란(필드)을 편집하여 요소의 ID를 변경할 수 있습니다.

 

 

 

고급 : 저장 유형 (Advanced: Storage Type)

위 코드 스니펫에서는 브라우저의 저장소를 사용하여 페이지간에 정보를 전달합니다. wix-storage API를 사용하여 액세스할 수 있는 두 가지 유형의 브라우저 저장소가 있습니다. 이 글에서는 로컬 스토리지를 사용합니다. 대신 세션 저장소를 사용하려면 두 코드 스니펫의 가져오기 명령문을 적절히 변경해야합니다. 자세한 내용은 API 참조 설명서의 wix-storage를 참조합니다.

 

 

API 목록 (API List)

다음 API는 이 글의 코드에서 사용된다. 자세한 내용은 API 참조 문서를 참조합니다.

$w

- $w.onReady( ) - 모든 페이지 요소의 로드가 완료될 때 실행되는 함수를 설정합니다.

$w.Button

- $w.Button.disable( ) - 요소를 비활성화합니다.

- $w.Button.enable( ) - 요소를 활성화합니다.

- $w.Button.link - 요소의 링크를 설정하거나 가져옵니다.

wix-dataset

- wix-dataset.getItems( ) - 데이터세트에서 선택한 항목을 반환합니다.

- wix-dataset.getTotalCount( ) - 필터 조건과 일치하는 데이터세트의 항목 수를 반환합니다.

- wix-dataset.onReady( ) - 데이터세트가 준비될 때 실행되는 이벤트 핸들러를 추가합니다.

wix-location

- wix-location.prefix - 페이지 URL의 접두사를 가져옵니다.

- wix-location.path - 페이지 URL의 경로를 가져옵니다.

- wix-location.to( ) - 브라우저가 지정된 URL을 탐색하도록 지시합니다.

wix-storage

- wix-storage.getItem( ) - 로컬 또는 세션 저장소에서 항목을 가져옵니다.

- wix-storage.setItem( ) - 로컬 또는 세션 저장소에 항목을 저장합니다.

wix-window

- wix-window.rendering.env - 렌더링 환경을 가져옵니다.

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code