EC-CUBEでよく利用する、Twigのテンプレートタグの備忘録です。順次追記します。

主要な言語構造 (Language constructs)

{{ ~ }} 出力タグ

値を出力します。フィルターを利用して出力内容をコントロールすることも可能です。

{% ~ %} 処理タグ

変数の利用や条件分岐などで使用します。

{# ~ #} コメントタグ

コメントアウトします。複数行も対応。

参考:Extending Twig
https://twig.symfony.com/doc/2.x/advanced.html

リンクの取得・出力

{{ url(‘homepage’) }} トップページ

※末尾に ” / (スラッシュ)” が自動的に入ります。

<!-- ◉入力例 -->
<a href="{{ url('homepage') }}">
<!-- ◉出力例 -->
<a href="https://example.com/">

{{ url(‘product_list’) }} 商品一覧ページ

<!-- ◉入力例 -->
<a href="{{ url('product_list') }}">
<!-- ◉出力例 -->
<a href="https://example.com/products/list">

{{ url(‘product_list’) }}?〜 商品一覧ページ(条件指定)

指定する内容をそのまま記述する他、eccube_config から読み込むことも可能です。
※app/config/eccube/packages/eccube.yaml の設定が反映されます。

<!-- ◉入力例 -->
<!-- カテゴリ指定  -->
<a href="{{ url('product_list') }}?category_id=20">
<!-- 複数のクエリを指定  -->
<a href="{{ url('product_list') }}?mode=&category_id=&name=&pageno=1&disp_number=0&orderby=3">
<!-- 新しい順に:eccube_config 使用  -->
<a href="{{ url('product_list') }}?orderby={{eccube_config.eccube_product_order_newer}}">

<!-- ◉出力例 -->
<!-- カテゴリ指定  -->
<a href="https://example.com/products/list?category_id=20">
<!-- 複数のクエリを指定  -->
<a href="https://example.com/products/list?mode=&category_id=&name=&pageno=1&disp_number=0&orderby=3">
<!-- 新しい順に:eccube_config 使用 -->
<a href="https://example.com/products/list?orderby=2">

{{ url(‘product_detail’,{‘id’: xx}) }} 商品詳細ページ

商品IDを指定します。

<!-- ◉入力例 -->
<a href="{{ url('product_detail',{'id': 10}) }}">
<!-- ◉出力例 -->
<a href="https://example.com/products/detail/10">

{{ url(‘contact’) }} お問い合わせページ

<!-- ◉入力例 -->
<a href="{{ url('contact') }}">
<!-- ◉出力例 -->
<a href="https://example.com/contact">

{{ url(‘help_xxx’) }} Helpディレクトリのページ

Helpディレクトリのページを出力します。

<!-- ◉入力例 -->
<!-- 特商法  --> 
<a href="{{ url('help_tradelaw') }}">
<!-- プライバシーポリシー -->
<a href="{{ url('help_privacy') }}">
<!-- 利用規約 -->
<a href="{{ url('help_agreement') }}">

<!-- ◉出力例 -->
<!-- 特商法  --> 
<a href="https://example.com/help/tradelaw">
<!-- プライバシーポリシー -->
<a href="https://example.com/help/privacy">
<!-- 利用規約 -->
<a href="https://example.com/help/agreement">

{{ url(‘mypage_xxx’) }} Mypageディレクトリのページ

Mypageディレクトリのページを出力します。

<!-- ◉入力例 -->
<!-- マイページ  --> 
<a href="{{ url('mypage') }}">
<!-- ログイン -->
<a href="{{ url('mypage_login') }}">
<!-- お気に入り -->
<a href="{{ url('mypage_login') }}">

<!-- ◉出力例 -->
<!-- マイページ  --> 
<a href="https://example.com/mypage">
<!-- ログイン -->
<a href="https://example.com/mypage/login">
<!-- お気に入り -->
<a href="https://example.com/mypage/favorite">

user_dataディレクトリのページ

パーマリンク名を指定して読み込みます。
※ user_data の表示名を変更や削除している場合は置き換えられます。

<!-- ◉入力例 -->
<a href="{{ url('user_data', {'route': 'パーマリンク'}) }}">
<a href="{{ url('user_data', {'route': 'flow'}) }}">

<!-- ◉出力例 -->
<a href="https://example.com/user_data/flow">

各ファイルの読み込み

読み込みたいファイルの場所を指定します。

<!-- ◉入力例 -->
<!-- ①templateディレクトリから読み込む -->
<img src="{{ asset('assets/img/001.jpg') }}">
<!-- ②user_dataディレクトリから読み込む -->
<img src="{{ asset('file/img/002.ipg','user_data') }}">
<!-- ③user_dataディレクトリから読み込む:eccube_config 使用 -->
<img src="{{ url(eccube_config.eccube_user_data_route, {'route': '003.jpg '}) }}">

<!-- ◉出力例 -->
<!-- ①templateディレクトリから読み込む -->
<img src="/html/template/default/assets/img/001.jpg">
<!-- ②user_dataディレクトリから読み込む -->
<img src="/html/user_data/file/img/002.jpg">
<!-- ③user_dataディレクトリから読み込む:eccube_config 使用 -->
<img src="/html/user_data/003.jpg">

知っていると便利

使用しているTwigのバージョン確認

<!-- ◉入力例 -->
{{ constant('Twig_Environment::VERSION') }}

<!-- ◉出力例 -->
2.12.2

【参考】
Twig Documentation(ver.2) ※当記事ではこちらを参照。
https://twig.symfony.com/doc/2.x/
Twig Documentation(ver.3)
https://twig.symfony.com/doc/3.x/
EC-CUBE 4 開発者向けドキュメント
https://doc4.ec-cube.net/

3 件のコメントが “【EC-CUBE4】テンプレートタグ まとめ① (主要な言語構造、リンクの取得・出力 ほか)” にあります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です