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

Open in your IDE?
  1. {#
  2. ///////////////////////////////////////////////////////////////////////
  3. This template is part of EC-CUBE Design template.
  4. Copyright(c) JAPAN ELECTRONIC INDUSTRIAL ARTS CO.LTD.
  5. http://www.jeia.co.jp/
  6. For the full copyright and license information, please view the LICENSE
  7. file that was distributed with this source code.
  8. 本テンプレートの著作権は、「株式会社日本電子工藝社」に帰属いたします。
  9. ※本テンプレートを譲渡・再頒布・転用・第三者へ開示することは禁止いたします。
  10. ただし、事業者によるショップ運営者への設置代行を禁止するものではございません。
  11. ※本テンプレートを申請されたご利用サイトへの設置以外の目的で複製することは禁止いたします。
  12. ※本テンプレートデータ内のライセンス条項、および著作権に関する記述を削除することはできません。
  13. ※ご利用サイトを変更することはできません。申請と異なるサイトにてご利用になる場合は、
  14. 別途、ご利用費用をお支払いただく必要がございます。
  15. ※本テンプレートの改変にあたり、一切のサポートはいたしかねます。
  16. ※本テンプレートは、すべての設置環境で動作する事は保証しておりません。
  17. ///////////////////////////////////////////////////////////////////////
  18. #}
  19. {#
  20. 新着情報
  21. 記事は10個まで表示としています。Twig for文繰り返しのなかでloop.indexで数字を取ってます。数を調整するなり不要なら削除してください。
  22. 記事の登録はEC-CUBE標準機能です。管理機能の「コンテンツ管理 > 新着情報管理」から記事を登録・編集してください。
  23. CSSスタイリングは「_12.8.news.scss」で行っています。
  24. #}
  25. <!-- Block/news.twig -->
  26. {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  27. <div class="ec-newsRole appearEffect">
  28.     <div class="ec-secHeading">
  29.         <h2>
  30.             <span class="ec-secHeading__en">News</span>
  31.             {#<span class="ec-secHeading__ja">新着情報</span>#}{# ※日本語タイトルは非表示デザインとしています。表示させる場合はコメント解除してください #}
  32.         </h2>
  33.     </div>
  34.     <div class="ec-newsRole__inner">
  35.         
  36.         {# ニュース一覧枠 #}
  37.         <div class="ec-newsRole__news">
  38.     {% for News in NewsList %}
  39.         {# 10件までを表示 #}
  40.         {% if loop.index <= 10 %}
  41.             {# ニュースアイテム #}
  42.             <div class="ec-newsRole__newsItem">
  43.                 {# 左枠(日付) #}
  44.                 <div class="ec-newsRole__newsHeading">
  45.                     <time>{{ News.publish_date|date('Y.m.d') }}</time>
  46.                 </div>
  47.                 {# 右枠(ニュースタイトル、本文) #}
  48.                 <div class="ec-newsRole__newsColumn">
  49.                     {# ニュースタイトル #}
  50.                     <div class="ec-newsRole__newsTitle">{{ News.title }}</div>
  51.             {% if News.description %}
  52.                     {# MOREボタン #}
  53.                     <div class="ec-newsRole__moreBtn">MORE</div>
  54.             {% endif %}
  55.                     
  56.                     {# ニュース本文 #}
  57.             {% if News.description %}
  58.                     <div class="ec-newsRole__newsDescription">
  59.                         {{ News.description|raw|nl2br }}
  60.                 {% if News.url %}
  61.                         <br><a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
  62.                 {% endif %}
  63.                     </div>
  64.             {% endif %}
  65.                 </div>
  66.             </div>
  67.         {% endif %}
  68.     {% endfor %}
  69.         </div>
  70.     </div>
  71. </div>
  72. <script>
  73.     $(function () {
  74.         var $ecNewsRole = $('.ec-newsRole');
  75.         var $ecNewsRoleNewsColumn = $ecNewsRole.find('.ec-newsRole__newsColumn');
  76.         // MOREボタンだけではなくニュースタイトル、本文を含めた包括要素「__newsColumn」に対してイベントを貼ります(どこをタップしても開閉できるよう)
  77.         $ecNewsRoleNewsColumn.on('click', function (e) {
  78.             var $this = $(this);
  79.             // ニュース本文内のリンク要素(aタグ)をクリックされてもイベントは発動しますのでその場合は開閉動作はさせず普通にリンク機能だけ働くようにしておきます
  80.             if (e.target.href != null) {
  81.                 return true;
  82.             }
  83.             // ニュース本文要素
  84.             var $newsDep = $this.find('.ec-newsRole__newsDescription');
  85.             // 開閉
  86.             if (! $this.hasClass('is-active')) {
  87.                 $newsDep.slideDown(200);
  88.                 $this.addClass('is-active');
  89.             } else {
  90.                 $newsDep.slideUp(200);
  91.                 $this.removeClass('is-active');
  92.             }
  93.         });
  94.     });
  95. </script>