윅스 (Wix) 코딩 예제 - 일회성 팝업 기능 만들기 (Wix Code Tutorial : Creating a One-Time Popup)

윅스 (Wix) 코딩 예제 - 일회성 팝업 기능 만들기 (Wix Code Tutorial : Creating a One-Time Popup)

 

 

 

설명)

 

이 글에서는 사용자가 처음으로 사이트를 방문할 때 나타나는 팝업을 만드는 방법을 보여줍니다. 팝업은 라이트박스이며 wix-storage API를 사용하여 현재 사용자가 팝업을 이미 보았는지 확인합니다.

 

팝업 (Popup)

먼저 라이트박스를 사이트에 추가합니다. 라이트박스를 추가하면 사이트 구조 사이드바의 라이트박스 섹션과 페이지 메뉴의 라이트박스 탭에 나타납니다.

 

우리가 코드를 사용하여 라이트박스를 특별히 열지 않으면 라이트박스가 나타나기를 원하지 않습니다. 라이트박스가 자동으로 열리지 않게하려면 라이트박스를 선택하고 트리거 설정 버튼을 클릭합니다. 라이트박스가 페이지에 자동으로 표시되지 않도록 설정합니다.

 

라이트박스가 선택된 상태에서 라이트박스 관리 버튼을 클릭하면 페이지 메뉴의 라이트박스 탭이 열립니다. 라이트박스를 선택하고 줄임표 (...)를 클릭한 다음 이름 바꾸기를 선택하고 라이트박스에 의미있는 이름을 지정합니다. 이 예제에서는 Lightbox Announcement의 이름을 지정합니다. 이름은 나중에 코드에서 라이트박스를 여는데 사용됩니다.

 

이제 사용자의 필요에 맞게 라이트박스를 디자인할 수 있습니다. 라이트박스에 포함된 요소를 추가, 삭제 및 수정할 수 있습니다. 라이트박스의 레이아웃과 디자인을 변경할 수도 있습니다.

 

 

코드 (Code)

코드는 다음 모델을 사용하여 작동합니다. 사용자가 사이트를 방문할 때마다 사용자의 브라우저 저장소에서 사용자가 처음 사이트를 방문할 때 설정한 플래그를 확인합니다. 플래그를 찾지 못하면 사이트를 처음 방문한 사용자임을 알 수 있습니다. 그래서 우리는 팝업을 보여주고 다음에 사용자가 사이트를 방문할 때 플래그를 설정합니다. 플래그를 발견하면 사용자가 사이트를 이미 방문했음을 알 수 있습니다. 그래서 우리는 팝업을 표시하지 않습니다.

 

다음 코드는 코드 패널의 사이트 탭에 추가됩니다. 사이트 코드는 모든 페이지에서 공유되므로 사이트 탭에 코드를 추가할 때 에디터에서 보고있는 페이지와 차이가 없습니다.

 

 

 

imports

이 예제에서 우리는 wix-storage API를 사용하여 사용자가 이미 팝업을 보았는지 여부를 알려주는 값을 저장합니다. wix-storage API는 사용자 브라우저의 저장 공간을 사용합니다. 또한 wix-window API를 사용하여 팝업으로 사용되는 라이트박스를 엽니다.

 

따라서 우리의 import 코드는 다음과 같습니다 :

 

import {session} from 'wix-storage';
import wixWindow from 'wix-window';

 

 

onReady( )

onReady( ) 이벤트 핸들러에서 firstTimePopupShown 키가 사용자의 브라우저 저장소에 있는지 확인합니다. 확인하고 설정하는 키의 이름은 중요하지 않습니다. 일관성을 유지하고 설정한 것과 동일한 키를 확인해야합니다.

키가 존재하지 않으면 라이트박스의 이름을 사용하여 라이트박스를 엽니다. firstTimePopupShown 키의 값을 설정하여 사용자가 다음 번에 사이트의 페이지를 방문할 때 키가 발견되도록 합니다.

따라서 onReady 코드는 다음과 같습니다.

 

$w.onReady(function () {
  // flag is not found
  if(!session.getItem("firstTimePopupShown")) {
    // open popup
    wixWindow.openLightbox("Announcement");
    // set flag for future visits
    session.setItem("firstTimePopupShown", "yes");
  }
} );

 

 

라이트박스에 Announcement 이외의 다른 이름을 지정한 경우 라이트박스의 이름을 반영하도록 위 코드를 편집해야 합니다.

 

노트 :

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

 

 

 

사용자 정의 (Customization)

이 예에서는 사용자가 단일 브라우징 세션에서 사이트의 어떤 페이지를 처음 방문할 때 나타나는 팝업을 만들었습니다. 사소한 조정을 통해 아래에 설명된 것과 다른 방식으로 동작하도록 예제를 사용자 정의할 수 있습니다.

 

 

 

세션 저장과 로컬 저장 (Session Storage vs. Local Storage)

이 예제에서는 사용자가 이미 팝업을 보았는지 알려주는 플래그를 보유하기 위해 세션 저장 공간을 사용했습니다. 세션 저장은 사용자의 웹 세션이 활성화되어있는한 계속 유지됩니다. 사용자가 브라우저 탭이나 창을 닫으면 세션이 종료됩니다. 즉, 세션 저장소를 사용하여 사용자가 처음으로 각 개별 세션의 사이트를 볼 때 팝업이 표시됩니다. 사용자가 브라우저 탭을 닫은 후 다른 탭에서 사이트를 다시 방문하면 팝업이 다시 표시됩니다.

 

사용자가 동일한 브라우저 탭에 있는지 또는 새 브라우저 탭에 있는지에 관계없이 팝업을 한 번만 표시하려면 로컬 저장소를 사용할 수 있습니다. 로컬 저장소는 사용자가 페이지를 닫더라도 만료되지 않습니다. 즉, 로컬 스토리지를 사용하여 사용자가 처음으로 사이트를 볼 때 팝업을 표시합니다. 사용자가 브라우저 탭을 닫은 후 다른 탭에서 사이트를 다시 방문하면 팝업이 다시 표시되지 않습니다.

 

세션 저장소 대신 로컬 저장소를 사용하도록 위의 코드를 변경하려면 모든 세션 인스턴스를 로컬로 변경합니다.

 

즉, 코드는 다음과 같아야합니다.

 

import {local} from 'wix-storage';
import wixWindow from 'wix-window';


$w.onReady(function () {
  if(!local.getItem("firstTimePopupShown")) {
    wixWindow.openLightbox("Announcement");
    local.setItem("firstTimePopupShown", "yes");
  }
} );

 

 

 

사이트탭과 페이지탭 (Site Tab vs. Page Tab)

이 예제에서는 코드 패널의 사이트탭에 코드를 배치했습니다. 사이트탭의 코드는 사이트의 모든 페이지에서 실행됩니다. 즉, 페이지가 어떤 페이지인지에 관계없이 사용자가 방문하는 첫 페이지에 팝업이 표시됩니다.

 

사용자가 사이트의 페이지 대신 처음 특정 페이지를 방문할 때 팝업이 나타나게하려면 위 코드를 코드 패널의 페이지탭에서 팝업으로 표시할 페이지로 이동합니다.

 

 

 

API 목록 (API List)

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

• wix-storage

• wix-window

 

 

 

연관된 토픽)

 

 

윅스 홈페이지 만들기 101

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

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

 

출처 :

https://support.wix.com/en/article/wix-code-tutorial-creating-a-one-time-popup