スマートスライドカート
公式オンラインマニュアル

1. プラグイン概要・スライドドロワーの仕組み

一般的なEC-CUBEでは、「カートに入れる」ボタンを押すたびに画面が暗転して「カート画面（/cart）」へ強制遷移するため、ショップに戻って買い物を続けるには「ショッピングを続ける」ボタンを押して元のページを探し直さなければなりませんでした。この画面遷移が大きな離脱要因となり、カゴ落ち（Cart Abandonment）を誘発していました。

本プラグイン（SlideCartDrawer）は、D2CグローバルトレンドであるShopifyスタイルの非同期スライドドロワーカートをEC-CUBE上に完全ネイティブ実装します。

2. 動作要件・システム環境

本プラグインをご利用いただくための推奨システム環境は以下の通りです。

3. インストール・初期セットアップ

Zero-Config設計により、インストールして有効化するだけで標準テンプレートおよびBootstrapベースのカスタムテーマに自動適用されます。レイアウト管理でのブロック配置やHTMLの直接改修は不要です。

1. プラグインの入手・インストール
   EC-CUBE管理画面の オーナーズストア ＞ プラグイン ＞ プラグイン一覧 より、本プラグイン（SlideCartDrawer）をインストールしてください。
2. プラグインの有効化
   一覧内の「スマートスライドカート」行にある右側の歯車アイコンメニューから「有効にする」をクリックします。
3. キャッシュのクリア
   コンテンツ管理 ＞ キャッシュ管理 より「キャッシュ削除」を実行します。
4. フロント画面での動作確認
   ショップの商品詳細ページまたは商品一覧ページを開き、「カートに入れる」を押してドロワーが右側からスムーズに展開されることを確認してください。

4. EC-CUBE基本設定との送料無料自動連動仕様

本プラグインの送料無料ゲージは、EC-CUBE標準の店舗基本設定（BaseInfo）に登録された条件をリアルタイムに自動参照します。

連動ロジック

• 金額条件（例: 税込5,000円以上で送料無料）： カート内の小計（税込）をリアルタイム計算し、送料無料到達までの残額とパーセンテージプログレスバーを動的描画します。
• 数量条件（例: 合計5個以上で送料無料）： カート内商品の合計数量をカウントし、あと何個で無料になるかを自動表示します。
• 送料無料達成時： ゲージバーが100%に達すると、達成メッセージ（例:「おめでとうございます！送料無料が適用されました 🎉」）へと即座に切り替わります。
• 送料無料条件が未設定の場合： 基本設定に送料無料条件が入力されていない場合は、ゲージバー部分が自動で非表示となります。

5. 管理画面の設定項目一覧

EC-CUBE管理画面の 設定 ＞ 店舗設定 ＞ プラグイン設定 ＞ スマートスライドカート設定 から、プラグインの動作やゲージバーのカラー、おすすめ商品の設定を行います。

5-1. 基本設定

プラグインの全体的な有効・無効を制御します。

5-2. 送料無料ゲージバー設定

ドロワーカート上部に表示される送料無料カウントダウンプログレスバーを設定します。

5-3. ワンクリックおすすめ商品設定（ついで買いの自動促進）

ドロワーカート内にワンクリックで追加できる「おすすめ商品（ついで買い商品）」の表示を設定します。

6. 規格選択・オプション拡張プラグイン互換性

EC-CUBEでは規格（サイズやカラー等）を持つ商品が多く存在し、またサードパーティ製の「名入れ」「ギフトラッピング」「定期購入」といったオプション追加プラグインが導入されるケースが一般的です。

互換性の特徴

• 規格1・規格2の動的連動： 標準の規格セレクトボックスの挙動を一切妨げません。在庫切れ時のボタン非活性化なども通常通り機能します。
• サードパーティ製オプションプラグイン： フォーム内に追加されたカスタムパラメータを自動透過するため、既存のプラグインと衝突（コンフリクト）を起こしません。
• 通常フォームの誤作動防止： 会員登録フォーム、お問い合わせフォーム、ログインフォーム等の一般フォームを誤検知しない厳格なセレクタ検証を行っています。

7. モバイルファーストUI・ヘッダーバッジ同期

日本のEC利用者の75%以上がスマートフォン経由です。本プラグインはモバイルでの片手操作性に徹底的にこだわって設計されています。

モバイル最適化仕様

• 親指操作に最適化された幅設計： モバイル表示時は画面幅の約88%（または全画面）を占有し、背景にはタップで閉じるディム（Dim）オーバーレイを配置。
• 44px以上のタッチターゲット： 数量の「＋」「−」ボタンや削除ボタンは、親指で誤タップしない十分なタップ領域を確保。
• ヘッダーバッジ完全同期： ドロワー内で数量変更や削除を行った場合でも、ヘッダーに配置されたカートアイコンのバッジ数値（.ec-cartNavi__badge）および合計金額がリアルタイムに更新されます。
• ヘッダーカートアイコンとの連携： ページ上部のカートアイコンをクリックした際にも、画面遷移せずにスライドドロワーが開きます。

8. eギフト（ソーシャルギフト機能）との連携手順

当開発元が提供する「ソーシャルギフト（eギフト）機能プラグイン」と併用することで、スライドドロワー内の「ご購入手続きへ」ボタンの直下に「🎁 eギフトで贈る（住所不要）」専用ボタンを設置し、ドロワー内から直接eギフトフローを呼び出すことができます。

1. ステップ 1：ブロックの新規作成
   EC-CUBE管理画面の コンテンツ管理 ＞ ブロック管理 ＞ 新規作成 を開きます。
   以下の項目を入力し、下のコードをそのまま貼り付けて「登録」をクリックします。

   • ブロック名： スライドカート eギフト連動ブリッジ（任意のわかりやすい名前）
   • ファイル名： slide_cart_social_gift_bridge

   {# SlideCartDrawer x SocialGift 連動ブリッジスクリプト #}
   <style>
   /* eギフト専用ボタンスタイル（スライドカートのテーマに最適化） */
   .scd-btn-social-gift {
       display: flex !important;
       align-items: center;
       justify-content: center;
       width: 100%;
       margin-top: 8px;
       padding: 12px 16px;
       font-size: 0.95rem;
       font-weight: 700;
       color: #ffffff !important;
       background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
       border: none;
       border-radius: 8px;
       text-align: center;
       text-decoration: none !important;
       cursor: pointer;
       box-shadow: 0 3px 8px rgba(225, 29, 72, 0.25);
       transition: all 0.2s ease-in-out;
   }
   .scd-btn-social-gift:hover {
       background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
       box-shadow: 0 5px 12px rgba(225, 29, 72, 0.35);
       transform: translateY(-1px);
       color: #ffffff !important;
   }
   .scd-btn-social-gift .scd-gift-icon {
       margin-right: 6px;
       font-size: 1.1rem;
   }
   </style>
   
   <script>
   document.addEventListener('DOMContentLoaded', function () {
       // 1. スライドカートドロワーのフッターにeギフトボタンを動的挿入
       function injectSocialGiftButton() {
           const checkoutBtn = document.querySelector('#scd-btn-checkout');
           if (!checkoutBtn) return;
   
           // 二重挿入を防止
           if (document.querySelector('#scd-btn-social-gift')) return;
   
           // eギフト専用ボタンの生成
           const giftBtn = document.createElement('button');
           giftBtn.type = 'button';
           giftBtn.id = 'scd-btn-social-gift';
           giftBtn.className = 'scd-btn scd-btn-social-gift';
           giftBtn.innerHTML = '<span class="scd-gift-icon">🎁</span><span>eギフトで贈る（住所不要）</span>';
   
           // クリックイベントのハンドリング
           giftBtn.addEventListener('click', function (e) {
               e.preventDefault();
   
               // カート内に商品が存在するか確認
               const badge = document.querySelector('#scd-badge-count');
               const itemCount = badge ? parseInt(badge.textContent, 10) : 0;
               if (itemCount <= 0) {
                   alert('カートに商品が入っていません。');
                   return;
               }
   
               // カート画面（/cart）に既に滞在している場合はメッセージカードモーダルを直接起動
               const giftModalEl = document.getElementById('socialGiftCartModal');
               if (giftModalEl && window.bootstrap && window.bootstrap.Modal) {
                   const modal = new bootstrap.Modal(giftModalEl);
                   modal.show();
                   return;
               }
   
               // 一般画面（トップ・詳細等）ではカート画面へ遷移し、パラメータ経由でモーダルを自動展開
               window.location.href = '{{ url("cart") }}?open_gift_modal=1';
           });
   
           // 「ご購入手続きへ」ボタンの直下に挿入
           checkoutBtn.after(giftBtn);
       }
   
       // 2. 初期ロードおよびDOM変更（ドロワー展開・数量変更・再描画）を監視してボタン表示を維持
       injectSocialGiftButton();
       const observer = new MutationObserver(function () {
           injectSocialGiftButton();
       });
       observer.observe(document.body, { childList: true, subtree: true });
   
       // 3. /cart 画面で open_gift_modal パラメータを検知した場合にモーダルを自動オープン
       if (window.location.search.indexOf('open_gift_modal=1') !== -1) {
           const tryOpenModal = setInterval(function () {
               const giftModalEl = document.getElementById('socialGiftCartModal');
               if (giftModalEl && window.bootstrap && window.bootstrap.Modal) {
                   clearInterval(tryOpenModal);
                   const modal = new bootstrap.Modal(giftModalEl);
                   modal.show();
               }
           }, 150);
           setTimeout(function () { clearInterval(tryOpenModal); }, 3000);
       }
   });
   </script>

2. ステップ 2：レイアウト管理への配置（2つのレイアウト両方に設定）
   EC-CUBE管理画面の コンテンツ管理 ＞ レイアウト管理 を開きます。
   EC-CUBEの仕様上、ページレイアウトは「トップページ用」と「下層ページ用」に分かれているため、ショップ内のすべての画面でドロワーを開いた際にeギフトボタンを表示させるには両方のレイアウトに配置する必要があります。

   • ①「トップページ用レイアウト」の設定：
     レイアウト編集画面で「未使用のブロック」一覧から作成した スライドカート eギフト連動ブリッジ をドラッグし、#footer（フッターエリア）内に配置して保存します。
   • ②「下層ページ用レイアウト」の設定：
     同様にレイアウト編集画面を開き、#footer（フッターエリア）内に配置して保存します。
3. ステップ 3：フロント画面での動作確認
   トップページおよび商品詳細ページから商品をカートに入れ、展開されたスライドドロワーの「ご購入手続きへ」の下に「🎁 eギフトで贈る（住所不要）」ボタンが表示されることを確認します。
   ボタンをクリックすると、カート内容を保持したままメッセージカード作成モーダルが起動し、住所不要のeギフト購入手続きへスムーズに直行できます。

9. よくある質問・トラブルシューティング