EC-CUBE3でページごとに送られてくるデータを確認・表示する方法まとめ。
EC-CUBE3のテンプレートをカスタマイズする際、デフォルトのタグ構造を変更したり、デフォルトにはないデータを表示させたい場合などにデータをチェックしておく必要があります。
ここではEC-CUBE3で配列データの確認方法を紹介します。
ページに送られてくるデータをdumpで確認する
どのようなデータが送られてくるかはページごとに異なるので、テンプレートをカスタマイズする際にはチェックしておく必要があります。
例えば商品詳細ページの場合、テンプレートを見るとpagination
という配列が使われています。
この配列データの中身にどんなデータが入っているかを確認する場合は以下のようにします。
list.twig
<!-- ================= 省略 ================= -->
<!-- データを表示 -->
{{ dump(pagination) }}
<!-- ▼item_list▼ -->
<div id="item_list">
<div class="row no-padding">
{% for Product in pagination %}
<div id="result_list_box--{{ Product.id }}" class="col-sm-3 col-xs-6">
<!-- ================= 省略 ================= -->
</div>
{% endfor %}
</div>
</div>
<!-- ▲item_list▲ -->
<!-- ================= 省略 ================= -->
テンプレートを書き換えた後商品一覧ページをリロードすると画像のようにデータが表示されます。
他のページでも同様に送られてくるデータをdumpタグで確認することが可能。
dumpで確認したデータをテンプレート内で使う方法
dumpで確認できたデータを使用するにはTwigタグを使って表示することができます。Twigタグは以下のようなもの。
{{ Product.id }}
データがpaginationのような配列の場合はfor文を使って中身のデータを取り出します
{% for Product in pagination %}
{{ Product.id }},{{ Product.name }}
{% endfor %}
また、データが存在する場合に表示する、などはif文を使用します。
{% if Product.description_list %}
{{ Product.description_list|raw|nl2br }}
{% endif %}
各ページでどのようなデータを取得できるかは、先ほどのdumpの中身や、src/Eccube/Entity
フォルダ内にあるページごとのPHPファイルもチェックしてみてください。
より詳しいTwigの使い方についてはこちらの書籍がオススメ。これからEC-CUBE3を始めるなら是非手元に置いておきたい良書です。