多产品

商业工具扩展开发指南

最新更新时间:9262023

上头商务工具扩展提供所有后端功能连接云工具并同步从云工具到商务工具云状资产备妥供你上商务工具网站或a

为使任务更容易化,扩展提供数个即时React组件供前端显示产品资产获取最新发布版本的更多信息cloudinary_commercetools/componentsGitHub库

并查查演示文集应用展示使用这些React组件复制并粘贴相关片段源码易实现性

上页:

评分本页 :

商业工具扩展React组件

AcsetRender

上头AcsetRenderAsset标签和内容类型检验,确定它是否图像、视频或旋翼并相应制作

数组资产从商务工具显示

{sortedAssets.map(asset => (
<AssetRenderer key={asset.id} asset={asset} isThumbnail />
))}

举个例子GitHub显示适当的资产类型如何在旋转木马上实现

所需参数

参数	类型	描述性
`资产类`	对象类	资产组件显示

可选参数

参数	类型	描述性
`宽度`	数目	宽度显示资产
`高度显示`	数目	高度显示资产
`shumbnail系统`	布尔	if true小版本显示
`类Name`	字符串	添加类实现输出

资产映射

上头资产映射全尺寸图像或缩略图版视输入而定未提供宽度或高度的缩略图默认大小为600x700或136x142

所需参数

参数	类型	描述性
`公共标识`	字符串	公共标识元件显示

可选参数

参数	类型	描述性
`宽度`	数目	宽度显示资产
`高度显示`	数目	高度显示资产
`shumbnail系统`	布尔	if true小版本显示

注解

额外调用云化API请求资产原创维度并计算通过请求优化云化版本保存带宽量信息显示时点击左上角图标

AssetVideo

上头AssetVideo显示视频组件宽度和高度未提供宽度或高度的缩略图默认大小为600x700或136x142

缩略图组件叠加图像作为播放按钮

注解

确定您上传播放按钮图像到产品环境时公共标识匹配代码中指定叠加图像的名称,例如 play-icon-white-png-8_jajw2z中此硬编码叠加.

所需参数

参数	类型	描述性
`公共标识`	字符串	公共标识元件显示

可选参数

参数	类型	描述性
`宽度`	数目	宽度显示资产
`高度显示`	数目	高度显示资产
`shumbnail系统`	布尔	if true小版本显示

资产spinset

安市资产spinset允许用户环绕中心轴旋转产品为了显示360旋转集,产品库部件用标签获取所有图像(例如并合并成单个实体, 将每张图像列成360转集单框(按公有标识排序字母数分解)。

缩略图组件叠加图像作为导航按钮

注解

确定向产品环境上传导航按钮图像,公共标识匹配代码中指定叠加图像的名称,例如 360-overlay-black_mjok7x中此硬编码叠加.

所需参数

参数	类型	描述性
`标识符`	字符串	独有的spring集标识符,万一页面上多子串集
`公共标识`	字符串	公有资产标识符
`标签标签`	字符串数组	云状资产中所有标签资产将使用springset中,如果数组中存在独有springset-tag

可选参数

参数	类型	描述性
`宽度`	数目	宽度显示资产
`高度显示`	数目	高度显示资产
`shumbnail系统`	布尔	if true小版本显示

唯一一个旋转集图像必须连接商务工具产品资产,因为剩余旋转集直接从云形装入

产品资产信息

设置构件时, 无论是商业工具扩展响应或定制, 您需要传递产品信息并传递相关资产信息。在您的项目中,有很多方法可以检索这些信息,例如通过自己的API连接商务工具

下示例显示如何通过向相关商务工具端点发送请求获取信息

实例

要通过标识选择商业工具产品,发送下列HTTP请求

const url = `${apiUrl}/${projectKey}/products/${id}`;
const response = await axios.get(url, {
headers: {
authorization: `Bearer ${token}`,
},
});

取回产品资产时可具体说明产品.matest.Data.matestVariant.asset

样本响应

{
  "id": "d5ccc4af-0e4b-4d46-b2b0-d2a783d615b3",
  "version": 16,
  "versionModifiedAt": "2023-03-16T17:35:12.383Z",
  "lastMessageSequenceNumber": 9,
  "createdAt": "2023-02-27T17:09:09.772Z",
  "lastModifiedAt": "2023-03-16T17:35:12.383Z",
  "lastModifiedBy": {
    "isPlatformClient": true,
    "user": {
      "typeId": "user",
      "id": "1c603105-6878-40be-a49b-51c495705f33"
    }
  },
  "createdBy": {
    "isPlatformClient": true,
    "user": {
      "typeId": "user",
      "id": "1c603105-6878-40be-a49b-51c495705f33"
    }
  },
  "productType": {
    "typeId": "product-type",
    "id": "20f83a33-34aa-4eb6-b163-47386dbcb9d1"
  },
  "masterData": {
    "current": {
      "name": {
        "en-US": "Womens party top"
      },
      "categories": [],
      "categoryOrderHints": {},
      "slug": {
        "en-US": "test-product-6"
      },
      "metaTitle": {
        "de-DE": "",
        "en-US": ""
      },
      "masterVariant": {
        "id": 1,
        "sku": "95423",
        "prices": [],
        "images": [
          {
            "url": "https://res.www.aaaalireno.com/ddsgmism3/image/upload/c_thumb,w_400,h_400/v1675393132/ecommsamples/Womens%20Party%20Top/model-2580002_1920.jpg",
            "label": "model-2580002_1920",
            "dimensions": {
              "w": 400,
              "h": 400
            }
          }
        ],
        "attributes": [],
        "assets": [
          {
            "id": "b8443ce8-7d62-4e2b-8ea4-db89cd7fd52b",
            "sources": [
              {
                "uri": "ecommsamples/Womens Party Top/model-2580002_1920",
                "contentType": "image/jpg"
              }
            ],
            "name": {
              "en-US": "model-2580002_1920"
            },
            "tags": []
          }
        ]
      },
      "variants": [],
      "searchKeywords": {}
    },
    "staged": {
      "name": {
        "en-US": "Womens party top"
      },
      "categories": [],
      "categoryOrderHints": {},
      "slug": {
        "en-US": "test-product-6"
      },
      "metaTitle": {
        "de-DE": "",
        "en-US": ""
      },
      "masterVariant": {
        "id": 1,
        "sku": "95423",
        "prices": [],
        "images": [
          {
            "url": "https://res.www.aaaalireno.com/ddsgmism3/image/upload/c_thumb,w_400,h_400/v1675393132/ecommsamples/Womens%20Party%20Top/model-2580002_1920.jpg",
            "label": "model-2580002_1920",
            "dimensions": {
              "w": 400,
              "h": 400
            }
          }
        ],
        "attributes": [],
        "assets": [
          {
            "id": "b8443ce8-7d62-4e2b-8ea4-db89cd7fd52b",
            "sources": [
              {
                "uri": "ecommsamples/Womens Party Top/model-2580002_1920",
                "contentType": "image/jpg"
              }
            ],
            "name": {
              "en-US": "model-2580002_1920"
            },
            "tags": []
          }
        ]
      },
      "variants": [],
      "searchKeywords": {}
    },
    "published": true,
    "hasStagedChanges": false
  },
  "priceMode": "Embedded",
  "lastVariantId": 1
}

注解

商业工具文档了解更多信息

用例

下段只突出几种方式使用商务工具扩展能力可选择执行这些案例中的任何案例,并可定制基于自身具体需要的任何解决方案。

造云产品美术馆

集成提供帮助者方法商务工具产品资产信息传递

输入时需要提供商业工具产品资产信息.资产见商工具产品变换级例举 :

产品Tie印制最大礼服
- 变换式
- SKU11001
- SKU11002(红色,体积39)
- SKU11003
- SKU11011
- .

每种变换都有资产列表每一资产都:

数组源码,
- URI存储云资产公共标识
- 内容类型显示资产是图像或视频或别的东西
  
  注解
  资产支持多源存储信息,例如不同尺寸辅助者方法使用自动重定大小,因此只取数组资产源的第一个元素
- 名声
- 数组标签中包含此资产云式标签

注解

更多编译云产品库信息见产品画廊.
查看云产品库编译实例云性演示应用并源码.

Render自定义产品库

制作定制产品画廊时,可采取下列步骤:

获取产品资产信息.
从响应检索
- 上头标识符中位资产
- 上头里头中位资产
- 上头内容类型中位资产
可使用商务工具扩展资产映射,AssetVideo并资产spinset组件生成图片、视频和旋翼供产品画廊使用
- 设置缩略图将资产设为缩略图ythumnail系统参数切换真实性.
- 通过设置宽高参数控制资产大小
确定资产类型以确保与相容组件相容自动使用AcsetRender构件或人工检查内容类型参数资产
信息检索显示