@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 尚未載入
• 使用 watch 觀察 Snipcart，確保它已準備就緒
• 即時商店訂閱
• 實用函式，如 bindProductItem 或 bindProductItemCustom
• 包裝器實用函式，分別使用 setLanguage 或 setCurrency 更改語言或貨幣

由於我們有完整的 TypeScript 支援，請隨意使用並閱讀所暴露內容的描述。

載入

我們遵循 Snipcart 不同的載入方式。您可以使用 loadStrategy 配置屬性控制 JS 的載入。您可以使用 loadCSS 配置屬性告訴 Snipcart 不載入 CSS。

如果您非同步載入，請注意在載入完成之前，您將無法訪問 window.Snipcart 或 useSnipcart 暴露的 snipcart。因此，請調整您的邏輯。請檢視 Playground，我們添加了一些註釋。

定製

使用 Nuxt，定製 Snipcart 元件變得非常容易。除了自定義 HTML 外，您還可以使用自己的 CSS 類來覆蓋 Snipcart 元件。

為此，例如，像 playground 中一樣建立 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