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

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

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

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

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

要使用快速视图创建自定义弹出窗口,

  1. 为已上传的资产创建概览。

    通常,在编辑资产以用于所使用的查看器时,会同时创建概览。

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

    您正在使用的查看器
    完成这些步骤,将查看器与网站集成
    交互式图像 将交互式图像与您的网站集成
    交互式视频
    将交互式视频集成到您的网站
    传送横幅 将传送横幅添加到您的网站页面
  3. 您现在使用的查看器需要知道如何使用Quickview。

    为此,查看器使用一个名为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处理程序控制查看器中的Quickview。 该处理函数包含用于Quickview的变量列表和函数调用。 嵌入代码为Quickview中设置的SKU变量提供映射,并提供了loadQuickView函数调用示例。


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

    var *variable1*= inData.*quickviewVariable*

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

    var sku=inData.sku

    也可以从Quickview映射其他变量,如下所示:

    var <i>variable2</i>= inData.<i>quickviewVariable2</i> 
     var <i>variable3</i>= inData.<i>quickviewVariable3</i>
    


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

    loadQuickView(sku)

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

    请访问以下链接,进一步了解quickViewActivate方法:

  5. 执行以下操作:

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

    • 映射Quickview中包含的任何其他变量。

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

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

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

      映射Quickview中的变量并就地调用函数后,浏览器控制台将使用提供的示例函数将变量值写入浏览器控制台。

  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服务器并打开。 当用户调用Quickview时,查看器将显示弹出窗口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 Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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