使用 Quickview 建立自訂快顯視窗 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 函式呼叫。

變數對應
將網頁中使用的變數對應至Quickview中包含的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頁面內文中。

其中一個元素是以ID設定，當使用者叫用快速檢視時，ID會以SKU值更新。 此範例也包含簡單按鈕，可在快顯視窗顯示後再次隱藏快顯視窗。

<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().