ロゴブロックに入っているh1タグを動的に変更する方法

EC-CUBE3.0の標準テンプレートでは、ロゴエリアはブロックとして配置されており、コントローラと紐付けられていないため、内容を動的に変更するのが若干手間となっています。

今回はh1タグをここに配置したまま商品名やカテゴリ名を動的に入れられるようにする方法をご紹介します。

考え方としては色々ありますが、今回はTwigのグローバル変数を使用してみます。

修正するファイルは２つ、Application.phpとBlock/logo.twigです。

src/Eccube/Application.php

twigインスタンスに’PageLayout’や’title’をaddGlobalしている部分を探して、下に追記します。

下記コードは商品詳細ページのアクセスの場合のみ、custom_h1という全テンプレート内で使用できるグローバルな変数をtwigへ渡します。

// 商品詳細ページ
if($request->get('_route') == 'product_detail'){
     $Product = $app['eccube.repository.product']->find($request->get('id'));
     $h1 = $Product->getName().'のページ'; //「"商品名"のページ」と表示される
     $app['twig']->addGlobal('custom_h1', $h1);
}
// カテゴリページ
elseif($request->get('_route') == 'product_list' && $request->get('category_id')) { // カテゴリページ
     $Category = $app['eccube.repository.category']->find($request->get('category_id'));
     $h1 = $Category->getName().'のページ'; //「"カテゴリ名"のページ」と表示される
     $app['twig']->addGlobal('h1', $h1);
}

※H1に関するコードを一箇所にまとめたかったのでApplicationに書きましたが、ProductControllerのdetailメソッドに下記を書けば結果は同じです。(商品詳細ページの場合)

$h1 = $Product->getName().'のページ';
$app['twig']->addGlobal('h1', $h1);

Block/logo.twig

テンプレート側では、custom_h1が存在すればcustom_h1を、存在しなければショップ名をh1タグへ表示します。

                <h1 class="header_logo">
                    <a href="{{ url('homepage') }}">
                        {% if custom_h1 is defined %}
                        {{ custom_h1 }}
                        {% else %}
                        {{ BaseInfo.shop_name }}
                        {% endif %}
                    </a>
                </h1>

以上でロゴブロック内のh1タグを商品名が入った形に変更可能です。

やや力技ですが、ブロックにデータを渡したい時に役立ちます。

EC-CUBE３をご利用の方は是非お試しください。

EC-CUBEゴールドパートナー EC-CUBEは株式会社イーシーキューブの商標です

ECCUBE制作トップへ

EC-CUBEカスタマイズに関するお問い合わせはこちら

[重要]現在公式にセキュリティサポートが切れていないPHPは8.1以上、MySQLは8.0以上で、対応しているEC-CUBEバージョンは4.2以上です。古いEC-CUBEを使っている方は適切なタイミングでバージョンアップをご検討ください。