バージョン選択

フォーラム

メニュー

オンライン状況

58 人のユーザが現在オンラインです。 (29 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 57
eccube_admin もっと...

サイト内検索

質問 > フロント機能 > 4系の「新着情報」の表示に関するカスタマイズに関して

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
pikachin
投稿日時: 2020/5/4 13:13
対応状況: −−−
新米
登録日: 2019/8/8
居住地: 東京
投稿: 9
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
居住地:
投稿: 2292
Re: 4系の「新着情報」の表示に関するカスタマイズに関して
投稿の件数分、
{% for News in NewsList %}

{% endfor %}
の間を繰り返す記述になっているのですが
1周目の時だけClass属性やCSSを展開時の状態にすれば良いと思います。

ループ内で
{{ loop.index }}
という変数を参照すればループ回数を取得できるかと思いますので

{% if loop.index == 1 %}
1周目の記述
{% else %}
2周目以降の記述
{% endif %}

と判定できるかと思います。

展開時のCSSは新着情報を開閉させて、ブラウザの「要素を調査(Firefox)」等でリアルタイムでスタイルシートの変化を確認する事が出来ると思います。
Chormeは「検証」という機能名で同じような事が出来ると思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

kss
投稿日時: 2020/5/5 23:37
対応状況: −−−
半人前
登録日: 2020/2/12
居住地:
投稿: 14
Re: 4系の「新着情報」の表示に関するカスタマイズに関して
とりあえず、テンプレートは触らずJavaScriptのみで対応する方法の一例として。

管理画面のコンテンツ管理 > JavaScript管理から、以下のコードを追記で対応できます。

/**
 *  ECCUBE4 トップページの新着情報 最初の1件のみ開いた状態に変更
 */
$(function() {
    // トップページのみ動作
    if($('body')[0].id == 'page_homepage') {
        // 新着情報ブロック取得
        let newsRoleNewsItems = $('.ec-newsRole__news .ec-newsRole__newsItem');
        // 新着情報が1個以上ある
        if(newsRoleNewsItems.length > 0) {
            // 最初の新着情報
            let firstItem = newsRoleNewsItems[0];
            // アイコンの向き変更
            firstItem.classList.add('is_active'); 
            // 本文を表示状態に変更
            firstItem.querySelector('.ec-newsRole__newsDescription').style.display = 'block';
        }
    }
});


pikachin
投稿日時: 2020/5/14 23:44
対応状況: 解決済
新米
登録日: 2019/8/8
居住地: 東京
投稿: 9
Re: 4系の「新着情報」の表示に関するカスタマイズに関して
大変反応が遅くなってしまいました。
申し訳ありません。

またご丁寧に記述のコードまでご用意して頂き、ありがとうございます!

しっかり開きました!ありがとうございます!


----------------
■EC-CUBE 4.0.2 使用
■PHP 7.1.33 使用
■DB MySQL 5.7.27 使用

pikachin
投稿日時: 2020/5/14 23:45
対応状況: 解決済
新米
登録日: 2019/8/8
居住地: 東京
投稿: 9
Re: 4系の「新着情報」の表示に関するカスタマイズに関して
回答ありがとうございます!

ちょっと私には難しい感じになっちゃったので、
調べつつチャレンジしてみます。


----------------
■EC-CUBE 4.0.2 使用
■PHP 7.1.33 使用
■DB MySQL 5.7.27 使用

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は62,233名です
総投稿数は96,230件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2292
4
nanasess
2044
5
yuh
1612
6
umebius
1588
7
red
1403
8
h_tanaka
1009
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.