使用Quickviews建立自訂快顯視窗

預設的「快速檢視」用於電子商務體驗,其中會顯示包含產品資訊的快顯視窗以促進購買。 不過,您可以觸發自訂內容以顯示在快顯視窗中。 根據您使用的檢視器,此功能可讓使用者按一下熱點、縮圖影像或影像地圖,以查看資訊或相關內容。

Dynamic Media中的下列檢視器支援快速檢視:

  • 互動式影像(可點按的熱點)
  • 互動式視訊(視訊播放期間可點按縮圖影像)
  • 轉盤橫幅(可點按的熱點或影像地圖)

雖然每個檢視器的功能有所不同,但在所有三個支援的檢視器中,建立「快速檢視」的程式都相同。

要使用Quickviews建立自定義彈出窗口,請執行以下操作:

  1. 為已上傳的資產建立快速檢視。

    您通常會在編輯資產以用於使用的檢視器時建立快速檢視。

    您使用的檢視器 完成下列步驟以建立快速檢視
    互動影像 將熱點添加到影像橫幅
    互動影片 為影片新增互動功能
    輪播橫幅 將熱點或影像映射添加到橫幅
  2. 取得檢視器內嵌程式碼,以整合您網站中的檢視器。

    您使用的檢視器
    完成下列步驟將檢視器與您的網站整合
    互動式影像 將互動式影像與您的網站整合
    互動式視訊
    將互動式視訊與您的網站整合
    輪播橫幅 新增轉盤橫幅至您的網站頁面
  3. 您現在使用的檢視器必須知道如何使用「快速檢視」。

    為此,檢視器使用名為QuickViewActive的處理常式。


    範例假設您在網頁上使用下列範例內嵌程式碼,用於互動式影像:

    chlimage_1-291

    處理常式會使用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()方法的詳細資訊,請前往下列網址:

  4. 您現在需要配置quickViewActivate處理程式。

    quickViewActivate處理常式控制查看器中的Quickviews。 處理常式包含變數清單和函式呼叫,以便與Quickview搭配使用。 內嵌程式碼提供在Quickview中設定的SKU變數對應,以及loadQuickView函式呼叫範例。


    在網頁中使用的變數mappingMap變數,與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方法:

  5. 請執行下列動作:

    • 取消對內嵌程式碼的setHandlers區段的註解。

    • 映射Quickview中包含的任何其他變數。

      • 如果您要新增其他變數,請更新loadQuickView(sku,*var1*,*var2*)呼叫。
    • 在檢視器外部的頁面上建立簡單的loadQuickView()函式。

      例如,下列項目會將sku的值寫入瀏覽器主控台:

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • 將測試HTML頁面上傳至Web伺服器並開啟。

      將Quickview中的變數對應並設定函式呼叫後,瀏覽器主控台會使用提供的範例函式,將變數值寫入瀏覽器主控台。

  6. 您現在可以使用函式叫用快速檢視中的簡單快顯視窗。 下列範例使用DIV作為快顯視窗。

  7. 按以下方式設定彈出窗口DIV的樣式。 視需要新增您自己的其他樣式。

    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. 將快顯視窗DIV放置在HTML頁面內文中。

    其中一個元素的ID是設定的,當用戶調用Quickview時,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>
    
  9. 新增函式以更新快顯視窗中的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 popup
        }
    </script>
    
  10. 將測試HTML頁面上傳至您的Web伺服器並開啟。 當用戶調用Quickview時,查看器將顯示彈出窗口DIV

  11. 如何以全螢幕模式顯示自訂快顯視窗

    有些檢視器(例如互動式視訊檢視器)支援以全螢幕模式顯示。 不過,如前述步驟所述,使用快顯視窗會使其在全螢幕模式中顯示在檢視器後面。

    若要在標準和全螢幕模式中顯示快顯視窗,請將快顯視窗附加至檢視器容器。 要完成此操作,可以使用第二個處理程式方法initComplete

    在查看器初始化後調用initComplete處理器。

    "initComplete":function() { code block }
    

    如需init()方法的詳細資訊,請前往下列網址:

    • 互動式影像檢視器 — init
    • 互動式視訊檢視器 — init
  12. 若要將快顯視窗(如前述步驟所述)附加至檢視器,請使用下列程式碼:

    "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中移除。
    • 已識別檢視器容器。
    • 將快顯視窗附加至檢視器容器。
  13. 您的整個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);
        }
    });
    
  14. 載入處理程式後,您會初始化檢視器:

    *viewerInstance.*init()


    範例此範例使用互動式影像檢視器。

    s7interactiveimageviewer.init()

    將查看器嵌入到主機頁後,請確保已建立查看器實例並載入處理程式,然後才使用init()調用查看器。

本頁內容