Dawn's cart-drawer.js の解説: ファイルの構造とカスタマイズ方法

raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js にあるファイルは、Dawn のスライドアウト式カート引き出しを制御するコンパイル済み JavaScript アセットです。CartDrawer カスタム要素を定義し、開閉アニメーション、AJAX カート更新、ページ全体との状態同期を処理します。このファイルの URL を検索した場合、おそらくソースコードを読む、拡張する、またはカスタマイズが壊れた場合のデバッグを試みているのでしょう。

重要なポイント

• cart-drawer.js は Dawn の assets/ フォルダ内にあり、theme.liquid から遅延スクリプトとして読み込まれます。
• CartDrawer クラスは Web Component(カスタム要素)で、Drawer を拡張し、open() と close() メソッドを公開します。
• ドロワーは DOM を直接操作するのではなく、Shopify の Section Rendering API を呼び出して再レンダリングします。
• GitHub の Dawn main ブランチには未リリースのコードが含まれることがあります。マーチャント向けの安定版は Shopify テーマストアにあります。
• cart-drawer.js を直接修正するとアップデートが手動になります。可能な限りアプリブロックか別のアセットファイルを使用してください。

開発者がこのファイルを探す理由

Dawn は Shopify の公式無料リファレンステーマです。2026 年 3 月時点で、268,000 以上のアクティブな Shopify ストアで使用されており、プラットフォーム上で最も広くデプロイされているテーマです。完全なソースが GitHub で公開されているため、開発者は定期的に以下の目的でこのファイルを取得します。

• GitHub の UI なしで CartDrawer クラスを読む
• ローカル コピーとアップストリーム main ブランチを比較し、テーマ更新後の破壊的な変更を検出する
• 特定のメソッド(renderContents() や getSectionsToRender() など)をコンパニオン スクリプトにコピーする
• サードパーティ統合を記述する前に pub/sub イベント システムを理解する

このファイルはソース可用ですが、寛容なライセンスの下でオープンソースではないため、その一部を再配布する前に常に Shopify のライセンス条項を確認してください。

ファイルの構造

Dawn は「HTML ファースト、JavaScript は必要な場合のみ」という哲学に従っており、これが cart-drawer.js の記述方法を形成しています。ファイル内で見つかるものは以下の通りです。

1. Drawer ベース クラス - open()、close()、フォーカス トラップ、aria-expanded 属性を処理する汎用 Web Component。カート引き出しとモバイル メニュー引き出しの両方がこれを継承します。
2. CartDrawer クラス - Drawer を拡張します。open() 時に renderContents() を呼び出して、Shopify の Section Rendering API 経由で cart-drawer セクションの新しいレンダリングを取得し、内部 HTML をスワップします。これにより、ドロワーはページのリロードなしで常に現在のカート状態を反映します。
3. CartDrawerItems クラス - cart.js で定義された CartItems を拡張します。数量の変更、行アイテムの削除、エラー表示を処理し、フルページ カートの動作をミラーリングしますが、ドロワーの DOM ID(CartDrawer- プレフィックス付き)にスコープされます。
4. イベント リスナー - ファイルは cart-update pub/sub イベントをリッスンして、他のコンポーネント(クイック追加、商品フォーム)がドロワーを直接にカップリングせずにドロワーの更新をトリガーできるようにします。

getSectionsToRender() メソッドは、セクション ID をドロワーの HTML 内のセレクターにマッピングするセクション ディスクリプタの配列を返します。AJAX レスポンスが到着すると、Dawn はその配列を反復処理し、関連する DOM ノードのみをパッチして、再レンダリングを正確に保ちます。

GitHub でファイルを読む方法

正規の場所は以下の通りです。

https://github.com/Shopify/dawn/blob/main/assets/cart-drawer.js

curl、fetch、またはコード エディターに適したプレーン テキスト バージョンを取得するには、以下のようにします。

https://raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js

移動する main ブランチではなく特定のリリースに固定するには、main をタグ(例:v15.4.1 2025 年 12 月の安定版リリース)に置き換えます。これにより、Shopify が新しいコードをシップしても変わらない安定的な URL が得られます。

https://raw.githubusercontent.com/Shopify/dawn/v15.4.1/assets/cart-drawer.js

注: Shopify は、main ブランチにはまだマーチャントにリリースされていない機能のコードが含まれる場合があると明示的に述べています。ライブ ストアと比較する場合は、常に main ではなく、インストールされたバージョンに一致するタグ付きリリースと比較してください。

ファイルを上書きせずにカート引き出しをカスタマイズする方法

cart-drawer.js を直接編集することが最速のルートですが、長期的には最も苦痛です。すべての Dawn テーマ更新にはそのファイルの新しいバージョンがシップされ、手動編集とは、手動で変更を再適用するか、変更を失うかを意味します。

以下は推奨される順序でのより安全なパターンです。

• 別のアセット ファイルでサブクラス化します。 assets/cart-drawer-custom.js を作成し、theme.liquid の cart-drawer.js の後にインポートして、CartDrawer クラスを修正するのではなく拡張します。コードはテーマ更新に耐えられます。
• pub/sub イベント システムを使用します。 Dawn は subscribe(PUB_SUB_EVENTS.cartUpdate, callback) ユーティリティを公開します。任意のスクリプトはドロワーの内部メソッドに触れることなく、カート変更をリッスンして応答できます。
• アプリ ブロックを使用します。 Shopify アプリを構築している場合、またはサポートする予定のカスタマイズがある場合、アプリ ブロックを使用するとテーマ ファイルを編集することなく HTML とスクリプトをドロワーのフッターに注入できます。
• カート タイプのノーコード オプション。 Shopify admin で Online Store > Themes > Customize > Theme Settings > Cart に移動します。1 行のコードも書かずに、カート タイプを Drawer、Page、Notification の間で切り替えることができます。

cart-drawer.js を直接編集する必要がある場合(例えば、getSectionsToRender() でフェッチされるセクションを変更するため)、GitHub でテーマをバージョン管理し、すべての Dawn リリース時に何が変わったかを確認できるように diff ワークフローをセットアップしてください。

一般的なカスタマイズと既知の落とし穴

プログラムでドロワーを開きます。 CartDrawer web コンポーネントは、多くの開発者がすぐに見つける単純な CartDrawer.open() メソッドを公開します。より難しい部分は、外部的なカートへの追加後にドロワーのコンテンツを更新することです。推奨パターンは、/cart/add.js への AJAX 呼び出しの後に cart-update pub/sub イベントをディスパッチしることです。これらの内部 API は Dawn バージョン間で変更されるため、内部レンダリング メソッドを直接呼び出さないようにしてください。

DOM ID の命名規則。 Dawn はドロワー固有の要素 ID に CartDrawer- プレフィックスを付けます(例:CartDrawer-LineItemStatus、CartDrawer-CartErrors)。フルページ カートからカスタマイズを移植する場合は、これらのデュアル ID パターンに注意してください: cart.js と cart-drawer.js の JavaScript はどちらも getElementById('cart-errors') || getElementById('CartDrawer-CartErrors') をクエリします。これが、要素のいずれかを削除すると、サイレント失敗を引き起こす可能性がある理由です。

数量ルール サポート。 cart-drawer.js の現在のバージョンは item.variant.quantity_rule 制約(最小注文数、増分、最大値)を尊重します。これは卸売および B2B ストアにとって重要です。カスタム数量ロジックを追加する場合は、独自の検証レイヤーを追加する前に、バリアント の quantity_rule が既に処理されているかどうかを確認してください。

CSS と JS クラスのカップリング。 Dawn の HTML はスタイリングと JavaScript フックに同じクラス名を使用します。drawer__inner-empty などの CSS クラスの名前を変更し、対応する JavaScript セレクターを更新しないと、サイレント エラーで空カート状態レンダリングが壊れます。

ほとんどの開発者が見落とす在庫角度

成長している Shopify ストアで頻繁に発生するパターンがあります: カート ドロワーは完璧に機能し、顧客がアイテムを追加し、カートに追加された時間と顧客がチェックアウトしようとした時間との間に製品が在庫切れになります。ドロワーは買い手にプロアクティブに警告する組み込みメカニズムを持っていません。これはテーマレイヤーの制限で、バグではありません。

実際の修正は上流の在庫管理レイヤーにあります。各 SKU の売上スループット レート、リード時間、リオーダー ポイントを知ることで、カート ドロワーが「在庫切れ」エラーを表示する前に、ベストセラーを在庫に保つことができます。チームが現在リオーダー決定を感覚またはスプレッドシートを見つめることで行っている場合、その場所が在庫切れが実際に発生する場所です。

Stockcast: Inventory Forecast は毎日 Shopify の在庫レベルを監視し、透明でステップバイステップの数学(ブラック ボックスではない)でランク付けされた在庫切れを予測し、毎日のダイジェストを送信して、顧客がカートで可用性の問題を見る前に、ops チームが何をリオーダーすべきかを知ります。無料プラン 25 SKU まで、有料プランで 14 日間トライアル。

よくある質問

Q: Dawn の assets フォルダ内の cart-drawer.js は cart.js と同じですか? いいえ。cart.js は CartItems ベース クラスとフルページ カートのロジックを含みます。cart-drawer.js はそのベース クラスをインポートまたは拡張し、ドロワー固有の動作、つまり Drawer の開閉 web コンポーネントと、DOM クエリを CartDrawer- プレフィックス付き ID にスコープする CartDrawerItems サブクラスを追加します。

Q: Shopify ストアで実行されている Dawn のバージョンを確認するにはどうすればよいですか? Shopify admin で Online Store > Themes に移動します。バージョン番号はアクティブなテーマ名の下に表示されます。その後、github.com/Shopify/dawn/releases の GitHub リポジトリで、そのバージョンをタグ付きリリースと照合し、その正確なタグの生ファイルを取得できます。

Q: 本番環境で raw.githubusercontent.com/Shopify/dawn/main/assets/cart-drawer.js を安全にフェッチできますか? いいえ。main ブランチは開発ブランチで、まだマーチャントにリリースされていない機能のコードが含まれる場合があります。本番リファレンスの場合は、常にタグ付きリリース URL(例:v15.4.1)を使用してください。ブラウザ コンテキストで GitHub から生ファイルを直接読み込むことも、パフォーマンスと信頼性の理由から推奨されません。常に asset_url Liquid フィルターを使用して、Shopify の CDN 経由でアセットをサーブしてください。