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はまだロードされていません
snipcartでwatchを使用して、準備ができていることを確認します
リアルタイムストアのサブスクリプション
bindProductItemやbindProductItemCustomなどのユーティリティ関数
setLanguage または setCurrency を使用して言語または通貨を変更するためのラッパーユーティリティ関数

完全なTypeScriptのサポートがあるので、いろいろ試して、公開されている内容の説明を読んでみてください。

読み込み

私たちはSnipcartのさまざまな読み込み方法に従っています。loadStrategy 設定プロパティを使用して、jsの読み込みを制御できます。loadCSS 設定プロパティを使用して、snipcartにCSSを読み込まないように指示できます。

非同期で読み込む場合、読み込まれるまで window.Snipcart または useSnipcart によって公開される snipcart にアクセスできないことに注意してください。そのため、ロジックを調整する必要があります。プレイグラウンドにいくつかのコメントを追加したので、確認してください

カスタマイズ

nuxtを使用すると、snipartコンポーネントを非常に簡単にカスタマイズできます。独自のクラスCSSに加えてカスタムHTMLを使用して、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

@nuxtjs/snipcart