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

Open in your IDE?
  1. {% set NewsList = repository('Eccube\\Entity\\News').getList() %}
  3. {% block javascript %}
  4.     <script>
  5.          $(function() {
  6.             $('.p-top__news__box').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('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'もっと見る'|trans }}</a>');
  13.                     var dispNum = 5;
  14.                     $(this).find('#news_readmore').click(function() {
  15.                         dispNum += 5;
  16.                         $(this).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 %}
  41. <!-- start customer -->
  42.         {#<section class="p-top__customer">#}
  43.         {#    <img class="absolute1" src="{{asset ('/test-ec-04/html/user_data/assets/img/common/cloud__gl2.webp')}}" alt="雲">#}
  44.         {#    <img class="absolute2" src="{{asset ('/test-ec-04/html/user_data/assets/img/common/cloud_gl1.webp')}}" alt="雲">#}
  45.         {#    <img class="absolute3" src="{{asset ('/test-ec-04/html/user_data/assets/img/common/meetbox.webp')}}" alt="お肉BOX">#}
  46.         {#    <div class="section__title">#}
  47.         {#        <img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/cow.webp')}}" alt="牛のイラスト">#}
  48.         {#        <h2>お客様の声</h2>#}
  49.         {#    </div>#}
  51.         {#    <div class="p-top__customer__box">#}
  52.         {#        <div class="p-top__customer__box__item">#}
  53.         {#            <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/hamburg.webp')}}" alt="ハンバーグ">#}
  54.         {#           <h3 class="p-top__customer__box__item__title">定期的に食べたくなるハンバーグ</h3>#}
  55.         {#           <p class="p-top__customer__box__item__text">焼き肉が一番だけど定期的に食べたくなるのがハンバーグ！珍しいタイプの懐かしさを感じる煮込みハンバーグは舌でほぐせるくらいほろほろのお肉。上質なお肉を使ってるから出来る味は家庭では再現できない満足感があります。</p>#}
  56.         {#           <p class="p-top__customer__box__item__prof">20代　｜　女性　｜<img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/star.webp')}}" alt=""></p>#}
  57.         {#        </div>#}
  58.         {#        <div class="p-top__customer__box__item">#}
  59.         {#            <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/bbq.webp')}}" alt="BBQ">#}
  60.         {#           <h3 class="p-top__customer__box__item__title">友人とバーベキュー！！</h3>#}
  61.         {#           <p class="p-top__customer__box__item__text">夏なのでバーベキューということで、モーサイドさんからBBQセットを注文して友人と食べました！<br><br>#}
  62.         {#            安いのにとても美味しかったです！！<br>また注文します！<br>#}
  63.         {#        </p>#}
  64.         {#           <p class="p-top__customer__box__item__prof">20代　｜　男性　｜<img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/star.webp')}}" alt=""></p>#}
  65.         {#        </div>#}
  66.         {#        <div class="p-top__customer__box__item">#}
  67.         {#            <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/family.webp')}}" alt="焼肉">#}
  68.         {#           <h3 class="p-top__customer__box__item__title">家族と自分へのご褒美に！</h3>#}
  69.         {#           <p class="p-top__customer__box__item__text">#}
  70.         {#            家族と自分へのご褒美に少しプチ贅沢！<br>#}
  71.         {#            お肉も柔らかくて美味しいのに安い。<br><br>#}
  73.         {#            リピート確定です。<br>#}
  74.         {#            また注文します！！<br><br>#}
  75.         {#           </p>#}
  76.         {#           <p class="p-top__customer__box__item__prof">30代　｜　女性　｜<img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/star.webp')}}" alt=""></p>#}
  77.         {#        </div>#}
  78.         {#    </div>#}
  80.         {#    <a href="#" class="more__page">もっと見る</a>#}
  81.         {#</section>#}
  82.         <!-- end customer -->
  84.         <!-- start top_news -->
  85.         <section class="p-top__news">
  86.             <div class="section__title">
  87.                 <div class="image-wrapper">
  88.                     <img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/Cow3.png')}}" alt="牛さん">
  89.                 </div>
  90.                 <h2>お知らせ</h2>
  91.             </div>
  92.             <div class="ec-newsRole__news">
  93.                 <div class="p-top__news__box">
  94.                     {% for News in NewsList %}
  95.                     <div class="ec-newsRole__newsItem p-top__news__box__item">
  96.                         <div class="ec-newsRole__newsHeading">
  97.                             <div class="ec-newsRole__newsDate p-top__news__box__item__date">
  98.                                 {{ News.publish_date|date_day }}
  99.                             </div>
  100.                             <span>お知らせ</span>
  101.                             <div class="ec-newsRole__newsColumn">
  102.                                 <div class="ec-newsRole__newsTitle">
  103.                                     {{ News.title }}
  104.                                 </div>
  105.                                 {% if News.description or News.url %}
  106.                                     <div class="ec-newsRole__newsClose">
  107.                                         <a class="ec-newsRole__newsCloseBtn">
  108.                                             <i class="fas fa-angle-down"></i>
  109.                                         </a>
  110.                                     </div>
  111.                                 {% endif %}
  112.                             </div>
  113.                         </div>
  114.                         <div class="ec-newsRole__newsDescription ">
  115.                             {{ News.description|raw|nl2br }}
  116.                             {% if News.url %}
  117.                                 <br>
  118.                                 <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
  119.                             {% endif %}
  120.                         </div>
  121.                     </div>
  122.                 {% endfor %}
  123.                 </div>
  124.             </div>
  125.         </section>
  126.         <!-- end top__news -->
  127.     
  128. {% block sytlesheet %}
  129. <style>
  130.     .p-top__news__box__item__date {
  131.         display: inline-block;
  132.     }
  133.     .ec-newsRole__newsColumn {
  134.         display: flex;
  135.         justify-content: space-between;
  136.     }
  137.     #news_readmore {
  138.         padding: 10px 24px;
  139.         margin-top: 15px;
  140.     }
  141. </style>
  142. {% endblock %}