윅스 (Wix) 코딩 예제 - 모바일에서만 요소 표시하기 (Wix Code Tutorial: Displaying Elements in Mobile Only)

윅스 (Wix) 코딩 예제 - 모바일에서만 요소 표시하기 (Wix Code Tutorial: Displaying Elements in Mobile Only)

 

 

 

설명)

 

윅스 코드(Wix Code)를 사용하여 요소를 제어하여 사이트의 모바일 버전에만 표시되도록 할 수 있습니다.

 

모바일에서만 표시되도록 요소를 설정하는 기본 단계 (The basic steps to set up an element to display only in mobile are) :

 

1. 페이지가 로드될 때 숨겨지도록 요소를 설정합니다.

2. 코드를 사용하여 모바일 장치 또는 데스크톱 장치에서 사이트를 보고 있는지 확인합니다.

3. 모바일 장치에서 사이트를 보고있는 경우 코드를 사용하여 숨겨진 요소를 표시합니다.

 

 

윅스 코드(Wix Code)/코딩 예제

모바일에서만 표시할 요소를 설정하기 (To set up an element to display only in mobile) :

1. 개발자 도구를 켜고 등록 정보 패널이 표시되는지 확인합니다.

 

 

 

2. 모바일에만 표시하려는 요소를 추가합니다.

3. 요소를 선택하고 속성 패널에서 로드시 숨김 체크박스를 선택합니다. 그러면 페이지가 로드될 때 이 요소가 표시되지 않도록 요소가 설정됩니다. 잠시 후에 사용해야 하니, 요소를 IDfor로 기록해둡니다. 

 

 

 

4. 이제 사이트가 모바일 장치에서 잘보이고 있는지 확인해야합니다. 코드 패널이 열려있지 않으면 페이지 하단의 페이지 코드 헤더를 클릭합니다. 그러면 코드 패널이 열립니다.

 

 

 

5. 코드 패널에서 다음 코드가 이미 작성되었음을 알 수 있습니다.

 

$w.onReady(function () {
 //TODO: write your page related code here...
});

 

 

 

6. 첫 번째 줄 위에 한 줄을 추가하고 다음 코드를 입력합니다. 이를 통해 사이트가 wix-window 모듈과 작동하게하여 사이트가 표시되는 장치 유형을 결정할 수 있습니다.

 

import wixWindow from 'wix-window';

 

 

 

7. // TODO : write your page related code here...를 다음 코드로 대체합니다. 이렇게하면 사이트가 표시되는 기기의 유형이 확인됩니다. 그런 다음 로드시 숨김으로 설정한 요소를 모바일 전용으로 표시되도록 설정합니다.

 

if(wixWindow.formFactor === "Mobile"){
  $w("#button8").show();
}

 

 

8. 위의 2행에는 "#button8"에 대한 참조가 있으며 코드는 해당 요소를 숨길 수 있도록 설정합니다. 표시하려는 요소는 아마도 button8이라는 이름이 아니므로 이 코드를 수정하여 페이지에서 작동하게 해야합니다.

 

이 코드를 요소와 함께 사용하려면 button8을 3단계에서 적어둔 요소의 ID로 바꿉니다.

 

 

 

9. 끝나면 코드는 다음과 같이 보일 것입니다 :

 

import wixWindow from 'wix-window';

$w.onReady(function () {
 if(wixWindow.formFactor === "Mobile"){
  $w("#your_element's_ID").show();
 }
});

 

 

10. 모바일에서만 표시할 요소가 두 개 이상인 경우 :

a. 각 요소에 대해 3단계를 완료합니다.

b. 위의 예에서 4번 줄 다음에 한 줄을 추가합니다.

c. 4번 줄을 복사하여 새 줄에 붙여 넣습니다.

d. 첫 번째 요소의 ID를 두 번째 요소의 ID로 바꿉니다.

 

이제 코드는 다음과 같아야합니다.

 

import wixWindow from 'wix-window';

$w.onReady(function () {
 if(wixWindow.formFactor === "Mobile"){
  $w("#your_first_element's_ID").show();
  $w("#your_second_element's_ID").show();        
 }
});

 

 

 

 

부록 : 렌더링 최적화 (Appendix: Rendering Optimization)

 

때로는 사이트의 로딩 성능을 향상시키기 위해 사이트에서 서버측 렌더링을 시작하는 경우가 있습니다. 이로 인해 onReady( ) 함수가 두 번 실행됩니다. 불필요하게 작업을 한 번 이상 수행하지 않도록 코드를 최적화할 수 있습니다. 페이지 렌더링 프로세스에 대한 자세한 내용은 여기를 참조합니다.

 

이 예제에 최적화된 코드는 다음과 같습니다.

 

import wixWindow from 'wix-window';

$w.onReady( function () {
  if(wixWindow.formFactor === "Mobile" &&
    wixWindow.rendering.renderCycle === 1) {
      $w("#your_first_element's_ID").show();
      $w("#your_second_element's_ID").show();         
  }
} );

 

 

 

API 목록 (API List)

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

- wix-window

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-displaying-elements-in-mobile-only