プログラミング学習帳

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

EC-CUBE NO IMAGE

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

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

構築環境

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

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

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

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

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

https://hoge.com/block/cart

こちらのページはカートに入れた情報がフロント側で確認することができます。

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

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

src/Eccube/Controller/Block/CartController.php

「/src/Eccube/Controller/Block/」の中に、「HeaderController.php」や「FooterController.php」、「SideController.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
{
    /**
     * @var CartService
     */
    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) {
            /* @var Cart $Cart */
            $total += $Cart->getTotalQuantity();

            return $total;
        }, 0);
        $totalPrice = array_reduce($Carts, function ($total, $Cart) {
            /* @var Cart $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で呼び出し

Ajaxを使って、作成した今日パーツのページを読み込みます。

<script>
  window.addEventListener('DOMContentLoaded',()=>{
    var headerContent = document.getElementById('header');
    var footerContent = document.getElementById('footer');
    // EC-CUBEからヘッダーの読み込み
    if(headerContent) {
      var HeaderRequest = new XMLHttpRequest();
      HeaderRequest.open("GET", "/block/header");
      HeaderRequest.addEventListener("load", function(){
        headerContent.innerHTML = this.responseText;
      });
      HeaderRequest.send();
    }
    // EC-CUBEからフッターの読み込み
    if(footerContent) {
      var FooterRequest = new XMLHttpRequest();
      FooterRequest.open("GET", "/block/footer");
      FooterRequest.addEventListener("load", function(){
        footerContent.innerHTML = this.responseText;
      });
      FooterRequest.send();
    }
  })
</script>
<script>
  window.addEventListener('DOMContentLoaded',()=>{
    var headerContent = document.getElementById('header');
    var 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>

あとは必要な個所に、htmlを記述すると、表示することができます。

<div id="header"></div>
<div id="footer"></div>

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

まとめ

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

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