Commerce Ajax Add to Cart
Drupal Commerceの「カートに追加」操作をAjax化し、ページリロードなしでカートを更新できるようにするモジュール。
dc_ajax_add_cart
インストール
composer require 'drupal/dc_ajax_add_cart:^3.1'
composer require 'drupal/dc_ajax_add_cart:^2.0'
概要
Commerce Ajax Add to Cartは、Drupal Commerceサイトにおける商品のカート追加操作をAjax化するモジュールです。従来のDrupal Commerceでは、商品をカートに追加するとページ全体がリロードされますが、このモジュールを使用することで、ページリロードなしにスムーズにカートへ商品を追加できます。
このモジュールは商品バリエーションの表示フォーマッターとして「Ajax add to cart form」を提供し、商品ページの表示設定から簡単に有効化できます。カートに商品が追加されると、カートブロックも自動的に更新され、確認メッセージもAjax経由で表示されます。
さらに、2つのサブモジュールを提供しており、「dc_ajax_add_cart_popup」はカート追加時にモーダルポップアップで追加した商品を表示し、「dc_ajax_add_cart_views」はViews内でのカートからの商品削除や数量変更をAjax化します。これにより、ECサイトにおけるユーザー体験を大幅に向上させることができます。
Features
- 「カートに追加」操作をAjax化し、ページリロードなしで商品をカートに追加可能
- 商品バリエーションのフィールドフォーマッター「Ajax add to cart form」を提供
- カート追加時にカートブロックを自動的にAjax更新
- カート追加時の確認メッセージをAjaxで表示
- 同一商品バリエーションの注文アイテムを結合するオプション
- サブモジュールによるモーダルポップアップ表示機能
- サブモジュールによるViews内でのAjax削除・数量更新機能
Use Cases
ECサイトでのスムーズな商品追加体験
商品一覧ページや商品詳細ページで「カートに追加」ボタンをクリックした際、ページ全体がリロードされることなく商品がカートに追加されます。ユーザーは現在のページに留まったまま、ヘッダーのカートブロックが更新されるのを確認できます。これにより、複数の商品を連続してカートに追加する際の操作がスムーズになります。
カート追加確認のモーダルポップアップ表示
dc_ajax_add_cart_popupサブモジュールを有効化すると、商品をカートに追加した直後にモーダルダイアログが表示され、追加した商品の情報とカートページへのリンクが表示されます。ユーザーはすぐに購入手続きに進むか、引き続き買い物を続けるかを選択できます。ポップアップのテンプレートはテーマで上書き可能です。
カートページでのAjax数量変更・商品削除
dc_ajax_add_cart_viewsサブモジュールを使用すると、Viewsで構築されたカートページで、商品の数量変更や削除をページリロードなしに行えます。カートビューに「Remove button (Ajax)」フィールドを追加すると個別商品の削除が、「Quantity text field (Ajax)」フィールドを追加すると数量の更新がAjaxで行われます。合計金額もリアルタイムで更新されます。
商品クイックビューとの組み合わせ
商品一覧ページでクイックビューモーダルを使用している場合、このモジュールのAjaxカート追加機能と組み合わせることで、モーダル内から直接カートに商品を追加し、モーダルを閉じずにカートブロックが更新される優れたユーザー体験を提供できます。
Tips
- フォーマッター設定で「Combine order items containing the same product variation」を有効にすると、同じ商品を複数回カートに追加した際に、別々の行ではなく数量が増加します。
- ポップアップのカスタマイズはテーマでdc-ajax-add-cart-popup.html.twigテンプレートを上書きして行います。product_variation変数には表示モード「dc_ajax_add_to_cart_popup」でレンダリングされたバリエーションが含まれます。
- Viewsのカートフォームで両方のAjaxフィールド（削除ボタンと数量編集）を使用する場合、同じAjaxラッパーIDが使用されるため、どちらの操作でもビュー全体が正しく更新されます。
- dc_ajax_add_cart.refresh_page_elements_helperサービスは他のカスタムモジュールから利用可能で、独自のAjax操作でカートブロックやステータスメッセージを更新する際に便利です。
Technical Details
Admin Pages 2
/admin/commerce/config/product-types/{product_type}/edit/display
商品バリエーションフィールドの表示フォーマットを「Ajax add to cart form」に変更してAjaxカート追加機能を有効化します。
/admin/commerce/config/product-variation-types/{variation_type}/edit/display
ポップアップサブモジュール使用時に「Ajax add to cart popup」表示モードを有効化します。
Hooks 6
hook_entity_bundle_create
新しい注文アイテムタイプが作成されたときに、そのバンドル用の「dc_ajax_add_cart」フォーム表示を自動作成します。
hook_entity_type_build
commerce_order_itemエンティティタイプに「dc_ajax_add_cart」フォームクラスを登録します。
hook_form_entity_form_display_edit_form_alter
dc_ajax_add_cartフォーム表示の編集画面で、不要なpurchased_entityウィジェットオプションを非表示にします。
hook_theme (dc_ajax_add_cart_popup)
ポップアップサブモジュールが提供するテーマフック。カート追加確認ポップアップのテンプレートを定義します。
hook_form_BASE_FORM_ID_alter (dc_ajax_add_cart_popup)
ポップアップサブモジュールがカート追加フォームを変更し、ダイアログAjaxライブラリを追加します。
hook_views_data_alter (dc_ajax_add_cart_views)
Viewsサブモジュールがcommerce_order_itemテーブルにAjax削除ボタンと数量編集フィールドを追加します。
Troubleshooting 5
カートブロックが正しくテーマのリージョンに配置されていること、およびブロックのCSSクラス「.cart--cart-block」が存在することを確認してください。RefreshPageElementsHelperサービスはこのクラスセレクターを使用してカートブロックを更新します。
ステータスメッセージブロックがテーマに配置されていることを確認してください。モジュールはアクティブなテーマのsystem_messages_blockプラグインを検索し、そのリージョンにメッセージを追加します。
これは既知の問題（drupal.org/project/dc_ajax_add_cart/issues/2941531）です。複数のカート更新操作を連続して行う際に発生することがあります。
これは既知の問題（drupal.org/project/dc_ajax_add_cart/issues/2941532）です。カート更新操作後にフィードバックメッセージが正しく保持されないことがあります。
dc_ajax_add_cart_popupサブモジュールが有効化されていること、およびcore/drupal.dialog.ajaxライブラリがロードされていることを確認してください。また、商品バリエーションタイプの表示設定で「Ajax add to cart popup」表示モードを有効化する必要があります。