使用新的Svelte Commerce部署您的电子商务商店

Svelte Commerce是Vercel的新Svelte模板，可让您使用Shopify启动功能齐全的电子商务商店，速度惊人。尽管它可以被认为是入门套件，但它功能齐全，并且具有高性能电子商务商店所需的所有功能。此外，它是使用快速高效的Svelte Web框架构建的。

在这篇文章中，我将逐步向您展示如何使用Svelte Commerce建立电子商务商店并将其部署到Vercel和Netlify.

苗条商务电子商务设置

使用Svelte Commerce设置商店的第一步是确保您在计算机上安装了Node.js。如果您没有安装 Node.js，请查看官方文档下载并安装它。

苗条商务安装

Svelte Commerce是由Vercel在其GitHub存储库中创建和托管的开源模板。

安装它只是意味着从 GitHub 存储库克隆它。您可以通过运行来克隆它。然后，导航到克隆的项目并使用安装依赖项。git clone https://github.com/vercel/sveltekit-commerce``cd sveltekit-commerce && npm install

请记住，Svelte Commerce 中使用的默认包管理器是 pnpm。如果已安装，请继续键入。否则，您可以使用或 — 在这种情况下;笔记本电脑不读盘的原因是什么？从这三个原因解决问题您需要从项目根目录中删除该文件。pnpmpnpm installyarnnpm installpnpm-lock.yml

您的文件结构应如下所示：

要验证您是否一切正常，请在终端上运行并访问将显示在屏幕上的 URL。您应该看到类似于以下页面的内容：npm run dev

这证实了我们已经成功克隆了Svelte Commerce的默认版本，并且我们已准备好将其设为我们自己的版本。

集成 Shopify

因此，Svelte Commerce可帮助您处理电子商务商店的演示层。但是，这取决于您将提供的数据存储。默认情况下，Svelte Commerce 通苹果手机越狱有什么好处？为什么苹果手机需要越狱？过 Shopify 店面 API 使用来自 Shopify 商店的数据。

克隆项目时，您将看到它有一些默认的 Shopify 文件中的凭据。此凭据是 Vercel 团队添加的示例凭据，用于使示例模板正常工作：shopify.js

├── src
│   ├── store.js
│   └── utils
│       └── shopify.js

让我们编辑它以添加我们自己的自定义 Shopify 商店凭据。该文件将包含以下代码：shopify.js

// src/utils/shopify.js
export async function shopifyFetch({ query, variables }) {
  const endpoint =
    import.meta.env.VITE_SHOPIFY_API_ENDPOINT ||
    'https://next-js-store.myshopify.com/api/2021-10/graphql.json';
  const key =
    'ef7d41c7bf7e1c214074d0d3047bcd7b';

  try {
    const result = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': key
      },
      body: { query, variables } && JSON.stringify({ query, variables }),
      duplex: 'half'
    });


    return {
      status: result.status,
      body: await result.json()
    };
  } catch (error) {
    console.error('Error:', error);
    return {
      status: 500,
      error: 'Error receiving data'
    };
  }
}

请注意，凭据以纯文本形式显示。我们需要将其添加到文件中并删除默认凭据。因此，我们更新的代码将如下所示：.env

// src/utils/shopify.js
...  
const endpoint = import.meta.env.VITE_SHOPIFY_API_ENDPOINT;
const key = import.meta.env.VITE_SHOPIFY_API_ACCESS_TOKEN;
...

现在，在项目的根目录中创建一个文件并添加以下变量：.env

//.env
VITE_SHOPIFY_API_ENDPOINT=
VITE_SHOPIFY_API_ACCESS_TOKEN=

要获取这些凭据，我们需要一个 Shopify 帐户和一个店面。趣知笔记如果您还没有帐户，请创建一个帐户，然后创建一个商店。

当您拥有所有商店设置时，您的SHOPIFY_API_ENDPOINT将采用此模式。因此，请将商店名称替换为您的商店名称。然后，您可以立即更新变量：https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json``.env

//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=

接下来，让我们从仪表板获取 Shopify 访问令牌。

访问 Shopify 从您的仪表板

您的 Shopify 后端是一切发生的地方，从生成访问令牌和创建将在电子商务商店中显示的产品，到查看您的库存和分析等等。

让我们在后端完成基本设置，这将允许我们为 Svelte Commerce 生成店面访问令牌。在 Shopify 管理控制面板中，单击边栏上的应用链接。这将返回一个弹出窗口。然后，单击弹出窗口中的应用程序和销售渠道设置：

你将转到一个屏幕，在该屏幕中你将看到“为应用商店开发应用”按钮，如下所示。点击它：

然后，您将被带到另一个屏幕，趣知笔记网站地图该屏幕允许您搜索应用程序或创建新应用程序。选择“创建应用”按钮，如下所示：

创建应用后，需要配置店面 API 范围，如下页所示：

在此处，选择所有店面 API 访问范围，然后选择“保存”：

最后，导航到“凭据”部分，然后单击“安装应用程序”按钮：

安装过程完成后，将显示您的店面 API 访问令牌，如下所示：

复制令牌，转到文件，并在其中添加访问令牌：.env

//.env
VITE_SHOPIFY_API_ENDPOINT=https://{shopname}.myshopify.com/admin/api/2022-10/graphql.json
VITE_SHOPIFY_API_ACCESS_TOKEN=kjbabfjkhfkjhjbkvhjvfiofguhfy

恭喜！您的Svelte Commerce驱动的电子商务商店已准备就绪。您可以根据需要调整设计或任何其他功能。您在 Shopify 商店中创建的所有产品都将显示在您的自定义商店中。最好的部分是您无需支付 Shopify 月费，因为 API 是免费使用的。

现在我们已经准备好了我们的电子商务商店，让我们部署它供全世界看到。

将您的电子商务商店部署到Vercel

开发人员喜欢使用 Vercel 的原因之一是，任何人都可以在几分钟内将支持的应用程序部署到他们的服务器，这非常容易。您不必担心任何复杂的设置。你真正需要做的就是将你的代码推送到 GitHub 并连接到 Vercel 一次，每次你向 GitHub 推送新的更新时，它都会自动部署。

因此，让我们从在Vercel网站上创建一个帐户并登录开始。

接下来，将您的应用商店代码推送到 GitHub、GitLab 或 BitBucket，因为每次将更新推送到存储库时，Vercel 都会通过此介质触发自动部署。请务必仔细检查是否已将文件添加到文件中，以免意外将机密推送到 GitHub：.env``.gitignore

对于此步骤，请在访问此 New Project – Vercel 时保持登录您的Vercel帐户。然后，您应该会看到一个请求连接 Git 提供程序的页面。继续连接并导入您的项目：

最后，将其配置为使用环境变量，然后单击“部署”按钮，如下所示：

仅此而已。只需等待部署完成，您应该准备好向世界展示您的电子商务商店。这很简单，对吧？

让我们也部署到Netlify。

如何将您的Svelte Commerce部署到Netlify

Netlify 用户享受与 Vercel 用户类似的好处 — 部署简单、开发人员友好，并且它在前端应用程序和 lambda 函数方面大放异彩。

就像我们为Vercel所做的那样，在部署方面与Netlify没有太大区别。首先，注册并登录到您的 Netlify 后端。

从那里，单击添加新站点按钮并选择从您的 GitHub 配置文件导入它。然后，系统将引导您连接 GitHub 存储库：

选择存储库并将其导入时，单击高级选项并添加环境变量：

接下来，单击“部署站点”按钮：

瞧！您的电子商务商店已准备就绪。

您可以随时通过利用Svelte的所有功能并利用Shopify API提供的免费功能来改善您的电子商务商店。

结论

建立一个全面的电子商务商店需要时间，并带来一些财务和精神负担。如果您正在尝试为您的企业或客户建立一个定制的电子商务商店，并且您想在不影响安全性或质量的情况下快速完成，那么 Svelte Commerce 可能是您最好的选择。