EC-CUBE4とWordPressを連携して、パーツを共通化する方法

こちらの記事ではEC-CUBE4のヘッダーやフッターなどのパーツを、WordPressで呼び出す方法の解説をします。

EC-CUBE4やWordPressのインストールされている前提で解説させていただきます。

構築環境

・EC-CUBE
バージョン・・・4.2.1
インストールディレクトリ・・・https://hoge.com/

・WordPress
バージョン・・・6.7
インストールディレクトリ・・・https://hoge.com/blog/

「https://hoge.com/」はご自身の構築環境に合わせて、解説をご確認ください。

１．EC-CUBEでヘッダーなどの共通パーツの作成
- ① EC-CUBEのカート情報の確認
- ②パーツの作成
２．WordPressで呼び出し
- PHPの場合
- JSの場合
まとめ
最後に

１．EC-CUBEでヘッダーなどの共通パーツの作成

① EC-CUBEのカート情報の確認

まずは下記のページにアクセスしてみてください。

https://hoge.com/block/cart

こちらのページはEC-CUBEのデフォルトで存在して、カートに入れた情報がフロント側で確認することができます。

②パーツの作成

ヘッダーやフッターなどの共通パーツを、上記ページのように作成していきます。

上記ページが作成されているファイルは下記から編集可能です。

src/Eccube/Controller/Block/CartController.php

「/src/Eccube/Controller/Block/」の中に、下記のようなWordPressに呼び出したいパーツを作成します。

HeaderController.php
FooterController.php

もしappフォルダで編集したい場合は、下記のディレクトリにアップしてください。

app/Customize/Controller/Block

appフォルダに構築の前提で進めさせていただきます。

カート情報が必要であれば、下記のようなコードになります。

<?php
namespace Customize\Controller\Block;
use Eccube\Controller\AbstractController;
use Eccube\Entity\Cart;
use Eccube\Service\CartService;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
class HeaderController extends AbstractController
{
    protected $cartService;

    public function __construct(
        CartService $cartService
    ) {
        $this->cartService = $cartService;
    }

    /**
     * URLを変更したい場合は、下記を変更してください。
     * @Route("/block/header", name="block_header", methods={"GET"})
     */
    public function index(Request $request)
    {
        $Carts = $this->cartService->getCarts();

        // 二重に実行され, 注文画面でのエラーハンドリングができないので
        // ここではpurchaseFlowは実行しない

        $totalQuantity = array_reduce($Carts, function ($total, $Cart) {
            $total += $Cart->getTotalQuantity();

            return $total;
        }, 0);
        $totalPrice = array_reduce($Carts, function ($total, $Cart) {
            $total += $Cart->getTotalPrice();

            return $total;
        }, 0);

        return $this->render('Block/header.twig', [
            'totalQuantity' => $totalQuantity,
            'totalPrice' => $totalPrice,
            'Carts' => $Carts,
        ]);
    }
}

上記コードはカート情報を持ってくるため、複雑なコードになっておりますが、最終行あたりのreturn $this->renderで下記のheader.twigを呼び出しています。

app/template/default/Block/header.twig

上記をアップロードしたら、下記のURLにアクセスしてみてください。

https://hoge.com/block/header

表示されていたら、成功です。

同様にFooterController.phpを作成していきます。

カート情報などが必要ないのであれば、下記のコードだけで十分です。

<?php
namespace Customize\Controller\Block;
use Eccube\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
class FooterController extends AbstractController
{
    /**
     * @Route("/block/footer", name="block_footer", methods={"GET"})
     */
    public function index()
    {
        return $this->render('Block/footer.twig');
    }
}

下記ページにアクセスして、表示されていたら成功です。

https://hoge.com/block/footer

同様の手順で必要な共通パーツを作成していきます。

２．WordPressで呼び出し

作成したパーツのページを読み込みます。

PHPの場合

<?php
  define('BASE_URL', 'https://hoge.com');
  $header = file_get_contents(BASE_URL . '/block/header');
  $footer = file_get_contents(BASE_URL . '/block/footer');
?>
<div id="header"><?php echo $header; ?></div>
<div id="footer"><?php echo $footer; ?></div>

JSの場合

<script>
  window.addEventListener('DOMContentLoaded',()=>{
    const headerContent = document.getElementById('header');
    const footerContent = document.getElementById('footer');
    // EC-CUBEからヘッダーの読み込み
    if (headerContent) {
      fetch("/block/header")
        .then(res => res.text())
        .then(html => headerContent.innerHTML = html)
        .catch(err => console.error("ヘッダー取得失敗:", err));
    }
    // EC-CUBEからフッターの読み込み
    if (footerContent) {
      fetch("/block/footer")
        .then(res => res.text())
        .then(html => footerContent.innerHTML = html)
        .catch(err => console.error("フッター取得失敗:", err));
    }
  })
</script>
<div id="header"></div>
<div id="footer"></div>

jsで共通パーツを呼び出していますので、headタグの中に直書きして、一番早く処理してもらうようにしましょう。

まとめ

EC-CUBE4とWordPressのパーツを共通化は、難しいものではありません。

是非、挑戦してみてください。

最後に

ロジカルスタジオでは、エンジニアを募集中です！

ぜひ下のバナーから確認してみて下さい！