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】テンプレートタグ まとめ① (主要な言語構造、リンクの取得・出力 ほか)” にあります。