多产品

销售商云B2C商业墨盒用于无头实现

最新更新:Jan-16-2024

本指南提供使用OCAPI云化定制执行定制前端的详细指令

上页:

销售商云PWAKIT搭建

产品画廊视频播放器

WAKIT应用下代码修改

注解

undiary产品库和/或视频播放器使用权, 包括脚本选用权
欲了解更多有关SLEFOR商业云PWA工具包的信息,见SFCC综合商店文档记录.

ap\构件/foter/index.jsx 行号:48-61

ap\构件/项变量/项图像.jsx,行号14

app\components\item-variant\cld-item-image.jsx, line no: 56-63

app\components\order-summary\index.jsx, line no:22-23

ap\构件/命令-摘要/index.jsx 行号:31-34

ach构件摘要index.jsx 行号:77-84

app\构件\ product\index.jsx 行号24-25

app\构件\ product\index.jsx 行号64-71

ap\conduct-tile/index.jsx,行号:33-34

ap\product-tile/index.jsx 行号:88-105

achoks/add-cart模型.js,行号:33-34

achoks/add-cart模型.js,行号114-127

ap\pages\count/detail.jsx,行号35-36

ap\pages\count/detail.jsx行号321-328

accounts-histries.jsx,行号:33-34

accounts-histries.jsx 行号:152-168

ap\pages\count\conferation.jsx,行号38-39

ap\pages\count\conferation.jsx 行号108-119

ap\pages\count\conferation.jsx 行号312-325

ap\pages\homeindex.jsx,行38-41

ap\pages\homeindex.jsx 行58-67

ap\pages\homeindex.jsx 行309-333

注解

CONTENT_ASSET_ID, 宿主并 DEFAULT_SITE_TITLE以上脚本使用 /app/constants.js文件显示如下:

/app/constants.js

actips-product-view/index.jsx 行号:29-31

pp\pects\product\index.jsx 行号:205-210

ap\pects\productViewindex.jsx 行号224267

pp\pects-view/index.jsx行号325-362

PWA附加组件

使用PWA技术时可提供下列组件:

Cloudinary-content-asset地点app/components/cloudinary-content-asset)用于生成内容资产
Cloudinary-content-slots地点app/components/cloudinary-content-slots)用于编译内容槽
Cloudinary-image-gallery地点app/components/cloudinary-image-gallery)用于编译PDP云化图像画廊
Cloudinary-image-swatches地点app/components/cloudinary-image-swatches)用pDP制作云式手表
Cloudinary-lineItem-image地点app/components/cloudinary-lineItem-image)用于在推车上投放云化图像、校验、订单确认、顺序历史和顺序细节页
Cloudinary-plp-images地点app/components/cloudinary-plp-images)用PLP制作云图像
Cloudinary-product-video地点app/components/cloudinary-product-video)用pDP制作云视频
Cloudinary-widgets地点app/components/cloudinary-widgets)用pDP制作云画廊
item-variant/cld-item-image.jsx地点app/components/item-variant/cld-item-image.jsx)用来调用云化图像编译推车、校验、订单确认、顺序历史和顺序细节页

搭建前端技术

Cloudinary产品图片库和视频播放器整合到前端应用中去,除Selceforce商业云PWA包外,前端技术中必须包括下列云脚本

产品画廊视频播放脚本

Cloudinary产品库视频播放程序整合前端应用时,添加japsScript代码如下:

产品库脚本

编译云产品库,添加下列JavaScript代码

注解

上头 c_cloudinaryImage对象包含从云中检索的产品库数据

确定包含

并发

HTML代码中的ld-Gallery表示

视频播放脚本

成云视频添加javaScript代码

OCAPI端点

B2C商业墨盒配置可编译存储端嵌入云化组件

注解

B2C商业墨盒安装配置后,对OCAPI的标准认证提供访问附加响应信息的机会
可选择使用SCAPI存取云信息

并链接到更详细的描述

方法论	描述性
获取`/products/`	返回云化图片库和视频,显示在产品细节页面上
获取`/product_search/?folder=:folder`	返回产品图片搜索结果显示于产品列表页
Post应用`/search_suggestion`	管理云图像搜索建议
Post应用`/baskets/{basket_id}/items`	返回Cart和Checkout页面篮子中的云图像
获取`/orders/{order_no}`	返回云形图片库和视频以获取顺序产品线项、指令确认和顺序历史

产品化

返回云化图片库和视频,显示在产品细节页面上

详细信息端点包括响应中包含的非保密信息见产品资源B2C商务文档

语法

GET http://hostname:port/dw/shop/v21_10/products/{id}

响应细节

云化属性	属性细节
c_cloudinaryImage	对象包含所有云图像和视频所有页面类型
c_cloudinaryImage.cloudinaryImage	内含云图画廊
c_cloudinaryImage.video	内含云产品视频URL
c_cloudinaryImage.cldSwatches	内含云值守图像数据
c_cloudinaryImage.cartImage	内含Cart产品线项图像
c_cloudinaryImage.checkoutImage	内含产品线项取出图像
c_cloudinaryImage.miniCartImage	内含MiniCart产品线项图像
c_cloudinaryImage.orderConfirmationImage	内含产品线项图像命令确认
c_cloudinaryImage.pdpSwatch	内含站点优先值对PDP上赋能/禁止产品监视
c_cloudinaryImage.images	内含从云化接收的产品图片的URL
c_cloudinaryImage.isEnabled	内含网站优先值启动/禁用云式墨盒
c_cloudinaryImage.galleryEnabled	内含网站优先值启动/禁用PDP产品库
c_cloudinaryImage.cloudName	内含网站优先值云名制作云式产品视频
c_cloudinaryImage.videoEnabled	内含网站偏重值对网站云性视频起作用/失效
c_cloudinaryImage.videoPlayerEnabled	内含网站优先值启动/禁用网站云视频播放器
c_cloudinaryImage.pdp	内含产品详解页上网站优先值赋能/禁止云图像
c_cloudinaryImage.cartEnabled	内含网站优先值增能/阻塞云化图像
c_cloudinaryImage.isCheckoutEnabled	内含网站偏爱值赋能/阻塞云内图像
c_cloudinaryImage.miniCartEnable	内含网站优先值辅助/禁用云内图像`加到电机模型`.
c_cloudinaryImage.orderConfirmation	内含网站优先值赋能/阻塞云内图像确认
c_cloudinaryImage.orderHistory	内含命令历史和顺序细节页上网站优先值赋能/禁用云内图像
c_cloudinaryImage.randomNumber	内含随机数制作PDP云式视频

产品搜索

返回产品图片搜索结果显示于产品列表页

详细信息端点包括响应中包含的非保密信息见产品搜索资源B2C商务文档

语法

GET http://hostname:port/dw/shop/v21_10/product_search

注解

可同时向URL添加搜索查询参数

响应细节

云化属性	属性细节
c_cloudinaryImage	内含产品标题页云化产品图片
c_cloudinaryImage.c_autoResponsiveDimensions	内含图像页面类型设置网站偏爱
c_cloudinaryImage.plpEnabled	内含网站偏爱值,用于PLP上赋能/阻塞云性特征

search_suggestion

详细信息端点包括响应中包含的非保密信息见搜索建议B2C商务文档

语法

POST http://hostname:port/dw/shop/v21_10/search_suggestion

响应细节

云化属性	属性细节
c_cloudinaryImage	内含云化产品图片搜索建议
c_cloudinaryImage.suggestionEnabled	内含网站优先值增能/阻塞云式产品图象搜索建议

篮子

返回Cart和Checkout页面篮子中的云图像

详细信息端点包括响应中包含的非保密信息见篮子资源B2C商务文档

注解

无头商店不提供OCAPI调用返回篮子内容使用非无头前端技术时,可使用钩子制作篮子产品线目云化图像

语法

POST http://hostname:port/dw/shop/21_10/baskets/{basket_id}/items

响应细节

云化属性	属性细节
C_Clusinary	内含云化产品图像对象
C_云化.miniCartimage	内含MiniCart产品线项图像
C_云化.cartimage	内含Cart产品线项图像
c_cloudinary.checkoutImage	内含产品线项取出图像
c_cloudinary.miniCartEnabled	内含网站优先值辅助/禁用云内图像`add-to-cart-model`.
c_cloudinary.cartEnabled	内含网站优先值增能/阻塞云化图像
c_cloudinary.checkoutEnabled	内含网站优先值增能/阻塞云内图像

命令类

使用非无头前端技术时, 可使用钩子制作篮子产品线目云化图像

详细信息端点包括响应中包含的非保密信息见篮子资源B2C商务文档

语法

GET http://hostname:port/dw/shop/v21_10/orders/{order_no}

响应细节

云化属性	属性细节
C_Clusinary	内含云化产品图像对象
c_cloudinary.orderConfirmationImage	内含顺序产品线项云化图像
c_cloudinary.orderConfirmationEnabled	内含命令确认页上网站优先值赋能/禁止云
c_cloudinary.orderHistoryEnabled	包含网站优先值命令历史页面赋能/禁止云

自定义

自定义指不同页面类型触发动作钩子

本表列表每页类型可用定制并描述每个脚本主要使用方式

页类型	扩展点	云扩展脚本	注解
产品细节页	d.ocapi.shop product.modifyGETResponse	/int_cloudinary_headless/cartridge/ scripts/hooks/productDetails.js	获取产品图像和视频PDP、Cart、检出、命令确认、命令历史和命令细节
产品列表页	d.ocapi.shop product_search.modifyGETResponse	int_cloudinary_headless/cartridge/ scripts/hooks/productSearch.js	获取云化产品图片并制作成PLP
搜索建议	d.ocapi.shop search_suggestion.modifyGETResponse	/int_cloudinary_headless/cartridge/ scripts/hooks/searchSuggestions.js	获取云图像搜索建议
墨盒退页	d.ocapi.shop basket.items.modifyPOSTResponse	/int_cloudinary_headless/cartridge/ scripts/hooks/basket.js	获取云式图片篮子产品线条
顺序确认历史	d.ocapi.shop order.modifyGETResponse	/int_cloudinary_headless/cartridge/ scripts/hooks/order.js	获取云图像排序产品线项

非产品相关资产

云化提供端点绘制内容资产并内容槽无关特定产品端点使用PWA或任何其他类型前端技术时必须从前端触发

端点获取内容资产

端点获取内容槽

注解

当前SFCC/SFRA内容槽可用可创建自己的控制器或模板以生成槽

反馈发送

✖️

错误

不幸有错误发送反馈

评分本页 :