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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  12. {% block javascript %}
  13. <script>
  14.   $(function () {
  15.     $('#js-slider-2').slick({
  16.       arrows: true, // 前・次のボタンを表示する
  17.       speed: 500, // スライドさせるスピード（ミリ秒）
  18.       slidesToShow: 4, // 表示させるスライド数
  19.       centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
  20.       variableWidth: true, // スライド幅の自動計算を無効化
  21.     });
  22.   });
  23. </script>
  24. {% endblock %}
  26. {% block stylesheet %}
  27.     <style>
  28.     .pickedCard {
  29.       width: auto;
  30.       height: auto;
  31.     }
  32.     .img-wrap {
  33.       width: 300px;
  34.       height: 400px;
  35.     }
  36.     .img {
  37.       width: auto;
  38.       max-width: 100%;
  39.       height: auto;
  40.       max-height: 400px;
  41.     }
  42.     </style>
  43. {% endblock %}
  45. <div class="ec-role">
  46.   <div class="ec-secHeading">
  47.     <div class="component-title">注目の作品</div>
  48.     <h4 class="mt-5px">販売中の人気現代アート作品をご覧いただけます</h4>
  49.   </div>
  50.   <ul class="slider-2" id="js-slider-2">
  51.     {% for product in products %}
  52.     {% if product.ProductImage[0] is defined %}
  53.     <li>
  54.       <div class="ec-newItemRole__listItem pickedCard">
  55.           <a href="{{ url('product_detail', {'id': product.id}) }}" class="text-decoration">
  56.               {# 最初の一枚だけで #}
  57.               <div class="img-wrap"><img class="img" src="{{ asset(product.ProductImage[0], 'save_image') }}" /></div>
  58.               <p class="ec-newItemRole__listItemTitle fontWeightBold">{{ product.name|trans }}</p>
  59.               <p class="ec-newItemRole__listItemPrice fontWeightBold">￥{{ product.getPrice02IncTaxMax|trans }}(税込)</p>
  60.           </a>
  61.           {# 画像全部表示させたい時 #}
  62.           {# {% for productImage in product.ProductImage %}
  63.             <div><img src="{{ asset(productImage, 'save_image') }}" /></div>
  64.           {% endfor %} #}
  65.       </div>
  66.     </li>
  67.     {% endif %}
  68.     {% endfor %}
  69.   </ul>
  70. </div>