使用快速视图创建自定义弹出窗口Windows®

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

Dynamic Media中的以下查看器支持快速视图:

  • 交互式图像(可单击的热点)
  • 交互式视频(视频播放期间可单击的缩略图图像)
  • 传送横幅(可单击的热点或图像映射)

虽然每个查看器的功能不同,但创建快速视图的过程在所有三个支持的查看器中是相同的。

要使用快速视图创建自定义弹出窗口,请执行以下操作:

  1. 为已上传的资产创建快速视图。

    通常,在编辑资产以用于所使用的查看器时,您会在同一时间创建一个快速视图。

    您正在使用的查看器 要创建快速视图,请完成以下步骤
    交互式图像 将热点添加到图像横幅.
    交互式视频 为视频添加交互性.
    传送横幅 向横幅添加热点或图像映射
  2. 获取查看器嵌入代码,将查看器集成到您的网站中。

    您正在使用的查看器
    要将查看器与网站集成,请完成以下步骤
    交互式图像 将交互式图像与您的网站集成
    交互式视频
    将交互式视频集成到您的网站
    传送横幅 将传送横幅添加到您的网站页面
  3. 您使用的查看器必须知道如何使用快速视图。

    查看器使用一个名为QuickViewActive的处理函数。


    例假设您在网页上对交互式图像使用了以下示例嵌入代码:

    chlimage_1-291

    处理程序使用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()方法的详细信息,请访问:

  4. 现在配置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方法的详细信息,请访问:

  5. 执行以下操作:

    • 取消嵌入代码的setHandlers部分的注释。

    • 映射快速视图中包含的任何其他变量。

      • 如果添加更多变量,请更新loadQuickView(sku,*var1*,*var2*)调用。
    • 在查看器外部的页面上创建一个简单的loadQuickView()函数。

      例如,以下内容会将SKU的值写入浏览器控制台:

    function loadQuickView(sku){
        console.log ("quickview sku value is " + sku);
    }
    
    • 将测试HTML页上传到Web服务器并打开。

      快速视图中的变量已映射。 函数调用就位。 浏览器控制台会将变量值写入浏览器控制台。 它使用提供的示例函数执行此操作。

  6. 您现在可以使用函数在“快速”视图中调用简单的弹出窗口。 以下示例使用DIV作为弹出窗口。

  7. 按以下方式设置弹出窗口DIV的样式。 根据需要添加额外的样式。

    <style type="text/css">
        #quickview_div{
            position: absolute;
            z-index: 99999999;
            display: none;
        }
    </style>
    
  8. 将弹出窗口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>
    
  9. 要在弹出窗口中更新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>
    
  10. 将测试HTML页上传到Web服务器并打开。 当用户调用“快速”视图时,查看器将显示弹出窗口DIV

  11. 如何以全屏模式显示自定义弹出窗口

    某些查看器(如交互式视频查看器)支持以全屏模式显示。 但是,如前面步骤所述,使用弹出窗口会导致它在全屏模式下显示在查看器后面。

    要使弹出窗口以标准和全屏模式显示,请将弹出窗口附加到查看器容器。 在这种情况下,请使用第二个处理函数方法initComplete

    查看器初始化后将调用initComplete处理函数。

    "initComplete":function() { code block }
    

    有关init()方法的详细信息,请访问:

    • 交互式图像查看器 — init
    • 交互式视频查看器 — init
  12. 要将弹出窗口(如前面的步骤所述)附加到查看器,请使用以下代码:

    "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代码类似于以下代码(使用了交互式视频查看器):

    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()调用查看器之前加载了处理函数。

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now