Home » EC-CUBE » 【初心者】Twigファイルを編集して実際に画面に文字を表示してみる【必見】

【初心者】Twigファイルを編集して実際に画面に文字を表示してみる【必見】

time 2022/06/10

今回は、EC-CUBEサイトに、Twigファイルを編集して実際に画面に文字を表示してみるといったことをしてみたいと思います。

Twigファイルという未知の領域に踏み込むので、やや緊張しますね。

デフォルトで表示されているショッピングサイトの、下のほうの画面をいじっていきたいと思います。

新着情報のソース（Twigファイル）

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% set NewsList = repository('Eccube\\Entity\\News').getList() %}

{% block javascript %}
    <script>
        $(function() {
            $('.ec-newsRole__news').each(function() {
                var listLength = $(this).find('.ec-newsRole__newsItem').length;
                if (listLength > 5) {
                    $(this).find('.ec-newsRole__newsItem:gt(4)').each(function() {
                        $(this).hide();
                    });
                    $(this).append('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'more'|trans }}</a>');
                    var dispNum = 5;
                    $(this).find('#news_readmore').click(function() {
                        dispNum += 5;
                        $(this).parent().find('.ec-newsRole__newsItem:lt(' + dispNum + ')').show();
                        if (dispNum >= listLength) {
                            $(this).hide();
                        }
                    })
                }
            });

            $('.ec-newsRole__newsHeading').on('click', function() {
                $newsItem = $(this).parent('.ec-newsRole__newsItem');
                $newsDescription = $newsItem.children('.ec-newsRole__newsDescription');
                if ($newsDescription.css('display') == 'none') {
                    $newsItem.addClass('is_active');
                    $newsDescription.slideDown(300);
                } else {
                    $newsItem.removeClass('is_active');
                    $newsDescription.slideUp(300);
                }
                return false;
            });
        });
    </script>
{% endblock %}
<div class="ec-role">
    <div class="ec-newsRole">
        <div class="ec-secHeading">
            <span class="ec-secHeading__en">{{ 'NEWS'|trans }}</span>
            <span class="ec-secHeading__line"></span>
            <span class="ec-secHeading__ja">{{ '新着情報'|trans }}</span>
        </div>
        <div class="ec-newsRole__news">
            {% for News in NewsList %}
                <div class="ec-newsRole__newsItem">
                    <div class="ec-newsRole__newsHeading">
                        <div class="ec-newsRole__newsDate">
                            {{ News.publish_date|date_day }}
                        </div>
                        <div class="ec-newsRole__newsColumn">
                            <div class="ec-newsRole__newsTitle">
                                {{ News.title }}
                            </div>
                            {% if News.description or News.url %}
                                <div class="ec-newsRole__newsClose">
                                    <a class="ec-newsRole__newsCloseBtn">
                                        <i class="fas fa-angle-down"></i>
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="ec-newsRole__newsDescription">
                        {{ News.description|raw|nl2br }}
                        {% if News.url %}
                            <br>
                            <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

こう見ていくと、普通のHTML文にCSS文、JavaScript文、それにTwig文が加わっただけだということがわかります。

今回は、文章の横に日付を表示してみたいと思います。

編集位置の確認

                            <div class="ec-newsRole__newsTitle">
                                {{ News.title }}
                            </div>

プログラムを見ていくと、この{{ News.title }}がその文章にあたることがわかります。どれが何を表しているかを見るには、ちょっとコツがあるのですが、その前後の文章の流れを見ていくとわかりやすいかと思います。

ここは、コツを掴む練習あるのみです。

TWIGの基本

表示させる　　　　・・・　{{ 値 }}
処理をする　　　　・・・　{% 処理 %}
コメントを入れる　・・・　{# テキスト #}

だいたいこの3つのパターンです。この基本を覚えておきましょう。

文章の横に日付を入れる

まず、Twigで日付を出す方法ですが、次の文でできます。

{{ “now” | date (“Y-m-d”) }}

では早速、日付を入れてみましょう。

先ほど指定した、{{ News.title }}の後に、この文を追加します。

                            <div class="ec-newsRole__newsTitle">
                                {{ News.title }} {{ "now" | date ("Y-m-d") }}
                            </div>

追加し終わったら、右下の「登録」ボタンを押します。