使用 Vue & UI Pro 的仪表板模板

snipcart
snipcart

Snipcart 集成模块,适用于 Nuxt

@nuxtjs/snipcart

npm 版本npm 下载量许可证 发行说明

如果您喜欢使用此模块,请考虑赞助

如果您正在寻找 nuxt 2 版本,请使用
1.x 版本

特性

  • 基于 snipcart 接口文档 的完整 typescript 支持
  • 开箱即用地完全支持 snipcart 文档
  • 利用 nuxt3 的强大功能进行高度定制

快速设置

  1. 在您的项目中添加 @nuxtjs/snipcart 依赖项
npx nuxi@latest module add snipcart
  1. @nuxtjs/snipcart 添加到 nuxt.config.ts 文件的 modules 部分
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/snipcart'
  ],
  snipcart: {
    publicApiKey: "youkey"
  }
})

就是这样!您现在可以在您的 Nuxt 应用中使用 Snipcart

随时查看我们精美的示例 playground。

useSnipcart

我们尽量避免在 Snipcart API 周围创建太多包装器,这样我们就不必在 Snipcart 更改时维护太多代码。但您可能会发现其中一些很有用,因为它们可以:

  • 公开 snipcart 实例
  • isReady 将定义基本设置已准备好使用,但 snipcart 尚未加载
  • 在 snipcart 上使用 watch 以确保它已准备好
  • 实时商店订阅
  • 实用函数,例如 bindProductItem 或 bindProductItemCustom
  • 包装器实用函数,分别使用 setLanguagesetCurrency 更改语言或货币

由于我们拥有完整的 TypeScript 支持,请随意使用它并阅读公开内容的描述。

加载

我们遵循 Snipcart 的 不同加载方式。您可以使用 loadStrategy 配置属性来控制 js 的加载。您可以使用 loadCSS 配置属性告诉 snipcart 不要加载 css。

如果您异步加载,请注意,在加载之前,您将无法访问 window.Snipcartsnipcart(由 useSnipcart 公开)。因此,请调整您的逻辑。在 playground 中,我们添加了一些注释

自定义

使用 Nuxt,自定义 snipart 组件非常容易。除了自定义 html 之外,还可以使用您自己的类 css 来覆盖 snipcart 组件

为此,例如创建 public/snipcart-custom.html(如 playground 中所示)。并确保您使用 templatesUrl 属性在 nuxt 配置中添加路径

 snipcart: {
    templatesUrl: '/snipcart-custom.html',

这将传递给 snipcart,使其了解要检索哪个文件,以便访问它用来构建 snipcart 组件的所有模板

Snipcart SDK

正如我们之前所说,我们公开了 snipcart SDK,默认情况下它与 window.Snipcart 或 composable useSnipcart 一样。因此,您将拥有对 snipcart SDK 的完全相同访问权限

开发

# Install dependencies
pnpm install

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release