交互式图像 interactive-images

通过将“可购物”热点拖放到图像上，您可以轻松使静态图像丰富并吸引客户体验。 可购物热点将有关产品或服务的其他信息与直接的销售点“添加到购物车”或“购买”功能相结合。 客户可以选择这些直接链接到产品或服务的热点，将其添加到购物车，或链接到网页。 这样的直接体验可提高客户参与度和网站上的转化率。

下面是带有“快速浏览”弹出窗口的可购物横幅。 用户通过点按模型上的圆或“热点”来激活快速视图。

在上图所示的网页上，查看操作🔗中的交互式图像。

观看如何创建交互式图像横幅 watch-how-interactive-image-banners-are-created

观看有关如何创建交互式图像横幅的演练（10分33秒）。 您还将了解如何预览、编辑和交付交互式图像横幅。

快速入门：交互式图像 quick-start-interactive-images

以下分步工作流描述旨在帮助您在Adobe Experience Manager Assets中快速启动和运行交互式图像。

在某些快速入门任务中查找​ Example ​标题。 它包含一个简短的教程，该教程基于尚未向其添加交互式图像的网页示例。

本教程有助于说明在您的网站上集成交互式图像的步骤。

交互式图像步骤：

（可选）标识热点变量 optional-identifying-hotspot-variables

首先，标识由您现有的概览实施使用的动态变量，以便您可以输入热点数据来创建交互式图像。

在Experience Manager Assets中将热点添加到横幅图像时，请分配SKU（库存单位）。 SKU是您提供的每个不同产品或服务的唯一标识符。 此外，还可以向每个热点添加任何额外的可选变量。 此类热点变量稍后用于匹配热点与Quickview内容。

正确标识要与热点数据关联的变量的数量和类型很重要。 添加到横幅图像的每个热点都必须包含足够的信息，以便明确标识现有后端系统中的产品。

有多种不同的方法可标识要用于热点数据的一组变量。

有时，咨询负责现有Quickview实施的IT专家就足够了。 此类人员可能知道在系统中标识概览所需的最小数据集。 但是，也可以简单地分析前端代码的现有行为。

大多数概览实施都使用以下范例：

然后，方法是访问实施概览功能的现有网站的不同区域。 然后触发概览并获取网页发送的Ajax URL，用于加载概览数据或内容。

通常，您无需使用任何专门的调试工具。 现代Web浏览器的功能是Web检查器，这些检查器可以完成适当的工作。 以下是一些包含Web检查器的Web浏览器示例：

在浏览器中打开网络监视时，将触发页面上的快速视图。

现在，在网络日志中找到Quickview Ajax URL，并复制记录的URL以供将来分析。 通常，在触发概览时，会向服务器发送大量请求。 通常，快速视图Ajax URL是列表中的第一个页面之一。 它具有复杂的查询字符串部分或路径，并且其响应MIME类型为text/html、text/xml或text/javascript。

在此过程中，请务必访问网站的不同区域，以及不同的产品类别和类型。 原因是概览的URL可以包含给定网站类别通用的部分。 但是，只有在您访问网站的其他区域时，它们才会更改。

最简单的例子是，概观URL中的唯一变量部分是产品SKU。 在这种情况下，SKU值是向横幅图像添加热点所需的唯一数据块。

但是，在复杂的情况下，除了SKU之外，快速视图URL还具有不同的变化元素。 例如，变化的元素可能包括类别ID、颜色代码和大小代码。 在这种情况下，在Experience Manager Assets的可购物交互式图像功能中，每个元素都是热点数据定义中的一个单独变量。

请仔细研究一下以下概览实例URL及其生成的热点变量：

示例

您可以将上述三个示例中使用的相同方法应用于演示网页。

演示网页具有多个产品缩略图，每个缩略图都有一个标记为“查看更多”的“快速查看”按钮。 在Web浏览器的调试工具仍处于激活状态的情况下，选择每个按钮并记下记录的概览URL。 在激活页面上可用的所有四个产品快速视图后，您将获得向后端发出的概览请求列表：

查看服务器调用，您可以发现特定于产品的信息仅存在于请求路径中。 您还会注意到根本未使用查询字符串，并且其中涉及两种不同类型的数据段：

根据此信息，整个概览URL具有以下模式：

/datafeed/$categoryId$-$SKU$.json

根据此类分析，您会将categoryId和SKU用于热点。

您现在可以使用Experience Manager Assets中的可购物交互式图像功能上传图像横幅并向其中添加热点。

（可选）创建交互式图像查看器预设 optional-creating-an-interactive-image-viewer-preset

您可以选择使用Experience Manager Assets随附的名为Shoppable_Banner的默认现成交互式图像查看器预设。 或者，您也可以创建自己的自定义查看器预设以用于交互式图像。

创建自定义交互式图像查看器预设时，可以确定图像横幅上的热点外观。 作为创建查看器预设的一部分，您可以选择使用预定义图像库中的热点图形。

保存查看器预设后，会在Experience Manager Assets的“查看器预设”列表页面上自动激活（打开）该预设。 这项功能意味着无论何时您查看资产，都可以在交互式媒体组件中看到该资产。 但是，要​ 传递 ​具有此查看器预设的交互式横幅，发布 ​您的查看器预设。 此规则适用于自定义或现成的查看器预设。

要创建交互式图像查看器预设：

上传图像横幅 uploading-an-image-banner

如果您已经上载了要使用的图像，请前进到下一步将热点添加到图像横幅。

上传图像横幅：

将热点添加到图像横幅 adding-hotspots-to-an-image-banner

您可以使用“热点管理”页面上的编辑器将热点添加到图像横幅中。

添加热点时，可以将它们定义为概览弹出显示、超链接或体验片段。

查看体验片段。

在当前创建/编辑会话期间，支持页面右上角附近的“撤消”和“重做”选项。

创建完交互式图像后，可以使用“预览”来查看向客户展示交互式图像的方式。

请参阅（可选）预览交互式图像。

要将热点添加到图像横幅：

（可选）预览交互式图像 optional-previewing-interactive-images

您可以使用“预览”来查看向客户显示的交互式图像的呈现方式。 通过预览，您还可以测试图像的热点，以确保它们按预期运行。

如果对交互式图像感到满意，则可以发布该图像。
请参阅在网页上嵌入视频查看器或图像查看器。
查看将URL链接到您的Web应用程序。 如果您的交互式内容包含具有相对URL的链接，尤其是指向Experience Manager Sites页面的链接，则基于URL的链接方法不可用。
请参阅将Dynamic Media Assets添加到页面。

要预览交互式图像：

Publish交互式图像资源 publishing-interactive-image-assets

有关如何发布交互式图像资源的详细信息，请参阅Publish Assets。

将交互式图像与您的网站集成 integrating-an-interactive-image-with-your-website

上传横幅图像、向其添加热点并发布交互式图像后，便可以将其添加到网站页面。

如果您是Experience Manager Sites客户，则可以通过将交互式媒体组件拖动到页面上来添加交互式图像。 请参阅将Dynamic Media Assets添加到页面。

如果您是独立Experience Manager Assets客户，则可以手动将交互式图像添加到您的网站，如本节所述。

示例

以演示网站为例，请注意这三人的图片是一个静态IMG标记：

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

集成非常简单，只需删除IMG标记并将其替换为Experience Manager Assets中复制的嵌入代码即可。 您会看到结果在页面上显示带有三个圆形热点的可购物交互式图像。

要在响应式环境中将“裁切”应用于购物交互式图像，请将“交互式图像”配置属性ZoomView.iscommand包含到路径。 在这种情况下，将调用ZoomView组件，iscommand是您应用的“裁切”图像服务命令。

请参阅ZoomView.iscommand配置属性。

请参阅裁切图像服务命令。

现在，您便可以将交互式图像与网站上的现有概览集成。

将交互式图像与现有的概览集成 integrating-an-interactive-image-with-an-existing-quickview

此过程的最后一步是将交互式图像与网站上现有的概览实施集成。 集成没有适用于所有情况的解决方案。 每个概览实施都是独一无二的，需要特定方法。 因此，获得前端IT人员的帮助会很有帮助。

现有的概览实施通常表示在网页上发生的一系列相互关联的操作，顺序如下：

这些调用不一定表示网页逻辑从任意步骤中调用的独立公共API调用。 相反，它是一个链接调用，其中每个下一步都隐藏在上一步的最后阶段（回调）中。

当可购物交互式图像替换步骤1或部分替换步骤2时，用户点击可购物图像内的热点。 这种用户交互由查看者处理。 查看器会向网页返回一个事件，其中包含之前添加到Experience Manager Assets的所有热点数据。

在此类事件处理程序中，前端代码执行以下操作：

Experience Manager Assets返回的嵌入代码具有一个已注释掉的现成事件处理程序，如以下高亮显示的代码片段所示：

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

因此，只需取消注释代码，并用特定网页特定的代码替换虚拟处理程序主体即可。

构建概览URL的过程与之前用于标识热点变量的过程相反。

请参阅识别热点变量。

通过前面的“概观URL”示例，您可以在以下示例中看到如何在每种情况下构建“概观URL”：

触发概观URL和激活概览面板的最后一步需要您工作的前端IT人员的协助。 他们最了解如何从适当的步骤准确触发概览实施，并拥有现成的概观URL。

您可以看到如何将这些步骤应用于演示网站，以将可购物交互式图像与概览代码完全集成。 之前，概观URL的结构标识如下：

/datafeed/$categoryId$-$SKU$.json

若要在quickViewActivate处理程序中重构此URL，您可以使用categoryId和SKU字段。 这些字段在查看器代码传递给处理程序的inData对象中可用：

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

演示网站正在使用简单的loadQuickView()函数调用触发概览对话框。 此函数仅接受一个参数，即概览数据URL。 因此，集成可购物交互式图像的最后一步是向quickViewActivate处理程序中添加以下代码行：

loadQuickView(quickViewUrl);

以下是完整的源代码：

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

最终演示网站具有完全集成的交互式图像。

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

请参阅使用概览创建自定义弹出窗口®。