빠른 보기를 사용하여 사용자 정의 팝업 제작 using-quickviews-to-create-custom-pop-ups

업로드된 에셋에 대한 빠른 보기를 만듭니다.

일반적으로 빠른 보기는 사용 중인 뷰어와 함께 사용할 자산을 편집할 때 만듭니다.

웹 사이트 내에서 뷰어를 통합하려면 뷰어 포함 코드를 가져옵니다.

사용하는 뷰어는 빠른 보기를 사용하는 방법을 알고 있어야 합니다.

뷰어에서 QuickViewActive(이)라는 처리기를 사용합니다.

예
대화형 이미지에 다음 샘플 포함 코드를 웹 페이지에서 사용하고 있었다고 가정해 보십시오.

처리기가 setHandlers을(를) 사용하여 뷰어에 로드되었습니다.

*viewerInstance*.setHandlers({ *handler 1*, *handler 2*}, ...

위의 샘플 포함 코드 예제를 사용하면 다음 코드가 만들어집니다.

s7interactiveimageviewer.setHandlers({
    quickViewActivate": function(inData) {
        var sku=inData.sku;
        var genericVariable1=inData.genericVariable1;
        var genericVariable2=inData.genericVariable2;
       loadQuickView(sku,genericVariable1,genericVariable2);
    }
})

다음에서 setHandlers() 메서드에 대해 자세히 알아보세요.

• 대화형 이미지 뷰어 - sethandlers
• 대화형 비디오 뷰어 - sethandlers

이제 quickViewActivate 처리기를 구성하십시오.

quickViewActivate 처리기는 뷰어에서 빠른 보기를 제어합니다. 처리기에는 빠른 보기와 함께 사용할 변수 목록과 함수 호출이 포함되어 있습니다. 포함 코드는 빠른 보기에 설정된 SKU 변수에 대한 매핑을 제공합니다. 또한 샘플 loadQuickView 함수 호출도 수행합니다.

변수 매핑
웹 페이지에서 사용할 변수를 빠른 보기에 포함된 SKU 값 및 일반 변수에 매핑합니다.

var *variable1*= inData.*quickviewVariable*

제공된 포함 코드에는 SKU 변수에 대한 샘플 매핑이 있습니다.

var sku=inData.sku

다음과 같이 빠른 보기에서 다른 변수도 매핑합니다.

var <i>variable2</i>= inData.<i>quickviewVariable2</i>
 var <i>variable3</i>= inData.<i>quickviewVariable3</i>

함수 호출
처리기가 작동하려면 Quickview에 대한 함수 호출도 필요합니다. 함수는 호스트 페이지에서 액세스할 수 있는 것으로 간주됩니다. 포함 코드는 샘플 함수 호출을 제공합니다.

loadQuickView(sku)

샘플 함수 호출은 함수 loadQuickView()이(가) 있고 액세스할 수 있다고 가정합니다.

다음에서 quickViewActivate 메서드에 대해 자세히 알아보세요.

• 대화형 이미지 뷰어 - 이벤트 콜백
• 대화형 비디오 뷰어 - 이벤트 콜백
• 대화형 비디오 뷰어에서 대화형 데이터 지원 - 대화형 데이터 지원

다음 작업을 수행합니다.

• 포함 코드의 setHandlers 섹션의 주석 처리를 제거합니다.

• 빠른 보기에 포함된 모든 추가 변수를 매핑합니다.

  • 변수를 더 추가하는 경우 loadQuickView(sku,*var1*,*var2*) 호출을 업데이트하십시오.

• 뷰어 외부의 페이지에 간단한 loadQuickView() 함수를 만듭니다.

  예를 들어 다음 은 브라우저 콘솔에 SKU 값을 기록합니다.

function loadQuickView(sku){
    console.log ("quickview sku value is " + sku);
}

• 웹 서버에 테스트 HTML 페이지를 업로드하고 엽니다.

  빠른 보기의 변수가 매핑됩니다. 함수 호출이 있습니다. 그리고 브라우저 콘솔은 브라우저 콘솔에 변수 값을 기록합니다. 제공된 샘플 함수를 사용하여 이 작업을 수행합니다.

이제 함수를 사용하여 빠른 보기에서 간단한 팝업을 호출할 수 있습니다. 다음 예제에서는 팝업에 DIV을(를) 사용합니다.

다음과 같은 방법으로 팝업 DIV의 스타일을 지정합니다. 원하는 대로 스타일을 추가합니다.

<style type="text/css">
    #quickview_div{
        position: absolute;
        z-index: 99999999;
        display: none;
    }
</style>

팝업 DIV을(를) HTML 페이지의 본문에 넣습니다.

요소 중 하나는 사용자가 빠른 보기를 호출할 때 SKU 값으로 업데이트되는 ID로 설정됩니다. 이 예에는 팝업이 표시된 후 다시 숨길 수 있는 간단한 버튼도 포함되어 있습니다.

<div id="quickview_div" >
    <table>
        <tr><td><input id="btnClosePopup" type="button" value="Close"        onclick='document.getElementById("quickview_div").style.display="none"' /><br /></td></tr>
        <tr><td>SKU</td><td><input type="text" id="txtSku" name="txtSku"></td></tr>
    </table>
</div>

팝업 창에서 SKU 값을 업데이트하려면 함수를 추가합니다. 5단계에서 만든 간단한 함수를 다음과 같이 대체하여 팝업 창을 표시합니다.

<script type="text/javascript">
    function loadQuickView(sku){
        document.getElementById("txtSku").setAttribute("value",sku); // write sku value
        document.getElementById("quickview_div").style.display="block"; // show pop-up
    }
</script>

웹 서버에 테스트 HTML 페이지를 업로드하고 엽니다. 사용자가 빠른 보기를 호출하면 뷰어에 팝업 DIV이(가) 표시됩니다.

전체 화면 모드에서 사용자 지정 팝업 창을 표시하는 방법

대화형 비디오 뷰어와 같은 일부 뷰어는 전체 화면 모드의 표시를 지원합니다. 그러나 이전 단계에서 설명한 대로 팝업을 사용하면 전체 화면 모드에 있는 동안 뷰어 뒤에 팝업이 표시됩니다.

팝업 창을 표준 및 전체 화면 모드로 표시하려면 팝업 창을 뷰어 컨테이너에 첨부합니다. 이 경우 두 번째 처리기 메서드인 initComplete을(를) 사용합니다.

뷰어가 초기화된 후 initComplete 처리기가 호출됩니다.

"initComplete":function() { code block }

다음에서 init() 메서드에 대해 자세히 알아보세요.

• 대화형 이미지 뷰어 - init
• 대화형 비디오 뷰어 - init

이전 단계에서 설명한 팝업을 뷰어에 첨부하려면 다음 코드를 사용합니다.

"initComplete":function() {
    var popup = document.getElementById('quickview_div');
    popup.parentNode.removeChild(popup);
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup);
}

위의 코드에서 다음을 수행했습니다.

• 사용자 지정 팝업 창을 확인했습니다.
• DOM에서 제거했습니다.
• 뷰어 컨테이너를 식별했습니다.
• 팝업을 뷰어 컨테이너에 첨부했습니다.

전체 setHandlers 코드는 다음과 비슷합니다(대화형 비디오 뷰어가 사용됨).

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var sku=inData.sku;
        loadQuickView(sku);

    },
    "initComplete":function() {
        var popup = document.getElementById('quickview_div'); // get custom quick view container
        popup.parentNode.removeChild(popup); // remove it from current DOM
        var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId();
        var inner_container = document.getElementById(sdkContainerId);
        inner_container.appendChild(popup);
    }
});

처리기가 로드되면 뷰어를 초기화합니다.

*viewerInstance.*init()

예
이 예제에서는 대화형 이미지 뷰어를 사용합니다.

s7interactiveimageviewer.init()

뷰어를 호스트 페이지에 포함시킨 후에는 뷰어 인스턴스가 생성되었는지 확인합니다. 또한 init()을(를) 사용하여 뷰어를 호출하기 전에 처리기가 로드되었는지 확인하십시오.