要望や症状
EC-CUBEで会員専用サイトや卸売りサイトを構築する際、商品価格をログイン前は非表示にし、会員ログイン後のみ表示したい要件がある場合があります。
理由や原因
EC-CUBE標準では、商品価格は全てのユーザーに対して表示される仕様となっています。会員ログイン状態による表示制御を行うためには、テンプレート側でログイン状態を判定する実装が必要です。
対象となるページ
- 商品詳細ページ(カートボタン付き)
- 商品一覧ページ
- 新着商品ブロック
- 商品検索結果ページ
解決策
Twigテンプレートでの会員ログイン判定
EC-CUBEのTwigテンプレートでは、is_granted('ROLE_USER')を使用して会員のログイン状態を判定することができます。
実装手順
以下のテンプレートファイルを、Customizeディレクトリにコピーして編集を行います。本体テンプレートを直接編集すると、アップデート時に変更が失われるため、必ずCustomizeディレクトリを使用してください。
1. 商品詳細ページの編集
app/template/default/Product/detail.twigをapp/Customize/Resource/template/default/Product/detail.twigにコピーして、価格表示部分を以下のように変更します。
{% if is_granted('ROLE_USER') %}
<!-- 価格表示部分 -->
<div class="ec-productRole__price">
<!-- 既存の価格表示コード -->
</div>
{% else %}
<p class="text-muted">価格を確認するには会員ログインが必要です。</p>
{% endif %}
2. 商品一覧ページの編集
app/template/default/Product/list.twigをapp/Customize/Resource/template/default/Product/list.twigにコピーして、価格表示部分を以下のように変更します。
{% if is_granted('ROLE_USER') %}
<!-- 価格表示部分 -->
<span class="price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
{% else %}
<span class="text-muted">要ログイン</span>
{% endif %}
3. 新着商品ブロックの編集
app/template/default/Block/new_item.twigをapp/Customize/Resource/template/default/Block/new_item.twigにコピーして編集します。
{% if is_granted('ROLE_USER') %}
<!-- 価格表示部分 -->
{% else %}
<span class="text-muted">価格はログイン後表示</span>
{% endif %}
4. 商品検索ブロックの編集
app/template/default/Block/search_product.twigをapp/Customize/Resource/template/default/Block/search_product.twigにコピーして編集します。
{% if is_granted('ROLE_USER') %}
<!-- 価格表示部分 -->
{% else %}
<span class="text-muted">要ログイン</span>
{% endif %}
編集完了後の処理
すべての編集が完了したら、以下のコマンドを実行してキャッシュをクリアします。
bin/console cache:clear
この実装により、会員がログインしていない状態では価格が非表示となり、ログイン後に価格が表示されるようになります。