윅스 (Wix) 코딩 예제 - 재생 동영상이 없을 경우 동영상 플레이어 숨기기 (Wix Code Tutorial: Hiding a Video Player When There Is No Video to Play)

윅스 (Wix) 코딩 예제 - 재생 동영상이 없을 경우 동영상 플레이어 숨기기 (Wix Code Tutorial: Hiding a Video Player When There Is No Video to Play)

 

 

 

설명)

 

동영상 플레이어 요소를 컬렉션의 URL 입력란(필드)에 연결하면 페이지를 볼 때 플레이어가 관련 동영상를 표시합니다. 특정 항목에 대한 URL이 없으면 동영상 플레이어는 소셜미디어 동영상 설정 패널에 정의된 기본 동영상를 표시합니다.

 

동영상을 재생하지 않으려는 경우 컬렉션에 있는 항목에 URL이 없는 경우 자동으로 동영상 플레이어를 숨길 수 있습니다. 이 예제에서는 윅스 코드(Wix Code)를 사용하여 이 작업을 수행하는 방법을 보여줍니다.

 

이 예제는 두 부분으로 구성됩니다.

- 복사하여 페이지에 붙여 넣을 수 있는 코드를 포함하여 설정 방법에 대한 지침

- 각 코드 행이 하는 일에 대한 설명

 

 

숨기는 방법 (Instructions)

시작하기 전에 (Before you begin) :

동영상 위치를 저장하는 "URL" 유형의 입력란(필드)가 있는 컬렉션이 있는지 확인합니다. URL 입력란(필드)가 비어있는 항목이 하나 이상 있어야합니다.

 

 

1. 페이지에 데이터세트를 추가하고 컬렉션에 연결합니다.

2. 동영상 플레이어를 추가하고 URL 입력란(필드)에 연결합니다.

3. 페이지의 코드 패널을 엽니다 (맨 아래에서 끌어 올 수 있습니다). 거기에 나타나는 기본 코드를 삭제할 수 있습니다.

4. 아래 코드를 복사하여 코드 패널의 페이지 탭에 붙여 넣습니다.

 

$w.onReady(() => {
    $w("#myDataset").onReady(() => {
  // Gets the current item properties and stores them in a variable called item
        const item = $w("#myDataset").getCurrentItem();
        // Checks if the current item has a value in the "video" field
        if (!item.video) {
        // Collapses the video player if there is no value for "video"
            $w("#videoPlayer").collapse();
        }
    });
});

 

 

5. 다음의 것들을 바꿉니다.

- #myDataset : 데이터세트의 ID (ID가 표시되도록 마우스를 올려 놓습니다.)

- video : 동영상 URL을 저장하는 컬렉션 입력란(필드)의 입력란(필드) 키

- #videoPlayer : 동영상 플레이어의 ID (ID를 보려면 마우스를 올려 놓습니다.)

 

6. URL이 없는 항목에 대한 페이지를 미리보고 동영상 플레이어가 표시되지 않는지 확인합니다.

 

 

 

 

코드 이해하기 (Understanding the Code)

이 섹션에서는 코드의 주요 행을 설명합니다. 각 함수에는 wix-dataset API에서보다 자세한 설명에 대한 링크가 있습니다.

 

1행은 onReady( ) 함수를 호출합니다. 이것은 페이지 로드가 끝날 때 실행할 코드를 정의합니다.

 

$w.onReady(() => {

 

2행은 dataset onReady( ) 함수를 호출합니다. 이는 데이터세트가 현재 항목에 대한 모든 정보를 로드한 후에 실행할 코드를 정의합니다.

 

$w("#myDataset").onReady(() => {

 

 

4행은 item이라는 변수를 정의한 다음 해당 값을 getCurrentItem( ) 함수가 반환한 객체로 설정합니다.

 

const item = $w("#myDataset").getCurrentItem();

 

 

이 객체에는 현재 항목의 속성 (입력란(필드))과 해당 값이 들어 있습니다. 주어진 항목이 현재 항목에서 비어있는 경우 객체에는 해당 속성이 포함되지 않습니다.

 

6행은 이전 행의 item 변수에 동영상 URL (동영상 URL을 저장하는 컬렉션의 video 입력란(필드))이 포함되어 있는지 확인합니다.

 

if (!item.video) {

 

 

현재 항목의 video 입력란(필드)가 비어 있으면 해당 입력란(필드)는 이전 행의 getCurrentItem에 의해 반환된 객체에 포함되지 않습니다.

 

8행은 video 입력란(필드)가 비어있는 경우 동영상 플레이어를 축소합니다.

 

$w("#videoPlayer").collapse();

 

 

video 입력란(필드)가 비어 있지 않으면 이 행이 실행되지 않습니다. 동영상 플레이어는 이 항목에 대한 컬렉션에 정의된 URL에 동영상을 표시하기 위해 계속 표시됩니다.

hide( ) 함수를 사용하여 동영상 플레이어를 숨기는 대신 숨길 수도 있습니다.

 

 

 

 

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-hiding-a-video-player-when-there-is-no-video-to-play