@nuxtjs/snipcart
如果您喜欢使用此模块，请考虑赞助
如果您正在寻找 nuxt 2 版本，请使用 1.x 版本
特性
- 基于 snipcart 接口文档 的完整 typescript 支持
- 开箱即用地完全支持 snipcart 文档
- 利用 nuxt3 的强大功能进行高度定制
快速设置
- 在您的项目中添加
@nuxtjs/snipcart依赖项
npx nuxi@latest module add snipcart
- 将
@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 或 snipcart（由 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