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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  9. {% block javascript %}
  10.     <script>
  11.         $(function () {
  12.             var slidesToshow_val = 3;
  13.             var slidesToshow_leng = $('.card-pickup').length;
  14.             if(slidesToshow_leng < slidesToshow_val){
  15.                 slidesToshow_val = slidesToshow_leng;
  16.                 }
  17.             $('.slider-pickup').slick({
  18.                 arrows: true,
  19.                 slidesToShow: slidesToshow_val,
  20.                 centerMode: true,
  21.                 responsive: [
  22.                     {
  23.                         breakpoint: 768,
  24.                         settings: {
  25.                             arrows: true,
  26.                             centerMode: true,
  27.                             centerPadding: '40px',
  28.                             slidesToShow: 1
  29.                         }
  30.                     }
  31.                 ],
  32.             });
  33.         });
  34.     </script>
  35.     
  36.     
  37.     
  38.     {#<script>#}
  39.     {#    $(function () {#}
  40.     {#        $('.slider-pickup').slick({#}
  41.     {#            arrows: true,#}
  42.     {#            slidesToShow: 3,#}
  43.     {#            centerMode: true,#}
  44.     {#            responsive: [#}
  45.     {#                {#}
  46.     {#                    breakpoint: 768,#}
  47.     {#                    settings: {#}
  48.     {#                        arrows: true,#}
  49.     {#                        centerMode: true,#}
  50.     {#                        centerPadding: '40px',#}
  51.     {#                        slidesToShow: 1#}
  52.     {#                    },#}
  53.     {#                },#}
  54.     {#            ],#}
  55.     {#        });#}
  56.     {#    });#}
  57.     {#</script>#}
  59.     <script>
  60.         window.addEventListener('load', function () {
  61.             var maxHeight = 0;
  62.             $('.slider-pickup .slider_item').each(function (idx, elem) {
  63.                 var height = $(elem).height();
  64.                 if (maxHeight < height) {
  65.                     maxHeight = height;
  66.                 }
  67.             });
  68.             $('.slider-pickup .slider_item').height(maxHeight);
  69.         });
  71.     </script>
  72. {% endblock javascript %}
  78. {% set ProductList = PickupProductList %}
  80. {% if ProductList|length > 0 %}
  81. <section class="pickup bg-gray">
  82.     <div class="container">
  83.         <h2 class="section-title">
  84.             <span class="_sub">
  85.                 PICK UP
  86.             </span>
  87.             <span class="_main">
  88.                 オススメ書籍
  89.             </span>
  90.         </h2>
  91.         <div class="pickup__content">
  92.             <div class="slider-pickup">
  93.                 {% for Product in ProductList %}
  94.                 <a class="slider_item card-pickup" href="{{ url('product_detail', {'id': Product.id}) }}">
  95.                     <div class="card-pickup__content">
  96.                         {# 新刊ラベル #}
  97.                         {% if Product.new_book_flag %}
  98.                             <div class="card-pickup__new">
  99.                                 <img src="{{ asset('assets/img/top/pickup_new.png','user_data') }}" alt="">
  100.                             </div>
  101.                         {% endif %}
  102.                         {# 画像 #}
  103.                         <div class="card-pickup__img">
  104.                             <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  105.                         </div>
  106.                         <p class="card-pickup__title">{{ Product.name }}</p>
  107.                         <p class="card-pickup__text">
  108.                             {{ Product.description_detail|length > 50 ? Product.description_detail|slice(0, 50) ~ '…' : Product.description_detail }}
  109.                         </p>
  110.                     </div>
  111.                     <p class="card-pickup__btn">
  112.                         詳しく見る
  113.                     </p>
  114.                 </a>
  115.                 
  116.                 {% endfor %}
  117.             </div>
  118.             
  119.         </div>
  120.     </div>
  121. </section>
  122. {% endif %}