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 install
yarnnpm install
pnpm-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 可能是您最好的选择。