使用 Quickview 创建自定义弹出窗口

默认概览用于电子商务体验中，其中显示带有产品信息的弹出窗口，以推动购买。但是，您可以触发要在弹出窗口中显示的自定义内容。根据您使用的查看器，客户可以选择热点、缩略图图像或图像映射以查看信息或相关内容。

Dynamic Media中的以下查看器支持概览：

交互式图像（可选热点）
交互式视频（视频播放期间可选的缩略图图像）
轮播横幅（可选择的热点或图像映射）

虽然每个查看器的功能不同，但创建概览的过程在所有三个支持的查看器中是相同的。

要使用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 处理程序控制查看器中的概览视图。该处理程序包含用于概览的变量列表和函数调用。嵌入代码提供在概览中设置的SKU变量的映射。还制作了一个样本 loadQuickView 函数调用。

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

var *variable1*= inData.*quickviewVariable*

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

var sku=inData.sku

也映射概览中的其他变量，如下所示：
```
var variable2= inData.quickviewVariable2
 var variable3= inData.quickviewVariable3
```
函数调用
该处理程序还需要Quickview的函数调用才能正常工作。假定主机页面可以访问函数。嵌入代码提供了一个示例函数调用：

loadQuickView(sku)

示例函数调用假定函数 loadQuickView() 存在并且可以访问。

详细了解 quickViewActivate 方法：
- 交互式图像查看器 — 事件回调
- 交互式视频查看器 — 事件回调
- 交互式视频查看器中的交互式数据支持 — 交互式数据支持
执行以下操作：
- 取消注释嵌入代码的setHandlers部分。
- 映射概览中包含的任何其他变量。
  - 更新 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，当用户调用概览时，该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() 方法：
- 交互式图像查看器 — 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().

使用 Quickview 创建自定义弹出窗口

Business.Adobe.com 资源

在此页面上

查看下一个：

学习

文档

社区

技术支持

资源

Adobe 帐户

Adobe