@nuxtjs/snipcart
このモジュールを気に入っていただけましたら、スポンサーをご検討ください
Nuxt 2 バージョンをお探しの方は、1.x バージョンをお使いください。
機能
- Snipcart インターフェース ドキュメントに基づく完全な TypeScript サポート
- Snipcart のドキュメントをすぐに完全にサポート
- Nuxt3 のパワーで高いカスタマイズ性
クイックセットアップ
- プロジェクトに
@nuxtjs/snipcartの依存関係を追加します
npx nuxi@latest module add snipcart
nuxt.config.tsのmodulesセクションに@nuxtjs/snipcartを追加します
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 を使用すると、Snipcart コンポーネントのカスタマイズが非常に簡単です。Snipcart コンポーネントをオーバーライドするために、カスタム HTML に加えて独自の CSS クラスを使用してください。
そのためには、例えばプレイグラウンド内にあるように 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