使用 Cloudinary 进行产品定制
本帖最后由 mukti574 于 2023-9-17 16:27 编辑在当今高度视觉化的世界中 构建网站的一项关键任务是添加媒体，例如图像和视频。您可以通过多种有效的方法来做到这一点，其中之一就是使用 Cloudinary 的产品定制功能。
作为背景，Cloudinary是一个软件即服务 (SaaS) 平台，通过它您可以跨设备和浏览器高效、轻松地交付媒体（图像、文本、音频、视频）。此外，通过使用 Cloudinary 的 API，您可以自定义、管理和组织内容——API 的许多选项使这项任务变得灵活。此外，针对 等的服务器端和客户端Cloudinary SDK对开发人员也有很大帮助。
本教程将引导您完成将Cloudinary 中的多个产品定制功能集成到电子商务商店中的过程。
安装和设置复制此标题的链接
在 Cloudinary 免费注册。
然后，花一些时间熟悉 Cloudinary 直观的
仪表板。复制并保存cloud_name、api_key和api_secret变量以供后续步骤使用。
资源上传复制此标题的链接
接下来，将图像上传到 西班牙消费者手机号码列表 云端。比如说，您想要定制一件 T 恤。您可以使用自己的 T 恤图像或 Cloudinary 的产品定制示例应用程序中的图像来完成此操作。请执行下列操作：
将 T 恤图片命名为上传到 Cloudinary，并使用以下代码将其保存到您的主目录中。
folder：您的电子商务商店必须包含商品的文件夹，例如衬衫和杯子。通过此参数，您可以创建用于存储产品图像的文件夹。
public_id：此参数有助于您的传送 URL 的搜索引擎优化 (SEO)。
https://zh-cn.aeroleads.me/wp-content/uploads/2023/09/download-7.png
从 Google Cloud 和 S3 等二手来源添加您的资产。
资产转型复制此标题的链接
Cloudinary 提供了多种转换选项。在本教程中，添加一个三像素宽的黑色边框和一个透明的覆盖水印，以防止第三方下载以确保安全。这是代码：
启用客户端资产列表：在控制台上，单击“设置” > “安全性”，然后在“受限媒体类型”下，取消选中“资源列
转到要呈现产品图库小部件的商品页面，并为其分配一个特殊的 ID，例如my-gallery：
方法的访问权限，然后该方法在内存中创建一个实例。
在 JavaScript 文件中指定这三个参数：
您的 Cloudinary 帐户的云名称
container，这是小部件页面上的一个元素
mediaAsset，其中包含所有媒体作为资产数组
请执行下列操作：
为所有带有标签的图像创建一个小部件shirt：
您的设置现已完成。以下小节描述了您可以添加到电子商务商店的功能。展示您的 T 恤复制此标题的链接
下面的代码设置了一个类似亚马逊的显示，包括扩展模式、旋转机制等等。添加用户友好的触感复制此标题的链接使用下面的代码添加一个显示资产数量的轮播，该代码利用缩略图方法：
追踪访客行为复制此标题的链接
要跟踪访问者行为以进行分析，请初始化“myGallery”小部件以记录访问者点击的位置，如下所示：
使用对象配置文本AcessibilityProps。默认情况下，产品库会抛出字符串Gallery assets n of m。或者，您可以让库从资产的上下文或结构化元数据字段中获取字符串。
AccessibilityProps有两个参数：
mediaAltSource，这是库中每个媒体资产的文本字符串的来源。您可以指定这三个源值之一：
contextual，它使用每个资产的上下文元数据字段的键值对，由参数中传递的键指定mediaAltId。
metadata，它使用每个资产的结构化元数据字段的值，如在参数external_id中传递的指定的mediaAltId。
auto，这是根据模板确定资源在库中的顺序。
页:
[1]