使用 Quickview 创建自定义弹出窗口 using-quickviews-to-create-custom-pop-ups

为上传的资源创建快速视图。

通常，在编辑资产以用于使用的查看器的同时，创建概览也会同时进行。

获取查看器嵌入代码以在您的网站中集成查看器。

您使用的查看器必须知道如何使用概览。

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

变量映射
将网页中使用的变量映射到概览中包含的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>

函数调用
该处理程序还需要函数调用才能使概览正常工作。 假定主机页面可以访问函数。 嵌入代码提供了一个示例函数调用：

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 pop-up
    }
</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);
}

在上面的代码中，您已完成以下操作：

• 已识别您的自定义弹出窗口。
• 已从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()调用查看器之前加载处理程序。