【EC-CUBE 4】商品を非表示にする方法

本ブログでは、以下のような特定条件に合った商品のみを表示する一覧ページやブロックの作り方を紹介してきました。

ところが、これらのソースコードそのままに作られたページでは、商品の公開ステータス（公開、非公開、廃止）に関係なく商品が表示されてしまうという欠点があります。

そこで本記事では、この欠点を克服するために追加してほしいコードを紹介しています。
なお、デフォルトで用意されている商品一覧ページでは、公開ステータスが非公開または廃止になると非表示になるので、こちらは修正しなくてもOKです。

またこの方法を知っておけば、公開ステータスに応じて様々な操作を行うことも可能になります。
EC-CUBE 4のカスタマイズを行いたい方の参考になればと嬉しいです！

【動作環境】
EC CUBEのバージョン：4.1.2
サーバー：Xserver
ブラウザ：Google Chrome

“非公開” や “廃止” でも商品が表示されてしまう理由

そもそも、なぜ商品の公開ステータスが “公開” 以外の場合でも商品が表示されてしまうのか？

理由は簡単で、上記で作成したページには、商品の公開ステータスによる分岐（公開ステータスが “公開” の場合のみ商品を表示させる）を作っていないから。

つまり商品を表示させる際に、『その商品の公開ステータス ＝ “公開”』になってるものを判別する「if文」を追記し、表示・非表示を分岐させれば解決するはずです。

Twigファイルに「if文」を追記する

自動更新される新着商品一覧ページ / ブロックを作る方法 にて紹介した、新着商品一覧ページのTwigファイルを修正します。

まず商品の公開ステータスは、データベースでは『mtb_product_status』に格納されています。

これを見ると、ステータスの “公開” は「id = 1」であるため、「ステータスのid = 1」のときのみ表示させるというコードを書いてあげればOKそうです。

実際にTwigファイルを修正した結果が以下コードです。

{% extends 'default_frame.twig' %}

{% block main %}
    <h1>新着商品ページ</h1>
    <div class="ec-shelfRole">
      <ul class="ec-shelfGrid">
          {% for Product in Products %}
            {% if Product.status.id == 1 %}
              <li class="ec-shelfGrid__item">
                {# 商品画像の表示 #}
                <p class="ec-shelfGrid__item-image">
                    <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
                </p>
                {# 商品IDの表示 #}
                <p>ID: {{ Product.id }}</p>
                {# 商品名の表示 #}
                <p>{{ Product.name }}</p>
                {# 価格の表示 #}
                <p class="price02-default">
                    {% if Product.hasProductClass %}
                        {% if Product.getPrice02Min == Product.getPrice02Max %}
                            {{ Product.getPrice02IncTaxMin|price }}
                        {% else %}
                            {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
                        {% endif %}
                    {% else %}
                        {{ Product.getPrice02IncTaxMin|price }}
                    {% endif %}
                </p>
              </li>
            {% endif %}
          {% endfor %}
      </ul>
    </div>
{% endblock %}

青でハイライトした2箇所が追記部分です。

1. 「for文」直後の {% if Product.status.id == 1 %}
2. 「endfor」直前の {% endif %}

商品の公開ステータスは、上述の通り「Product.status」で取得できます。
このidが “1” の場合のみ、「画像の表示〜価格の表示」までが実行されるようになるため、それ以外のid（公開以外）のときは、画像も商品名も価格も表示されなくなるというわけです。

まとめ

以上、商品の公開ステータスに応じて表示・非表示を切り替える方法を紹介しました。

登録した商品が廃盤になったり、何かしらの事情で一時的に非公開にしておきたい場合、このようなステータスを操作できると便利ですよね。
今回は非表示にする方法のみでしたが、応用すれば商品ページに【完売】という表示を出すといったこともできるでしょう。

ぜひ、いろいろな使い方を試してみてください！