@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
✨
请随时查看我们精美的示例演示。
useSnipcart
我们尽量不为 Snipcart API 创建太多包装器,这样如果 Snipcart 发生更改,我们就不必维护那么多。但您可能会发现其中一些很有用,例如
- 公开 Snipcart 实例
- isReady 将定义基本设置已准备好使用,但 Snipcart 尚未加载
- 使用 watch 监控 Snipcart 以确保它已准备好
- 实时商店订阅
- 实用函数,如 bindProductItem 或 bindProductItemCustom
- 包装器实用函数,分别使用
setLanguage
或setCurrency
更改语言或货币
由于我们有完整的 TypeScript 支持,请使用它并阅读公开内容的描述。
加载
我们遵循 Snipcart 的不同加载方式。您可以使用 loadStrategy
配置属性控制 js 的加载。您可以使用 loadCSS
配置属性告诉 snipcart 不加载 css。
如果您加载异步,请考虑在加载完成之前您将无法访问 window.Snipcart
或 useSnipcart
公开的 snipcart
。所以请调整您的逻辑。请查看我们在演示中添加的一些注释
自定义
使用 nuxt,自定义 snipart 组件非常容易。除了自定义 html 之外,还可以使用您自己的 class css 来覆盖snipcart 组件。
为此,请创建一个例如 public/snipcart-custom.html
作为演示内部。并确保使用 templatesUrl
属性在 nuxt 配置中添加路径
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