WordPressで同じドメイン内のEC-CUBE 4系のカート情報を表示する方法

執筆者情報

中村 圭介

株式会社カジヤ/代表取締役　男性向けファッション通販サイト運営の会社を経験し、現職に至る。デザインや開発から、ECやメディアのコンサルティングまでを一貫して行う。お付き合いのあるお客様の事業を成功に導けるように、再現性のある成長支援ができる会社を目指す。

EC-CUBE 4系とWordPressは、比較的容易に同じドメイン内に設置できるので、EC-CUBE 4系を運営時にメディア機能が必要になり、同一ドメイン下に設置して運用するというケースがよくあります。

ただ、同じサーバーに同居させるのは容易ですが、もう少し連携を強めたいとお悩みの方もいるのではないでしょうか。

そこで今回は、WordPressサイトで、同じドメイン内のEC-CUBE のカート情報を表示させる方法をご紹介します。

尚、EC-CUBE4系 x WordPressを同ドメインで構築する時のベストな方法についてはこちらの記事で解説していますので、興味のある方はぜひご覧になってください。

https://cajiya.co.jp/column/7606

※この記事では、「Code Snippets」というプラグインを追加して、そのプラグイン経由でコードを追加していますが、テーマのfunctions.php 内にPHPコードを挿入したり、紹介したJavaScriptやCSSをテーマファイル内に直接埋め込む方法でも実装は可能ですので、ぜひカスタマイズしてお使いください。

1. WordPressで同じドメイン内のEC-CUBE 4系のカート情報を表示する方法

1-1. 任意の箇所にカートを表示したい位置にHTMLを設置

まず、カート情報を表示したいお好みの場所（header.php や ウィジェット等）に、以下のHTMLを挿入してください。

<div class="js-ec-cart"></div>

1-2. プラグイン「Code Snippets」をインストール

※以降の章で紹介するPHPやJavaScript、CSSをWordPress内に埋め込むために利用するプラグインです。このプラグインのインストールをスキップして、独自の方法で実装していただいても問題ありません。

WordPress管理画面の「プラグイン＞新規追加」から、プラグイン追加画面を開き、画面右上の検索フォームに「Code Snippets」と入力してください。

少し待つと検索結果が表示されますので、作者: Code Snippets Proから提供されている「Code Snippets」をインストール、有効化してください。

1-3. カートの表示を整えるCSSを設置

「Code Snippets」をインストールすると、管理画面にメニューが追加されるので「Snippets＞Add New」から、以下の内容でSnippetを新規追加してください。

尚、今回設定しているCSSは、WordPress 6.0.1 時点のデフォルトテーマ「twentytwentytwo」での表示を想定して調整しております。ご利用のテーマ、サイトスタイルに合わせて修正が必要な場合があります。

• タイトル
  • eccube_wp_head_style
• Code
  • 以下のURLからPHPコードをコピーして、Code内に貼り付けてください。
    https://github.com/cajiya/sample_code/blob/main/2022/0807_WP_eccube_wp_head_style.php
    （画像の赤枠の箇所のアイコンをクリックすると、コピーが完了します）
    

1-4. EC-CUBE からカートのHTMLを呼び出すJavaScriptを設置

「Snippets＞Add New」から、以下の内容でSnippetを新規追加してください。

• タイトル
  • eccube_wp_head
• Code
  • 以下のURLからPHPコードをコピーして、Code内に貼り付けてください。
    https://github.com/cajiya/sample_code/blob/main/2022/0807_WP_eccube_wp_head.php
    9行目、赤枠の 「”/$SHOP/block/cart”」は、店舗毎に設定が異なります。EC-CUBEをWebルートにインストールしている場合は「”/block/cart”」となり、「/store」にインストールしている場合は「”/store/block/cart”」です。

1-5. 完了〜表示確認

以上で作業は完了です。きちんとカートが取得できていれば以下の動画のように、WordPressのヘッダー内に同じドメイン下のEC-CUBEのカート情報が表示されるかと思います。

2. (株)カジヤでは、EC-CUBE 4系のカスタマイズや通販サイトの運営代行を承っております

当社では、通販サイトの立ち上げからカスタマイズだけでなく、Webコンサルティングや日々の更新業務の代行まで、幅広くサポートを行っております。（参考料金についてはこちらをご確認ください）。

EC-CUBEのカスタマイズやリニューアル、新規オープンのご相談や、通販の売上UP、メディア集客でお困りのことがございましたら、以下フォームよりお気軽にご相談くださいませ。