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

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

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

修正するファイルは2つ、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-CUBE3をご利用の方は是非お試しください。