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

Open in your IDE?
  1. {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  3. {% block javascript %}
  4.     <script>
  5.         $(function() {
  6.             $('.ec-newsRole__news').each(function() {
  7.                 var listLength = $(this).find('.ec-newsRole__newsItem').length;
  8.                 if (listLength > 5) {
  9.                     $(this).find('.ec-newsRole__newsItem:gt(4)').each(function() {
  10.                         $(this).hide();
  11.                     });
  12.                     $(this).append('<div style="text-align: center;"><a id="news_readmore" class="news_readmore"><img src="{{ asset('assets/img/top_page/link_show_more_news.png', 'user_data') }}"></a></div>');
  13.                     var dispNum = 5;
  14.                     $(this).find('#news_readmore').click(function() {
  15.                         dispNum += 5;
  16.                         $(this).parent().parent().find('.ec-newsRole__newsItem:lt(' + dispNum + ')').show();
  17.                         if (dispNum >= listLength) {
  18.                             $(this).hide();
  19.                         }
  20.                     })
  21.                 }
  22.             });
  24.             $('.ec-newsRole__newsHeading').on('click', function() {
  25.                 $newsItem = $(this).parent('.ec-newsRole__newsItem');
  26.                 $newsDescription = $newsItem.children('.ec-newsRole__newsDescription');
  27.                 if ($newsDescription.css('display') == 'none') {
  28.                     $newsItem.addClass('is_active');
  29.                     $newsDescription.slideDown(300);
  30.                 } else {
  31.                     $newsItem.removeClass('is_active');
  32.                     $newsDescription.slideUp(300);
  33.                 }
  34.                 return false;
  35.             });
  36.         });
  37.     </script>
  38. {% endblock %}
  40. {% block stylesheet %}
  41.     <style>
  43.     .ec-newsRole .ec-newsRole__newsDate {
  44.         color: #525263;
  45.         font-size: 12px;
  46.         font-style: normal;
  47.         font-weight: 600;
  48.         line-height: 16px;
  49.     }
  51.     .ec-newsRole .ec-newsRole__newsTitle {
  52.         color: #000;
  53.         font-size: 14px;
  54.         font-style: normal;
  55.         font-weight: 700;
  56.         line-height: 20px;
  57.     }
  59.     .ec-newsRole .ec-newsRole__newsDescription {
  60.         color: #000;
  61.         font-size: 14px;
  62.         font-style: normal;
  63.         font-weight: 600;
  64.         line-height: 20px;
  65.     }
  67.     .fas {
  68.         font-size: 23px;
  69.     }
  71.     .ec-newsRole__newsDescription .detail_link {
  72.         display: block; margin-top: 8px;
  73.         color: #337AB7;
  74.         font-size: 14px;
  75.         font-style: normal;
  76.         font-weight: 600;
  77.         line-height: 20px;
  78.     }
  80.     .ec-newsRole .ec-newsRole__newsCloseBtn {
  81.         display: block;
  82.         margin-left: auto;
  83.         border-radius: 100%;
  84.         width: 20px;
  85.         height: 24px;
  86.         color: black;
  87.         text-align: center;
  88.         background: none;
  89.         cursor: pointer;
  90.         position: absolute;
  91.         right: 5px;
  92.     }
  94.     .news_readmore img {
  95.         max-width: 88px;
  96.         margin-top: 26px;
  97.         margin-bottom: 10px;
  98.     }
  102.     </style>
  104. {% endblock %}
  106. <div class="ec-role" style="padding-left: 16px; padding-right: 16px; margin-bottom: 104px;">
  107.     <div class="ec-newsRole" style="padding: 0px;">
  108.         
  109.         <div class="block_content" style="margin-bottom: 32px;">
  110.             <img src="{{ asset('assets/img/top_page/text_4.png', 'user_data') }}" alt="NEWS｜お知らせ" style="width: 100%; width: 450px;">    
  111.         </div>
  113.         <div class="ec-newsRole__news" style="border: none; padding: 0px;">
  114.             {% for News in NewsList %}
  115.                 <div class="ec-newsRole__newsItem">
  116.                     <div class="ec-newsRole__newsHeading">
  117.                         <div class="ec-newsRole__newsDate">
  118.                             {{ News.publish_date|date_day }}
  119.                         </div>
  120.                         <div class="ec-newsRole__newsColumn">
  121.                             <div class="ec-newsRole__newsTitle">
  122.                                 {{ News.title }}
  123.                             </div>
  124.                             {% if News.description or News.url %}
  125.                                 <div class="ec-newsRole__newsClose">
  126.                                     <a class="ec-newsRole__newsCloseBtn">
  127.                                         <i class="fas fa-angle-down"></i>
  128.                                     </a>
  129.                                 </div>
  130.                             {% endif %}
  131.                         </div>
  132.                     </div>
  133.                     <div class="ec-newsRole__newsDescription">
  134.                         {{ News.description|raw|nl2br }}
  135.                         {% if News.url %}
  136.                             <br>
  137.                             <a class="detail_link" href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
  138.                         {% endif %}
  139.                     </div>
  140.                 </div>
  141.             {% endfor %}
  142.         </div>
  143.     </div>
  144. </div>