在 Shopify 自定义应用中集成视频
4.00/5 (1投票)
本文将向 Web 开发人员展示如何创建自定义 Shopify 应用，然后执行两项任务以提供卓越的用户体验 (UX)。
引言
尽管通过高质量视频让产品栩栩如生最初是一个“锦上添花”的功能，但视频已成为电子商务的关键组成部分。消费者希望在做出购买决定之前看到产品视频，尤其是在 COVID-19 大流行阻止他们亲身浏览产品，从而极大地扩展了电子商务市场之后。
很多时候，一旦消费者发现了在线购物的便利性，就会停止光顾实体店。
本文将向 Web 开发人员展示如何创建自定义 Shopify 应用，然后执行两项任务以提供卓越的用户体验 (UX)
将 Cloudinary 集成到您的 Shopify 商店
您已经拥有 Shopify 商店，并正在寻找如何使用 Cloudinary 更好地优化您的页面？请查看以下资源以开始优化您的性能预算。
通过应用增强 Shopify 商店
要为 Shopify 商店添加功能，请首先构建名为 Shopify 应用的 Web 应用，这些应用可以与 Shopify 平台无缝集成。即使它们利用了该平台的强大功能，您也可以在自己的基础架构或其他地方托管这些应用。Shopify 提供了关于使用最相关的编程语言开发 Shopify 应用程序的广泛文档。此外，根据您的目的和客户的需求，您可以选择几种不同类型的 Shopify 应用：公共应用、自定义应用、私有应用等。
然而，自定义应用存在局限性，特别是如果您计划将来扩展其受众。因为您是为特定零售商定制的，所以您不能在 Shopify 应用商店中销售自定义应用。您也不能使用 Shopify 的 Billing API 向客户收取使用自定义应用的费用。
尽管如此，如果标准应用未提供您所需的工具或未能帮助您的客户商店脱颖而出，那么自定义应用是明智之举。例如，尽管 Shopify 开箱即支持视频，但该平台限制视频大小。这种限制和其他因素可能会对您的需求构成过多的限制。
相比之下，Cloudinary 通过为访问者的设备提供优化的视频，从而增强了电子商务的 UX。此外，Cloudinary 产品库小部件提供的 UX 远远优于 Shopify 的默认设置。一旦您学会了如何创建自定义应用（如下文所述），您就离掌握构建高级视频驱动的 Shopify 应用的技术不远了。
创建 Node.js 应用
要将 Cloudinary 集成到 Shopify，首先创建一个基于 Node.js、React 和 Next.js 的 Shopify 应用。Shopify App CLI 是一个出色的命令行界面，可通过快速脚手架 Node.js 和 Ruby on Rails 应用来高效地创建、安装和启动 Shopify 应用，从而自动化许多日常开发任务。
有关如何创建自定义 Shopify 应用的流程，请参阅 Shopify 文档中的本节：Shopify App CLI 入门。
将产品媒体上传到 Cloudinary
创建 Node.js 自定义应用后，添加一个产品视频。要了解 Cloudinary 的工作原理及其与网站和应用的集成，请阅读相关文档。
您可以通过以下两种方式之一将视频上传到 Cloudinary：
- 使用上传小部件 — 通过使用 Cloudinary 交互式、功能丰富且易于集成的小部件，您可以直接将媒体上传到 Cloudinary，从而省去开发用于交互式上传的内部工具的麻烦。
- 直接调用 REST API — 为了使您能够执行上传小部件功能之外的任务，Cloudinary 的客户端库 (SDK) 封装了上传 API，极大地简化了 API 方法的使用（有关详细信息，请参阅上传 API 参考文档）。但是，要从您的自定义代码中通过直接调用 API 来上传文件，只需向 Cloudinary URL 发送一个 HTTPS POST 请求。
我建议使用上传小部件将媒体上传到您的 Cloudinary 媒体库，因为它具有用户友好的用户界面 (UI)。
利用您的 Cloudinary 凭证
执行以下操作
-
注册一个免费的 Cloudinary 帐户并登录，以访问您的帐户详情的 Cloudinary 管理控制台仪表板。记下您帐户的 **Cloud name**，稍后将在自定义 Shopify 应用中使用。
-
在 Cloudinary 管理控制台顶部的 **Settings** 中，在 **Upload presets** 下，确保模式显示为 **Unsigned**。
-
打开您的自定义应用根目录，然后在您选择的文本编辑器中，通过添加您的帐户的云名称和上传预设值来更新 `.env` 文件，如下所示：
SHOPIFY_API_KEY="YOUR_SHOPIFY_API_KEY" SHOPIFY_API_SECRET="YOUR_SHOPIFY_SECRET" HOST="YOUR_TUNNEL_URL" SHOP="YOUR-SHOP-NAME.myshopify.com" SCOPES=write_products,write_customers,write_draft_orders CLOUDINARY_CLOUD_NAME="YOUR_CLOUDINARY_CLOUD_NAME" CLOUDINARY_UPLOAD_PRESET="YOUR_CLOUDINARY_UPLOAD_PRESET"
-
打开 `next.config.js` 文件，并添加您的帐户的云名称和上传预设值，如下所示：
const withCSS = require("@zeit/next-css");
const webpack = require("webpack");
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
const cloudinaryCloudName = process.env.CLOUDINARY_CLOUD_NAME;
const cloudinaryUploadPreset = process.env.CLOUDINARY_UPLOAD_PRESET;
module.exports = withCSS({
webpack: config => {
const env = { API_KEY: apiKey };
const env = {
API_KEY: apiKey
};
config.plugins.push(new webpack.DefinePlugin(env));
return config;
},
publicRuntimeConfig: {
staticFolder: '/static',
cloudinaryCloudName: cloudinaryCloudName,
cloudinaryUploadPreset: cloudinaryUploadPreset
}
});
实现产品库小部件
接下来，请按照以下步骤操作：
1. 打开 `pages` 文件夹中的 `index.js` 文件，并添加 Cloudinary 上传小部件所需的 JavaScript 链接。
const Index = () => (
<div>
<Page>
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
</Page>
</div>
)
2. 通过创建一个名为 `components` 的文件夹以及其中名为 `ProductList.js` 的文件，并包含以下代码，添加一个 React 组件来列出产品并启用媒体上传。
import {
Card,
ResourceList,
Stack,
TextStyle,
Thumbnail,
} from '@shopify/polaris';
const ResourceListWithProducts = () => {
return (
<Card>
<ResourceList
showHeader
resourceName={{ singular: 'Product', plural: 'Products' }}
renderItem={item => {
return (
<ResourceList.Item>
<Stack>
<Stack.Item fill>
<TextStyle variation="strong">
</TextStyle>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}}
/>
</Card>
);
}
export default ResourceListWithProducts;
注意：稍后，您将使用 `ResourceListWithProducts` React 组件在您的 Shopify 应用中列出客户的产品。您还将从 Shopify 的 Polaris 设计系统中导入 Card、`ResourceList`、`Stack`、`TextStyle` 和 `Thumbnail` React 组件。
3. 通过 Shopify 的 GraphQL API 查询获取商店的产品列表。首先导入 `gql` 模板，以便您可以编写一个 GraphQL 查询，该查询将被解析为标准的 GraphQL 抽象语法树。
import gql from 'graphql-tag';
4. 使用 `gql` 模板声明一个 `GET_PRODUCTS` GraphQL 查询。
const GET_PRODUCTS = gql`
{
products(first: 100) {
edges {
node {
id
handle
title
images(first:1) {
edges {
node {
id
originalSrc
}
}
}
variants(first: 1) {
edges {
node {
id
displayName
}
}
}
}
}
}
}
`;
之后，从 `react-apollo` 包导入 `Query` 组件，以渲染上述 GraphQL 查询返回的结果。
import { Query } from 'react-apollo';
5. 修改 `ResourceListWithProducts` 函数的返回，以便 `Query` 组件可以渲染其结果。
const ResourceListWithProducts = () => {
return (
<Query query={GET_PRODUCTS}>
{({ data, loading, error }) => {
if (loading) return <div>Loading…</div>;
if (error) return <div>{error.message}</div>;
return (
<Card>
<ResourceList
showHeader
resourceName={{ singular: 'Product', plural: 'Products' }}
items={data.products.edges}
renderItem={item => {
const media = item.node.images.edges.length > 0
? (<Thumbnail source={item.node.images.edges[0].node.originalSrc}/>)
: (<Thumbnail source=''/>);
return (
<ResourceList.Item
id={item.node.id}
media={media}>
<Stack>
<Stack.Item fill>
<TextStyle variation="strong">
{item.node.title}
</TextStyle>
</Stack.Item>
</Stack>
</ResourceList.Item>
);
}}
/>
</Card>
);
}}
</Query>)
}
export default ResourceListWithProducts;
6. 从您的应用中获取 Cloudinary 凭证，并从 Next.js 导入 `getConfig` 函数。
import getConfig from 'next/config';
之后，从 `getConfig` 函数获取 `publicRuntimeConfig` 函数。
const { publicRuntimeConfig } = getConfig();
7. 在 `ResourceListWithProducts` 组件中添加一个名为 `uploadMediaClick` 的函数。
const ResourceListWithProducts = () => {
const uploadMediaClick = (productId) => {
const productIdNumber = productId.split('/')[productId.split('/').length - 1];
var myWidget = cloudinary.createUploadWidget({
cloudName: publicRuntimeConfig.cloudinaryCloudName,
upload_preset: publicRuntimeConfig.cloudinaryUploadPreset,
showAdvancedOptions: true
}, (error, result) => { if (result.event == "success") {
console.log(result.info);
} })
myWidget.update({tags: [productIdNumber]});
myWidget.open();
}
8. 通过添加一个按钮，然后上传产品相关媒体来修改列表详细信息。
<ResourceList.Item
id={item.node.id}
media={media}>
<Stack>
<Stack.Item fill>
<TextStyle variation="strong">
{item.node.title}
</TextStyle>
</Stack.Item>
<Stack.Item>
<button
name="upload_widget"
className="cloudinary-button"
onClick={uploadMediaClick.bind(this, item.node.id)}>Upload media</button>
</Stack.Item>
</Stack>
</ResourceList.Item>
请注意，按钮的 `click` 事件调用了您之前创建的 `uploadMediaClick` 函数。
使用 ProductList 组件
请按照以下步骤使用 `ProductList` 组件：
1. 再次打开 `pages` 文件夹下的 `index.js` 文件，并导入您刚刚创建的 `ProductList` 组件。
import ProductList from '../components/ProductList';
2. 将 `ProductList` 组件添加到索引页。
const Index = () => (
<div>
<Page>
<ProductList />
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
</Page>
</div>
)
3. 使用 Shopify 的 `serve` 命令编译并安装您的应用到开发商店。
...\YOUR-APP-DIRECTORY> shopify serve
Shopify CLI 现在将本地编译并启动您的自定义应用。
√ ngrok tunnel running at https://XXXXXXXXXXXX.ngrok.io, with account your@email.com √ .env saved to project root ? Do you want to update your application url? (You chose: yes) √ Whitelist URLS updated in Partners Dashboard * To install and start using your app, open this URL in your browser: https://XXXXXXXXXXXX.ngrok.io/auth?shop=cloudinaryapp.myshopify.com ┏━━ Running server... ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃ ┃ > shopify-app-node@1.0.0 dev YOUR-APP-DIRECTORY ┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js ┃ ┃ [nodemon] 2.0.6 ┃ [nodemon] to restart at any time, enter `rs` ┃ [nodemon] watching path(s): server\index.js ┃ [nodemon] watching extensions: js,mjs,json ┃ [nodemon] starting `node ./server/index.js` ┃ Loaded env from YOUR-APP-DIRECTORY\.env ┃ Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. ┃ See here for more info: https://err.sh/next.js/built-in-css-disabled ┃ ┃ event - compiled successfully ┃ > Ready on https://:8081
请注意，Shopify serve 命令会生成此 URL，您可以在浏览器中打开它来安装并开始使用您的应用：
https://XXXXXXXXXXXX.ngrok.io/auth?shop=cloudinaryapp.myshopify.com
或者，打开另一个命令行控制台并键入以下命令来启动您的应用：
...\YOUR-APP-DIRECTORY> shopify open
接下来，按照以下步骤在您的 Shopify 管理网站上创建两个产品条目：
- 芭蕾舞鞋
- 短袖 T 恤
- 选择两个条目，然后从“更多操作”菜单中选择“设置为活动”，以便它们出现在商店的目录中。
- 点击“芭蕾舞鞋”查看产品详情。请注意，URL 以 `product ID 6065347199138` 结尾。
- 接下来，点击左侧的“应用”，然后选择您的自定义应用名称（在本例中为 CloudinaryApp），以显示您刚刚添加的两个产品条目。
- 点击“芭蕾舞鞋”下的“上传媒体”，即可打开 Cloudinary 上传小部件的对话框。
- 点击“浏览”并选择一些与芭蕾舞鞋相关的图片和视频。
上面这四个媒体文件已上传到 Cloudinary，每个都已标记为 Shopify 产品 ID。
- 打开您的 Cloudinary Dashboard 查看这些文件。
- 打开其中一个文件，并验证它是否已标记为 `6065347199138`，这是 Shopify 芭蕾舞鞋的产品 ID。
- 点击“在线商店”右侧的眼睛图标，以打开您商店的网站。
- 点击主页顶部的“目录”链接。
- 点击“芭蕾舞鞋”查看其详情页面。
未显示相关媒体。编辑一些 Shopify 模板以显示产品图片和视频，如本示例 Shopify 网站所示。
修改 Shopify 商店的主题
由于 Shopify 平台不知道您在 Cloudinary 上的媒体库，因此您必须修改一个 Shopify 主题文件，例如名为 Debut 的文件，以存储您的 Cloudinary 凭证并利用 Cloudinary 产品库。请按照以下步骤操作：
- 打开您的 Shopify 管理仪表板，然后点击“主题”。
- 在“免费主题”下点击“探索免费主题”，选择“Debut”主题，然后将其添加到您的主题库。
- 下拉“Debut”名称右侧的“操作”菜单，然后选择“发布”。
将 Cloudinary 设置添加到您的 Shopify 安装
接下来，从 Cloudinary 下载此 ZIP 文件，其中包含您必须为 Shopify 的 Debut 主题所做的所有代码更改。Cloudinary 提供了一系列此类文件，您可以从中方便地将 Cloudinary 特定代码复制并粘贴到您自己的主题中。
要将更改应用于 Debut 主题：
- 登录您的 Shopify 管理控制台，导航到“在线商店”>“主题”，然后为要更改的主题选择“操作”>“编辑代码”。
- 在“Config”文件夹中选择 `settings_schema.json` 文件，然后从 ZIP 文件中的 `settings_schema.json` 中，将带有 `"name": "Cloudinary"` 的块复制并粘贴到该文件中。
- 在“Snippets”下，点击“添加新代码段”，并将其命名为 `cloudinary.liquid`。将 ZIP 文件中 `cloudinary.liquid` 的全部内容复制并粘贴到该代码段。
- 在“Layout”文件夹下选择 `theme.liquid`。从 ZIP 文件中的 `theme.liquid` 中，复制并粘贴代码以添加 Cloudinary 的 JavaScript 文件。
- 在“Snippets”文件夹下选择 `product-card-grid.liquid`。从 ZIP 文件中的 `product-card-grid.liquid` 中，将整个块复制并粘贴到该代码段，从注释“This whole block is to get Cloudinary urls.”开始。
- 在“Config”文件夹下选择 `settings_data.json` 文件。从 ZIP 文件中的 `settings_data.json` 中，将顶部的 Cloudinary 设置复制并粘贴到该文件中，并将 `shopify-demo` 替换为您的云名称。
- 导航到“在线商店”>“主题”，然后为刚刚修改的主题选择“操作”>“编辑”。您将在“主题设置”下看到“Cloudinary”。
- 在 Cloudinary 设置对话框中，配置是否启用从 Cloudinary 进行资产交付。或者，指定不同的云，并将您的交付 URL 更改为相应的 URL。
利用 Cloudinary 的产品库
上一节中使用的同一个 ZIP 文件包含了与 Cloudinary 的 产品库集成的代码。您的目标是用 Cloudinary 的产品库替换 Shopify 的产品库，显示在每个产品页面上。
完成编辑后，Cloudinary 会自动将已标记为相关产品 ID 的所有媒体从配置的 Cloudinary 帐户添加到每个产品库。您无需将这些资产上传到 Shopify — 非常方便！请注意，库中的图片顺序很重要；请务必验证其是否正确。
执行以下操作
- 返回代码编辑器，在“Sections”文件夹中选择 `product-template.liquid`。从 ZIP 文件中的 `product-template.liquid` 中，将代码从注释“Cloudinary product gallery”复制并粘贴到“Cloudinary changes end。”。
- 在“Assets”文件夹中选择 `theme.scss.liquid`。从 ZIP 文件中的 `theme.scss.liquid` 中，将注释以 `/* Cloudinary changes` 开头的 CSS 复制并粘贴。
- 默认情况下，Cloudinary 的产品库无法访问您的媒体文件。要授予此访问权限，请导航到 Cloudinary 上的管理控制台仪表板，点击“设置”图标 (⚙)，点击“安全”选项卡，然后在“受限媒体类型”下取消选中“资源列表”。
- 现在打开您的 Shopify 管理仪表板，转到“产品”，然后选择“芭蕾舞鞋”进行查看。神奇的是，您已与该产品关联的图片和视频显示在库中，如本示例所示。
进入下一步
您刚刚了解了使用 Cloudinary 和 Shopify API 将视频集成到自定义 Shopify 应用中的便捷性。而且，您才刚刚开始。
考虑在视频上传后、在 Shopify 产品页面上可见之前，使用 Cloudinary API 应用的大量转换。Cloudinary 涵盖了您作为电子商务开发者可能会遇到的几乎所有视频集成场景，并且与 Magento 和 BigCommerce 等主要电子商务平台兼容。
通过 Shopify 应用，您可以为电子商务客户提供强大有效的管理功能。有关如何正确将应用与 API 集成的详细信息，请参阅 GraphQL 管理 API 参考和 Shopify REST 管理 API 参考。
此外，您还可以通过多种方式配置 Cloudinary 产品库。观看此演示，然后自己尝试一些自定义选项。
Cloudinary 的视频工具可以帮助您的 Shopify 应用和您的客户商店脱颖而出，为客户和店主提供卓越的 UX。同样，要将 Cloudinary 的视频工具集成到您的应用中，请先注册一个免费帐户。
将 Cloudinary 集成到您的 Shopify 商店
您已经拥有 Shopify 商店，并正在寻找如何使用 Cloudinary 更好地优化您的页面？请查看以下资源以开始优化您的性能预算。