Adobe Experience League

使用概览创建自定义弹出窗口

默认的Quickview用于电子商务体验中，通过该体验将显示一个包含产品信息的弹出窗口来推动购买。但是，您可以触发要在弹出窗口中显示的自定义内容。根据您使用的查看器，此功能允许用户单击热点、缩略图或图像映射以查看信息或相关内容。

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()方法的详细信息，请访问：
- 交互式图像查看器：setHandlers
- 交互式视频查看器：setHandlers
您现在需要配置quickViewActivate处理函数。

quickViewActivate处理程序控制查看器中的Quickview。该处理函数包含用于Quickview的变量列表和函数调用。嵌入代码为Quickview中设置的SKU变量提供映射，并提供了loadQuickView函数调用示例。

变
量映射在网页中使用的变量映射到概览中包含的SKU值和通用变量：

var *variable1*= inData.*quickviewVariable*

提供的嵌入代码具有SKU变量的示例映射：

var sku=inData.sku

也可以从Quickview映射其他变量，如下所示：
```
var variable2= inData.quickviewVariable2 
 var variable3= inData.quickviewVariable3
```
函
数调用处理函数还需要一个函数调用才能使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服务器并打开。
  
  映射Quickview中的变量并就地调用函数后，浏览器控制台将使用提供的示例函数将变量值写入浏览器控制台。
您现在可以使用函数在概览中调用一个简单的弹出窗口。以下示例使用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 popup
    }
</script>

将测试HTML页上传到Web服务器并打开。当用户调用Quickview时，查看器将显示弹出窗口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()调用查看器之前已创建查看器实例并加载了处理函数。