@nuxtjs/snipcart

 发行说明

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

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

功能

• 基于 snipcart 接口文档的完整 TypeScript 支持
• 开箱即用，完整支持 Snipcart 文档
• 借助 Nuxt 3 的强大功能实现高度定制

快速设置

1. 将 @nuxtjs/snipcart 依赖添加到您的项目中

npx nuxi@latest module add snipcart

2. 将 @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
• 包装器实用函数，分别使用 setLanguage 或 setCurrency 更改语言或货币

由于我们提供完整的 TypeScript 支持，请尽情使用并阅读所公开内容的描述。

加载

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

如果您异步加载，请注意在加载完成之前，您将无法访问 window.Snipcart 或 useSnipcart 公开的 snipcart。因此，请调整您的逻辑。请查看 Playground，我们已添加了一些注释

自定义

使用 Nuxt 定制 Snipcart 组件非常容易。除了自定义 HTML 外，您还可以使用自己的 CSS 类来覆盖 snipcart 组件。

为此，您可以创建例如 public/snipcart-custom.html，就像在 Playground 中一样。并确保在 Nuxt 配置中使用 templatesUrl 属性添加路径

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

这将传递给 Snipcart，以便它知道要检索哪些文件才能访问它将用于构建 Snipcart 组件的所有模板

Snipcart SDK

如前所述，我们通过默认的 window.Snipcart 或从可组合的 useSnipcart 公开 Snipcart SDK。因此，您将拥有对 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