MinCartをJavaScriptで拡張する - Extend MinCart with javascript

はじめに

私たちの目標の一つは、開発者に優しいアプリケーションを提供し、特定のニーズに応じて機能をカスタマイズし、拡張できるようにすることです。

このドキュメントは、JavaScriptを使用してMinCartを拡張するための基本的なガイドとして役立ちます。これは、Shopifyストアにより高度でカスタムな機能を統合しようとする開発者のための出発点です。より詳細なドキュメントも現在作成中で、今後公開予定です。

MinCartの拡張

MinCartは、`window`オブジェクト上に「mincart」オブジェクトを公開し、MinCartの動作に反応するためのいくつかのイベントを提供しています。以下は、主要なイベントと現在の商品の最小数量を取得する方法についてのコメント付き例です。

JavaScript スニペット

/**
 * このイベントは、MinCartがウェブストレージまたは
 * サーバーから制限設定を読み込んだことを意味します。
 * 
 * 制限の計算を速くするために、サーバーから取得した後に制限をウェブストレージに保存します。
 * これにより、サーバーの応答を待たずにチェックアウトをロックすることができます。
 *
 * ウェブストレージから制限を計算した後でも、サーバーから制限を取得して
 * 設定が変更されていないことを確認します。
 *
 * これにより、ページロード時に`limits-loaded`と`limits-calculation`のイベントが
 * 2回トリガーされます。
 */
document.addEventListener("mincart:limits-loaded", event => {
  const mincart = event.detail.mincart;
  console.log("制限が読み込まれました！");
  console.log(mincart.limits);

  mincart.limits.forEach(limit => {
    const currentProductIsLimitTarget = limit.items.some(limitTargetItem => {
      /**
       * mincart.itemIsLimitTargetは、特定のアイテムが
       * 制限対象アイテムのターゲットであるかどうかを確認するために使用されます。
       *
       * 関数パラメータ:
       * @param {object} item - アイテムオブジェクト
       * @param {object} limitTargetItem - 制限対象アイテムオブジェクト
       * @param {string} limitType - 制限タイプ
       * アイテムが制限に含まれている場合はtrueを返し、それ以外の場合はfalseを返します。
       *
       * mincart.currentProductは商品ページでのみ使用可能です。（バリアント制限タイプを
       * 使用している場合は、現在選択されているバリアントを指定するために
       * "variant_id"プロパティを手動で追加する必要があります）
       */
      return mincart.itemIsLimitTarget(mincart.currentProduct, limitTargetItem, limit.type)
    });

    /**
     * アイテムは、価格、数量、ユニークアイテムの数量、または重さの
     * いずれかの単一制限で除外できます。
     * 
     * mincart.itemIsExcludedFromTypeは、指定されたアイテムが指定された制限の
     * 特定のタイプから除外されているかどうかを確認します。
     *
     * @param {object} item - アイテムオブジェクト
     * @param {object} limit - 制限オブジェクト
     * @param {string} type - 制限のタイプ（価格、数量、アイテム、重さ）
     * 指定されたタイプの制限からアイテムが除外されている場合はtrueを返し、それ以外の場合はfalseを返します。
     */
    const currentProductIsExcluded = mincart.itemIsExcludedFromType(mincart.currentProduct, limit, "quantity");

    if (currentProductIsLimitTarget && !currentProductIsExcluded) {
      console.log("現在の商品の最小数量", limit.min_quantity);
    }
  });
});

/**
 * このイベントは、MinCartが制限が尊重されているかどうかを計算し始めたことを意味します。
 *
 * 制限が読み込まれた後、またはカートが更新されたときにトリガーされます。
 */
document.addEventListener("mincart:limits-calculation-started", event => {
  const mincart = event.detail.mincart;
  console.log("制限計算が開始されました！");
  console.log(mincart.limits);
});

/**
 * このイベントは、MinCartが制限が尊重されているかどうかを計算し終えたことを意味します。
 *
 * 制限が読み込まれた後、またはカートが更新されたときにトリガーされます。
 * 
 * このイベントの後、すべての制限には「isRespected」ブーリアンがあり、
 * 現在制限が尊重されているかどうかを知ることができます。
 */
document.addEventListener("mincart:limits-calculation-finished", event => {
  const mincart = event.detail.mincart;
  console.log("制限計算が完了しました！");
  console.log(mincart.limits);
});

結論

このスニペットは、MinCartの機能を拡張し始めるための基本的な例です。この例を修正し、ストアの独自の要件に合わせて拡張することをお勧めします。

今後の包括的なドキュメントにご期待ください。より詳細なガイダンスが提供される予定です。それまでの間、質問がある場合やさらにサポートが必要な場合は、サポートチームにお気軽にお問い合わせください。

更新日 28/10/2024