多产品
菜单类

开发者指南

最新更新:Jan-22-2024

页面解释如何配置并整合高级云化组件产品画廊并视频播放云端视频播放器和产品库内交付并学习应用变换,提供响应图像和视频并管理非产品资产SFCCB2C商务环境

内代码修改子页详细信息提供 代码修改 整合云端应用码

上页:

产品图片库配置

云化产品画廊交互用户界面显示网站产品支持图像、视频、360旋转集和3D图像

赋能云化产品库产品细节页

允许产品图片库提供产品细节页

  1. 内商务管理员选择网站后导航商机工具 > 网站首选项 > 自定义首选项 > 云式资产管理配置.
  2. 集成云画廊使用至对.
  3. 集成启用360splySet至对显示360旋转集
  4. 集成启动三维对象并使用三维资产至对显示三维图像

  5. 集成云化美术馆外观和感觉需要JSON配置设置使用产品图片集Demo定制画廊并复制JSON代码解析选项卡 。删除云名并媒体代理等属性编程注入别处例举 :

注释 :

  • 可设置其他配置参数中JSON描述初始化产品库部件.举个例子,设置NCAME集安全性并私有Cdn至真实性并secureDistribution自定义域名 :

  • 上头查询ParamJSON属性设置AG系统默认不修改查询参数添加到产品库中所有资产URL中并被云化分析使用

判定产品库中显示哪些资产

标签用于识别产品库中显示的特定产品细节页中的云形资产

所有标签都基于唯一产品标识符显示 下表显示

资产类型 标签语法 实例
图片制作 或
- 		25721034M或
25721034M-JJC51A0
视频播放一号 或
- 		25721034M或
25721034M-JJC51A0
360旋转集2 360 或
- 360 		25721034M360或
25721034M-JJC51A0_360
三维图像3 三维 或
- 三维 		25721034M_3D或
25721034M-JJC51A0_3D

脚注
  1. 并见产品库显示视频.
  2. 保证启用360splySet自定义偏好设为对.
  3. 保证启动三维对象并使用三维资产自定义偏好设为对.

产品库中排序资产

上头sortPropsJSON内属性云化美术馆外观和感觉自定义偏好确定产品库中资产排序方式例举 :

在这种情况下,您通过设置产品图片库中的资产排序sfcc-gallery-position结构化元数据计算云形中每种产品资产资产按上移顺序显示

产品库中资产设置alt文本

上头accessibilityPropsJSON内属性云化美术馆外观和感觉自定义偏好)决定alt文本使用哪个字段 。例举 :

在此例中,您会设置alt文本scc-alt文本结构元数据字段

显示视频

可使用视频在产品细节页面上显示云化产品库.并使用云化视频播放器或标准HTML视频标签

注解
产品库和视频播放器都启动 视频显示页面两次.

除显示PDP视频外,您还可以配置视频通过其他页面类型显示代码定制.

使用视频播放器显示视频

启动云视频播放器

  1. 内商务管理员选择网站后导航商机工具 > 网站首选项 > 自定义首选项 > 云式资产管理配置.
  2. 集成云视频播放器使用至对.

  3. 集成云式视频播放器外观和感觉需要JSON配置设置使用视频播放器Studio自定义播放器并复制JSON样式设置avascript标签例例 :

产品库显示视频

产品库显示视频所需的配置取决于媒体映射选项使用中

选项1

使用时选项1视频默认启动并显示正确标签和元数据.

选项2

使用时选项2sFCC视频自定义视图类型并上传视频后这些复制到云形选项2.

视频存储于SFCC并复制至云

启动视频如下:

  1. 搭建自定义视图类型调用视频播放:
    1. 商务管理员导航商机工具>产品目录>目录>(您的目录)>图像设置.
    2. 点击添加视图类型链接添加新视图类型视频播放.
  2. 添加视频产品
    1. 转到产品并点击编辑按钮编辑产品图片
    2. 面向视图类型=视频中单击添加图标为产品分配视频
    3. 田里路径选择中添加视频公共标识
  3. 内商务管理员选择网站后导航商机工具 > 网站首选项 > 自定义首选项 > 云式资产管理配置.
  4. 集成云画廊使用至对.
  5. 集成云化视频逐视图类型至对内含视频产品库
视频存储云式并使用定制映射访问

Cloudinary定制映射选项使你从Cloudinary取视频并显示在产品细节页上函数用云化为单一真象源并基于路径传递,压倒式墨盒操作模式设置视频

检索过程包括分配基路并定义附加标签以构建交付URL基础

启动自定义云内产品视频映射

  1. 启动云化视频播放器.
  2. 发自商机工具>产品目录>目录>(您的目录)>图像设置集云视频启动至对.
  3. 集成云化使用视频自定义映射至对.
    • 基路定义产品云视频文件夹段商机工具 > 网站首选项 > 自定义首选项 > 云核心配置提供视频URL基础
  4. 标签使用云视频自定义地图路径段确定视频最终 URLs
    • #Lible#:网站当前位置,例如en_US.
    • #sku#产品标识
    • #名#:产品名(无空格)。
    • #color#:产品色属性
    • #规模#:产品大小属性

      标记可单独使用或合并使用(例如,#locale#/#sku#/#color#)来本地#并#sku#文件夹名称#color#将作为云形视频配置名确定路径与视频云内交付URL一致

  5. 输入期望视频格式云型自定义视频格式后附生成交付URL

重要点
仅在期望映射视频所有产品时才启用自定义视频映射无法找到视频后, 会看到PDP的占位符

变换

全云化图像显示并视频播放变换可应用到仓库的不同层次上,最特定级变换优先级举例说 变换中包括文本叠加显示50%关闭图像产品级覆盖转换25%关闭设置图像目录级

参见这些段SFRA和SiteGenesis配置页面学习哪里可指定变换应用到不同层次图像

  • 配置墨盒网站偏好->云变换配置
  • 配置自定义属性->目录自定义属性
  • 配置自定义属性->类别自定义属性
  • 配置自定义属性->产品自定义属性
  • 配置自定义属性->库自定义属性

响应图像和视频

云化产品库显示的任何图片和视频默认响应, 以适应客户使用的任何浏览设备

类似地,用云端视频播放器显示视频默认响应

令云图片库外响应

  1. 打开文件命名htmlhead.isl并设置以下代码底部此文件 :

  2. 内商务管理员选择网站后导航商机工具 > 网站首选项 > 自定义首选项 > 云核心配置.

  3. 内云图像页面类型设置中,您可设置响应图像/页面类型

通过云图像页面类型设置建立响应

实现响应有两种方式:

  • 生成HTML弧码和大小属性标签标签:

    • 这种方法建基于现有HTML响应令墨盒使用scset和大小, 当前执行必须集成只有在实施基于HTML响应后(这是一个单独的范围),你才能使用墨盒设置支持它。
    • 优先选用客户端偏差代码来撞击核心Web维值
    • 集成"automateResponsivenessWithJS"至虚伪.
    • 内含式虚构并断点生成HTML必备属性标签(见上文)。
    • 可排除"autoResponsiveDimensions"发自设置

      举个例子,如果PLP拥有小屏幕布局2列和大屏幕布局3列,你可具体说明,768px以下视图站图像将自动缩到49%视图站,而大视图站图像将缩到32%视图站

      下示例显示配置三种不同分辨率:200px、500px和900px这是JSON结构云图像页面类型设置:

  • 云端库使用:

    • 集成"automateResponsivenessWithJS"至真实性.
    • 内含式"autoResponsiveDimensions".
    • 可排除虚构并断点发自设置

      使用云端库制作产品列表页面响应图像时,请输入JSON结构云图像页面类型设置:
      注解
      更多信息见 自动响应云核心JS库.

JSON技巧和考量

  • 上头维度参数为不支持srcset的用户代理提供回退(为调试目的,您可设置异常数表示值维度以清晰显示响应断点应用何方
  • 确定按上例所显示的精确语法

使用硬编码自定义页面类型

下表包括SFRA和SiteGenesis添加这些页面类型对不同页面图像响应

  • pd产品细节页
  • plp产品列表页上的产品瓦
  • sldPdswatch:Swatch产品细节页上的图片
  • ldPlpSwatch:Swatch产品列表页上的图片
  • searchSuggestions:搜索栏下推荐产品
  • 推车:产品卡车页
  • 小卡小型推车下降
  • 检出:退页所有部件,包括发货、计费和下订单
  • orderConfirmation:指令确认页
  • 类别Banner:类别横幅图像
  • cldhomePageProductTile:产品排版主页
  • recommendationTile推荐牌贴产品细节页
  • 快速视图快速视图模式
  • 焊德产品Nav产品细节页导航
  • cldCartProductTile:上次访问产品车页牌

除页面类型列表外,您可使用任意名称建立自定义页面类型有几大产品或非产品资产同页确定SFCC后端对资产分配期望页面类型

非产品资产

下节提供配置非产品资产并定制指令

载入内容资产中的云图像

打开想加载云化图像的任何内容资产,例如 打开约-us内容资产并添加以下代码加载云形高英雄横幅背景图像

查询参数如下:

  • URL:云形图像相对URL面向选项1中路径显示资产上传到内容文件夹内云化内容图片文件夹自定义偏好)面向选项2中假设上传内容资产作业已被运行同步资产
  • 页面类型:SFCC页类型面向此图像

  • OSURL:设为真时加载变换URL或虚报时加载srcset和尺寸属性图像标签

    • ifOSURL参数设置虚伪中,您可以使用属性化参数传递元素并载入生成图像标签

      产生图像标签

内容页面中包含云视频播放器

打开任何内容资产并加载云形视频,例如打开约-us内容资产并添加下列代码加载云视频播放器

查询参数为 :

  • URL:静态内容库中的视频相对URL

反馈发送

评分本页 :