Symfony Profiler

{#
///////////////////////////////////////////////////////////////////////
This template is part of EC-CUBE Design template.
Copyright(c) JAPAN ELECTRONIC INDUSTRIAL ARTS CO.LTD.
http://www.jeia.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
本テンプレートの著作権は、「株式会社日本電子工藝社」に帰属いたします。
※本テンプレートを譲渡・再頒布・転用・第三者へ開示することは禁止いたします。
ただし、事業者によるショップ運営者への設置代行を禁止するものではございません。
※本テンプレートを申請されたご利用サイトへの設置以外の目的で複製することは禁止いたします。
※本テンプレートデータ内のライセンス条項、および著作権に関する記述を削除することはできません。
※ご利用サイトを変更することはできません。申請と異なるサイトにてご利用になる場合は、
別途、ご利用費用をお支払いただく必要がございます。
※本テンプレートの改変にあたり、一切のサポートはいたしかねます。
※本テンプレートは、すべての設置環境で動作する事は保証しておりません。
///////////////////////////////////////////////////////////////////////
#}
{#
新着情報
サムネイル画像を表示できる新着情報ブロックとなります。クリックにより詳細本文をポップアップ表示します。
記事の登録はEC-CUBE標準機能です。管理機能の「コンテンツ管理 > 新着情報管理」から記事を登録・編集してください。
EC-CUBE標準では新着情報のサムネイル画像登録機能はありませんが当テンプレートでは新着情報の「詳細本文」欄の中に
以下のコード（img要素）を記述して頂くことでそれを拾ってサムネイル画像表示させています。
サムネイル画像を登録する記述
例:
<img class="news_thumbnail" src="/html/template/dtJEIA4010/assets/img/sample/news_thumbnail_01.jpg" alt="">
※サムネイル画像の指定は、詳細本文欄のどこに記述して頂いても構いません。
※src属性には画像までのフルパスを記述してください。
※詳細本文の表示の中ではサムネイル画像は表示されません。
新着情報一覧の表示件数は下記のTwig変数「NewsListMax」にて設定して頂けます。
一覧表示はスライド表示します。
新着情報をクリックすることで詳細本文をポップアップ表示します。
詳細本文もスライダーとなっており、ポップアップした中でスライド表示させることができます。
#}
{# ----------▼ 新着情報の表示件数 ▼---------- #}
{% set NewsListMax = 10 %}
{# ----------▲ 新着情報の表示件数 ▲---------- #}

{% set NewsList = repository('Eccube\\Entity\\News').getList() %}
{# 新着情報一覧 #}
<!--
<div class="ec-newsRole">
<div class="ec-secHeading">
<h2 class="text-span updown ec-secHeading__en">
News
{#
<span class="ec-secHeading__ja">新着情報</span>
#}
</h2>
</div>
<div class="ec-newsRole__list appearEffect">
{# slickコンテナ #}
<div class="ec-slickContainer slickGutter">
{# 新着情報アイテム #}
{% for News in NewsList %}
{% if loop.index0 < NewsListMax %}{# 10件までを表示 #}
<div class="ec-newsItemRole" data-index="{{ loop.index0 }}">
{# サムネイル画像枠 #}
<div class="ec-newsItemRole__thumbnail"></div>
{# 商品コンテンツ枠 #}
<div class="ec-newsItemRole__content">
{# 新着情報タイトル #}
<div class="ec-newsItemRole__title">{{ News.title }}</div>
{# 投稿日付 #}
<time class="ec-newsItemRole__date">{{ News.publish_date|date('Y/m/d') }}</time>
</div>
{# 詳細本文（こちらはjsがサムネイル情報を取得するために使用しますので、本文自体は非表示とします） #}
{% if News.description %}
<div class="ec-newsItemRole__description" style="display:none;">
{{ News.description|raw|nl2br }}
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
-->
{# 詳細本文ポップアップスライダー #}
<div class="ec-newsDetailRole">
<div class="ec-newsDetailRole__list">
{# slickコンテナ #}
<div class="ec-slickContainer">
{# 新着情報アイテム #}
{% for News in NewsList %}
{% if loop.index0 < NewsListMax %}{# 10件までを表示 #}
<div class="ec-newsItemRole">
{# 新着情報タイトル #}
<div class="ec-newsItemRole__title">{{ News.title }}</div>
{# 投稿日付 #}
<time class="ec-newsItemRole__date">{{ News.publish_date|date('Y/m/d') }}</time>
{# 詳細本文 #}
<div class="ec-newsItemRole__description">
{% if News.description %}
{{ News.description|raw|nl2br }}
{% if News.url %}
<br><a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
{% endif %}
{% else %}
（詳細本文はありません）
{% endif %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<script>
$(function () {
var $newsRole = $( '.ec-newsRole' );
var $newsDetailRole = $( '.ec-newsDetailRole' );
var $newsSlick = $newsRole.find('.ec-slickContainer');
var $newsDetailSlick = $newsDetailRole.find('.ec-slickContainer');
// 各記事ごとに、詳細本文からサムネイル情報を取得してしかるべき場所へappendします
$newsRole.find( '.ec-newsItemRole' ).each(function(){
var $this = $(this);
// サムネイル画像配置要素
var $newsThumbnail = $this.find( '.ec-newsItemRole__thumbnail' );
// サムネイル画像要素を取得
var $thumbnailImage = $this.find( '.ec-newsItemRole__description .news_thumbnail' );
if ( !$thumbnailImage.length ) {
// サムネイル画像の指定がない場合はnone画像
$thumbnailImage = '<img src="/html/template/dtJEIA4010/assets/img/sample/news_thumbnail_none.jpg" alt="">';
}
// サムネイル画像要素を配置要素へappend
$newsThumbnail.append( $thumbnailImage );
});
// 新着情報一覧のslickスライダー実装
$newsSlick.slick({
dots: false,
arrows: true,
prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>',
speed: 600,
slidesToShow: 4,
swipeToSlide: true,// slidesToScrollに関係なく、ユーザーがスライドに直接ドラッグまたはスワイプすることを許可
responsive: [
{
breakpoint: 1280,// 1280px未満（タブレット時）
settings: {
slidesToShow: 3// 3個で収まらない場合は2個に減らしてご調整ください
}
},
{
breakpoint: 768,// 768px未満（スマホ時）
settings: {
slidesToShow: 2
}
}
]
});
// 詳細本文一覧のslickスライダー実装
$newsDetailSlick.slick({
fade: true,
dots: false,
arrows: true,
prevArrow: '<div class="slick-prev"><i class="jeiafont jeia-arrow-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="jeiafont jeia-arrow"></i></div>',
adaptiveHeight: true,
speed: 300
});
// 新着情報アイテムのクリックで詳細本文をポップアップ表示
$newsRole.on('click', '.ec-newsItemRole', function(){
// 詳細本文スライダーをクリックされたアイテムに合わせるためslickGoToします
var index = $(this).data('index');
$newsDetailSlick.slick('slickGoTo', index, true);
// ポップアップ表示開始
$newsDetailRole.addClass( 'is-active' );
});
// ポップアップ表示のCLOSE
$newsDetailRole.on('click', function(e){
// is-activeを確認する事で、背景以外のクリックイベントを回避します
if ( $(e.target).hasClass( 'is-active' ) ) {
$newsDetailRole.removeClass( 'is-active' );
}
});
});
</script>

app/template/osechi/Block/news.twig line 1