今回は、EC-CUBEサイトに、Twigファイルを編集して実際に画面に文字を表示してみるといったことをしてみたいと思います。
Twigファイルという未知の領域に踏み込むので、やや緊張しますね。
デフォルトで表示されているショッピングサイトの、下のほうの画面をいじっていきたいと思います。
新着情報に変更を加える
この新着情報に変更を加えていこうと思います。
管理画面を開いてください。
管理画面のコンテンツ管理＞新着情報管理と開いていくと、ショッピングサイトの下のほうに表示されていたのと同じ文章が書かれているのが確認できたかと思います。
今回は、このTwig情報を編集していきます。
Twig情報の文章を編集するには、ブロック管理の新着情報というところの編集を行うことになります。
このように、新着情報の中身であるnews.twigファイルが表示されたかと思います。
ここを編集して、新着情報の文章を変更していこうというのが、今日の課題です。
そうです。ここを編集したら、上で見てきたような箇所に変更が反映されるのです。
一応、ソース全体を表示しておきます。
新着情報のソース（Twigファイル）
{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
![]()
![]()
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>追加し終わったら、右下の「登録」ボタンを押します。
ショッピングサイトを開いて、反映されているかを確認する
日付が反映されていることが確認できました。
今日は以上です。TWIGの深い使い方については、今後触れていきたいと思います。
最後まで読んでいただき、誠に有り難うございました。応援いただけると励みになります。
ポチップ
コメント