【EC-CUBE 4】Twig まとめ(4) ~ マクロについて ~

本記事では、Twigテンプレートでコード(機能)の再利用に使われる『マクロ』について纏めています。

マクロとは?

繰り返し使いたいコードを小さなパッケージにまとめられるツール。
マクロとしてコードを設定しておくと、そのマクロの名前を呼び出すだけで設定されたコードを繰り返し使えます。

なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。

【動作環境】
EC CUBEのバージョン:4.2.1
サーバー:Xserver

目次

マクロの使い方

STEP

マクロの定義

以下コードを記載したTwigファイルを用意します。

{% macro 名前(引数) %}
    ~~設定するコード~~
{% endmacro %}

マクロは、{% macro 名前(引数) %}{% endmacro %}タグで定義されます。
このタグ内に、実行したいコードを記載します。

引数(パラメータ)について

マクロは引数としてパラメータを受け取ることができます。
これにより、同じマクロでもパラメータに応じた異なる表示を出すことができます。

STEP

マクロの呼び出し

マクロを使いたいTwigテンプレートで、まずSTEP1で作成したファイルをインポートします。
インポートには、fromimportキーワードを使用します。

{% import 'ファイル名' as エイリアス名 %}
  • エイリアス名:別名のことで、ここで設定した名前を使って当該ファイルを呼び出すことができます。
  • fromキーワードは、ファイルから必要なマクロだけを選択してインポートできます。

次に、マクロを使用したい場所で以下のようにマクロを呼び出します。

{{ エイリアス名.定義したマクロ名(引数) }}

マクロを別ファイルに分けず、同じファイル内に記述して呼び出すこともできます。
同じファイル内に記述したマクロを呼び出す際は、{{ self.マクロ名(引数) }}とすることで呼び出せます。

{# マクロの定義 #}
{% macro message(text) %}
    <p>{{ text }}</p>
{% endmacro %}

{# マクロの使用 #}
<div>
    {{ self.message('Hello') }}
</div>

ただし、extendsを使用しているテンプレートでは、同じファイル内で定義されたマクロをselfキーワードで参照できません。EC-CUBEで用意されているTwigテンプレートは基本的に{% extends 'default_frame.twig' %}が記述されているため、マクロは別のファイルに定義してimportする必要があります。

マクロを使った実装例

STEP

マクロを定義したファイルを作成・保存する

以下コードを記載したTwigテンプレートを用意します。

{% macro sample_macro(message) %}
    <p>Hello {{ message }}</p>
{% endmacro %}

messageというパラメータを受け取り、<p>タグでパラメータの内容を表示するシンプルなコードです。

ファイル名を「sample_macros.twig」とし、「app/template/default/Macro」に保存します。
Macroフォルダは自分で用意します。

STEP

マクロを使いたいTwigテンプレートでマクロを呼び出す

マクロを使いたいTwigテンプレートを開き、{% extends 'default_frame.twig' %}の次の行に以下コードを記述します。

{% import 'Macro/sample_macros.twig' as sampleMacros %}

{% main block %} 内の、マクロを使いたい場所に以下コードを記述します。

{{ sampleMacros.sample_macro('World') }}

これで、コードを記載した場所に「Hello World」と表示されます。

マクロの使い方まとめ

  1. マクロを定義したファイルを用意
    • {% macro 名前(パラメータ) %}{% endmacro %}でマクロを定義。
    • マクロ内に繰り返し使いたいコードを記述
  2. パラメータの使用
    • マクロは必要に応じてパラメータを受け取ることができる。
      • これにより、マクロを再利用する際に異なった表示を出せる。
  3. マクロを使いたいファイルで、マクロのインポート
    • {% import 'ファイル名.twig' as エイリアス %}と記述し、マクロをインポートする。
    • {% from 'ファイル名.twig' import マクロ名 as エイリアス %}と記述すれば、特定のマクロだけをインポートすることも可能。
  4. マクロの呼び出し
    • {{ エイリアス.マクロ名(パラメータ) }}の形式でマクロを呼び出す。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次