EC-CUBE3 ページのデータを確認・表示する方法

Tweet

Pocket

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を始めるなら是非手元に置いておきたい良書です。