預設的「快速檢視」用於電子商務體驗,其中會顯示包含產品資訊的快顯視窗以促進購買。 不過,您可以觸發自訂內容以顯示在快顯視窗中。 根據您使用的檢視器,客戶可以選取熱點、縮圖影像或影像地圖,以查看資訊或相關內容。
Dynamic Media中的下列檢視器支援Quickview:
雖然每個檢視器的功能有所不同,但在所有三個支援的檢視器中,建立「快速檢視」的程式都相同。
要使用Quickview建立自定義彈出窗口,請執行以下操作:
為已上傳的資產建立快速檢視。
您通常會在編輯資產以用於使用的檢視器的同時建立快速檢視。
您使用的檢視器 | 若要建立快速檢視,請完成下列步驟 |
互動式影像 | 向影像橫幅添加熱點. |
互動式影片 | 為視訊新增互動功能. |
輪播橫幅 | 向橫幅添加熱點或影像映射. |
取得檢視器內嵌程式碼,以整合您網站中的檢視器。
您使用的檢視器 |
若要將檢視器與您的網站整合,請完成下列步驟 |
互動式影像 | 將互動式影像與您的網站整合. |
互動式影片 |
將互動式視訊與您的網站整合. |
輪播橫幅 | 將輪播橫幅新增至您的網站頁面. |
您使用的檢視器必須知道如何使用「快速檢視」。
檢視器使用的處理常式稱為 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()
方法(如下所示):
現在請設定 quickViewActivate
處理常式。
此 quickViewActivate
處理常式會控制檢視器中的「快速檢視」。 處理常式包含變數清單和函式呼叫,以便與Quickview搭配使用。 內嵌程式碼提供在「快速檢視」中設定之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區段的註解。
映射Quickview中包含的任何其他變數。
loadQuickView(sku,*var1*,*var2*)
如果您新增更多變數,請呼叫。建立簡單 loadQuickView
()在檢視器外部的頁面上運作。
例如,下列項目會將SKU的值寫入瀏覽器主控台:
function loadQuickView(sku){
console.log ("quickview sku value is " + sku);
}
將測試HTML頁面上傳至Web伺服器並開啟。
快速檢視中的變數已對應。 函式呼叫已就緒。 瀏覽器主控台會將變數值寫入瀏覽器主控台。 它會使用提供的範例函式來執行此作業。
您現在可以使用函式叫用快速檢視中的簡單快顯視窗。 下列範例使用 DIV
,以取得快顯視窗。
設定快顯視窗的樣式 DIV
以下列方式。 視需要新增額外的樣式。
<style type="text/css">
#quickview_div{
position: absolute;
z-index: 99999999;
display: none;
}
</style>
放置快顯視窗 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>
若要更新快顯視窗中的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>
將測試HTML頁面上傳至您的Web伺服器並開啟。 檢視器會顯示快顯視窗 DIV
當用戶調用快速視圖時。
如何以全螢幕模式顯示自訂快顯視窗
有些檢視器(例如互動式視訊檢視器)支援以全螢幕模式顯示。 不過,如前述步驟所述,使用快顯視窗會使其在全螢幕模式中顯示在檢視器後面。
若要讓快顯視窗以標準和全螢幕模式顯示,請將快顯視窗附加至檢視器容器。 在這種情況下,請使用第二個處理程式方法, initComplete
.
此 initComplete
在初始化查看器後調用處理程式。
"initComplete":function() { code block }
深入了解 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);
}
在上述程式碼中,您已完成下列動作:
您的整個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()
.