EC-CUBE4はテンプレートファイルにTwigが使われており、Twigの書式で変数の取得や条件分岐を行うことになります。
今回、この記事を記載するにあたり、トップページのロゴ箇所ではH1タグを使いたいが、トップページ以下の階層ではロゴ箇所はdivタグにしたい、と言う要望を実現します。
{% set request_uri = app.request.server.get('REQUEST_URI') %}
{% if request_uri == '/store/' %}
{# request_uriの内容を出力する #}
{{request_uri}}
{% endif %}
1行目、app.request.server.get(‘REQUEST_URI’) にて現在見ているページのURIを取得し、変数request_uriにセットします。
EC-CUBE4がルート直下にインストールされている場合は’/’が出力されるでしょう。
私の場合はEC-CUBE4をstoreディレクトリにインストールしていましたので、’/store/’が出力されました。
(以下、トップページは/store/として記載します。)
2行目でrequest_uriが’/store/’の場合は実行する、という形で条件分岐をしています。前述の通り、私の環境ではEC-CUBE4のトップページはドメイン/store/という構成となっていますので、トップページでのみ条件分岐を行なうことを想定しています。
3行目はTwigのコメントですので、開発者のみ閲覧できる内容となります。
4行目でrequest_uriの内容を出力しています。現在適用しているテンプレートのいずれかのブロックに処理を記述し、画面上に /store/と表示されればOKです。
5行目はif文の終了です。
以上ですが、簡単にソースコードについて紹介しました。
次に紹介するソースコードはEC-CUBE4デフォルトのテンプレートのブロック(logo.twig)を利用して、上記内容を実装してみます。編集するブロックは以下のディレクトリにあります。
/app/template/default/Block/logo.twig
または、EC-CUBE4管理画面のコンテンツ管理 > ブロック管理 > ロゴ からも編集は可能です。
以下のように実装することでトップページのロゴ箇所ではh1タグを表示し、トップページ以外ではdivタグを表示する、ということが実現できます。
<div class="ec-headerRole">
<div class="ec-headerRole__title">
<div class="ec-headerTitle">
<div class="ec-headerTitle__title">
{% set request_uri = app.request.server.get('REQUEST_URI') %}
{% if request_uri == '/store/' %}
<h1><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1>
{% else %}
<div><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></div>
{% endif %}
</div>
</div>
</div>
</div>
以上となりますが、EC-CUBE4でトップページかどうかif文で条件分岐をする、についてまとめました。
以下のサイトもとても参考になりましたので、合わせてご覧ください。