使用「快速檢視」建立自訂快顯視窗

在電子商務體驗中使用預設的Quickview，以便顯示包含產品資訊的快顯視窗來推動購買。 不過，您可以觸發自訂內容以顯示在快顯視窗中。 根據您使用的檢視器，此功能可讓使用者按一下熱點、縮圖影像或影像地圖，以檢視資訊或相關內容。

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

  • 互動式影像（可點選的熱點）
  • 互動式視訊（視訊播放時可點選的縮圖影像）
  • 轉盤橫幅（可點選的熱點或影像地圖）

雖然每個檢視器的功能不同，但建立Quickview的程式在所有三個支援的檢視器上都相同。

使用Quickviews建立自訂快顯視窗

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

    您通常會在編輯資產時建立快速檢視，以便與您使用的檢視器搭配使用。

    您使用的檢視器 完成這些步驟以建立Quickview
    互動影像 將熱點添加到影像橫幅。
    互動影片 為視訊新增互動功能。
    輪播橫幅 將熱點或影像映射添加到橫幅。

  2. 取得檢視器內嵌程式碼，將檢視器整合在您的網站中。

    您使用的檢視器
    		 完成這些步驟，將檢視器與您的網站整合
    互動式影像 將互動式影像與您的網站整合。
    互動式視訊
    		 將互動式視訊與您的網站整合。
    轉盤橫幅 新增轉盤橫幅至您的網站頁面。

  3. 您使用的檢視器現在需要瞭解如何使用Quickview。

    若要這麼做，檢視器會使用名為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

    也從Quickview映射其他變數，如下所示：

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

    函式
    呼叫處理常式也需要函式呼叫，讓Quickview運作。您的主機頁面會假設該函式可存取。 內嵌代碼提供範例函式呼叫：

    loadQuickView(sku)

    示例函式調用假定函式loadQuickView()存在且可訪問。

    如需quickViewActivate方法的詳細資訊，請參閱：

  5. 請執行下列動作：

    • 取消對embed代碼的setHandlers部分的注釋。

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

      • 如果您要新增其他變數，請更新loadQuickView(sku,*var1*,*var2*)呼叫。

    • 在檢視器外部的頁面上建立簡單的loadQuickView()函式。

      例如，下列程式將sku值寫入瀏覽器主控台：

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

    • 將測試HTML頁面上傳至網頁伺服器並開啟。

      在映射了Quickview中的變數並就地調用了函式後，瀏覽器控制台使用提供的示例函式將變數值寫入瀏覽器控制台。

  6. 您現在可以使用函式來叫用Quickview中的簡單快顯視窗。 下列範例會針對快顯視窗使用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頁面上傳至您的網站伺服器並開啟。 當使用者叫用Quickview時，檢視器會顯示快顯視窗DIV。

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

    有些檢視器（例如互動式視訊檢視器）支援全螢幕模式顯示。 不過，如前述步驟所述，使用快顯功能會使它在全螢幕模式下顯示在檢視器後方。

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

    在初始化檢視器後，會呼叫initComplete處理器。

    "initComplete":function() { code block }

    如需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()呼叫檢視器。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now