文件AEM 6.5使用手冊

使用 Quickview 建立自訂快顯視窗 using-quickviews-to-create-custom-pop-ups

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • 使用者
  • 管理員

預設快速檢視用於電子商務體驗，當中會顯示快顯視窗以及產品資訊，以促使購買。 不過，您可以觸發自訂內容以顯示於快顯視窗中。 此功能可讓使用者根據檢視器選取熱點、縮圖影像或影像地圖，以檢視資訊或相關內容。

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

  • 互動式影像（可點按的熱點）
  • 互動式影片（影片播放期間的可點選縮圖影像）
  • 輪播橫幅（可點按的熱點或影像地圖）

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

若要使用Quickview建立自訂快顯視窗：

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

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    您正在使用的檢視器 如果您要建立「快速檢視」，請完成這些步驟
    互動式影像 新增熱點至影像橫幅。
    互動式影片 正在新增互動功能至您的視訊。
    輪播橫幅 新增熱點或影像地圖至橫幅。

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 html-authored no-header
    您正在使用的檢視器 如果您想要將檢視器與您的網站整合，請完成這些步驟
    互動式影像 將互動式影像與您的網站整合。
    互動視訊 將互動式視訊與您的網站整合。
    輪播橫幅 正在新增輪播橫幅至您的網站頁面。

  3. 您使用的檢視器必須知道如何使用快速檢視。

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

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

    chlimage_1-291

    處理常式已使用setHandlers載入檢視器：

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

    使用以上範例的內嵌程式碼範例，有下列程式碼：

    code language-xml 
    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處理常式控制檢視器中的快速檢視。 處理常式包含用於快速檢視的變數清單和函式呼叫。 內嵌程式碼提供快速檢視中設定的SKU變數對應，以及範例loadQuickView函式呼叫。

    變數對應
    將網頁中使用的變數對應至Quickview中包含的SKU值和一般變數：

    var *variable1*= inData.*quickviewVariable*

    提供的內嵌程式碼具有SKU變數的範例對應：

    var sku=inData.sku

    也從「快速檢視」對應其他變數，如下所示：

    code language-none 
    var <i>variable2</i>= inData.<i>quickviewVariable2</i>
 var <i>variable3</i>= inData.<i>quickviewVariable3</i>

    函式呼叫
    處理常式也需要Quickview的函式呼叫才能運作。 假設主機頁面可存取函式。 內嵌程式碼提供範例函式呼叫：

    loadQuickView(sku)

    範例函式呼叫假設函式loadQuickView()存在且可存取。

    若要進一步瞭解quickViewActivate方法，請前往下列網址：

  5. 請執行下列動作：

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

    • 對應快速檢視中包含的任何其他變數。

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

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

      例如，下列將SKU的值寫入瀏覽器主控台：

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

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

      在快速檢視中的變數已對應且函式呼叫已就緒的情況下，瀏覽器主控台會使用提供的範例函式將變數值寫入瀏覽器主控台。

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

  7. 以下列方式設定快顯視窗DIV的樣式。 視需要新增您自己的其他樣式。

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

  8. 將快顯視窗DIV置於HTML頁面內文中。

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

    code language-xml 
    <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中建立的簡單函式，讓快顯視窗可見。 ，其功能如下：

    code language-xml 
    <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頁面上傳到您的網頁伺服器並開啟。 使用者叫用快速檢視時，檢視器會顯示快顯視窗DIV。

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

    有些檢視器（例如互動式視訊檢視器）支援以全熒幕模式顯示。 不過，使用前述步驟所述的快顯視窗，會在全熒幕模式中顯示在檢視器後面。

    若要讓快顯視窗同時以標準與全熒幕模式顯示，請將快顯視窗附加至檢視器容器。 使用第二個處理常式方法initComplete。

    在檢視器初始化之後，就會叫用initComplete處理常式。

    code language-xml 
    "initComplete":function() { code block }

    若要進一步瞭解init()方法，請前往下列網址：

  12. 若要將先前步驟中所述的快顯視窗附加至檢視器，請使用下列程式碼：

    code language-xml 
    "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程式碼看起來類似下列（使用了互動式視訊檢視器）：

    code language-xml 
    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()叫用檢視器。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2