質問 > フロント機能 > 4系の「新着情報」の表示に関するカスタマイズに関して |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
pikachin |
投稿日時: 2020/5/4 13:13
対応状況: −−−
|
半人前 登録日: 2019/8/8 居住地: 東京 投稿: 17 |
4系の「新着情報」の表示に関するカスタマイズに関して 4系の「新着情報」の表示に関するカスタマイズに関して
4系のブロック管理に初期導入されている「新着情報」の表示に関するカスタマイズに関してご質問させてください。 初期状態では、タイトルと日付の表示のみとなり、 タイトルをクリックすると、本文が開く仕様になっております。 これを一番最新の投稿のみ、本文が開いた状態で表示させたいのですが、その記述がわかりません。 分かり方がいらっしゃいましたら、記述をご指南頂けたらと思います。 ------------------------------------------------------ 【初期の記述】 {# This file is part of EC-CUBE Copyright(c) LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.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">{{ 'もっと見る'|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-role2"> <div class="ec-newsRole"> <div class="ec-secHeading"> <span class="ec-secHeading__en">{{ '新着情報'|trans }}</span> <span class="ec-secHeading__line"></span> <span class="ec-secHeading__ja">{{ 'NEWS'|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> ------------------------------------------------------ 宜しくお願い致します。 |
468 |
投稿日時: 2020/5/4 16:28
対応状況: −−−
|
神 登録日: 2008/10/26 居住地: 投稿: 3217 |
Re: 4系の「新着情報」の表示に関するカスタマイズに関して 投稿の件数分、
{% for News in NewsList %} ~ {% endfor %} の間を繰り返す記述になっているのですが 1周目の時だけClass属性やCSSを展開時の状態にすれば良いと思います。 ループ内で {{ loop.index }} という変数を参照すればループ回数を取得できるかと思いますので {% if loop.index == 1 %} 1周目の記述 {% else %} 2周目以降の記述 {% endif %} と判定できるかと思います。 展開時のCSSは新着情報を開閉させて、ブラウザの「要素を調査(Firefox)」等でリアルタイムでスタイルシートの変化を確認する事が出来ると思います。 Chormeは「検証」という機能名で同じような事が出来ると思います。
|
kss |
投稿日時: 2020/5/5 23:37
対応状況: −−−
|
半人前 登録日: 2020/2/12 居住地: 投稿: 18 |
Re: 4系の「新着情報」の表示に関するカスタマイズに関して とりあえず、テンプレートは触らずJavaScriptのみで対応する方法の一例として。
管理画面のコンテンツ管理 > JavaScript管理から、以下のコードを追記で対応できます。
|
pikachin |
投稿日時: 2020/5/14 23:44
対応状況: 解決済
|
半人前 登録日: 2019/8/8 居住地: 東京 投稿: 17 |
Re: 4系の「新着情報」の表示に関するカスタマイズに関して 大変反応が遅くなってしまいました。
申し訳ありません。 またご丁寧に記述のコードまでご用意して頂き、ありがとうございます! しっかり開きました!ありがとうございます!
|
pikachin |
投稿日時: 2020/5/14 23:45
対応状況: 解決済
|
半人前 登録日: 2019/8/8 居住地: 東京 投稿: 17 |
Re: 4系の「新着情報」の表示に関するカスタマイズに関して 回答ありがとうございます!
ちょっと私には難しい感じになっちゃったので、 調べつつチャレンジしてみます。
|
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |