src/Eccube/Resource/template/default/product_list.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. #}
  11. {% set body_class = 'front_page' %}
  13. {% block stylesheet %}
  14. <style>
  15.   .slider {
  16.      opacity: 0;
  17.     transition: opacity .3s linear;
  18.   }
  19.    .slider.slick-initialized {
  20.     opacity: 1;
  21.   }
  22. </style>
  24. {% endblock %}
  26. {% block javascript %}
  27.     <script>
  28.         $(document).ready(function(){
  29.             var $id = {{ id }};
  30.             var matchingElement = $('[id="product_carousel__' + $id + '"]');
  31.             matchingElement.not('.slick-initialized').slick({
  32.                 slidesToShow: 4,
  33.                 slidesToScroll: 1,
  34.                 accessibility: true,
  35.                 prevArrow: '<div class="prev-arrow h-full absolute left-[-1.4vw] lg:left-0 top-[50%] translate-y-[-50%] flex items-center justify-center z-20 hover"><img class="w-2 h-5" src="{{ asset('assets/img/top/prev_arrow.svg') }}" /></div>',
  36.                 nextArrow: '<div class="next-arrow h-full absolute right-0 lg:right-[5vw] lessThanLg:pl-0 xxl:pl-[1.5vw] top-[50%] translate-y-[-50%] flex items-center z-20 hover"><img class="w-2 h-5" src="{{ asset('assets/img/top/next_arrow.svg') }}" /></div>',
  37.                 infinite: true,
  38.                 responsive: [
  39.                     {
  40.                         breakpoint: 1024,
  41.                         settings: {
  42.                             slidesToShow: 4,
  43.                             slidesToScroll: 1,
  44.                             infinite: true,
  45.                             appendArrows: $('[id="arrow-box__' + $id + '"]'),
  46.                         }
  47.                     },
  48.                 ]
  49.             });
  50.         });
  51.     </script>
  52. {% endblock javascript %}
  54. {% block main %}
  55.     <div class="{{class}} flex flex-col w-full items-end">
  56.         <div class="flex flex-col w-full">
  57.             <div class="flex justify-between w-full xl:pl-3 md:justify-center md:gap-x-[max(6.4vw,24px)]">
  58.                 <img src="{{ asset(image) }}" alt="商品画像" class="w-[max(44.27vw,850px)] xxl:w-[800px] h-auto max-w-[850px] lg:hidden xxl:pr-3" loading="lazy">
  59.                 <img src="{{ asset(spimage) }}" alt="商品画像" class="w-full max-w-[350px] sm:w-[68vw] h-auto ml-6 md:ml-0 hidden lg:block" loading="lazy">
  60.                 <div class="flex font-extralight gap-7 md:gap-2 xl:pr-[max(3.75vw,22px)]">
  61.                     <p class="text-[22px] [writing-mode:vertical-rl] md:text-xs tracking-[6px] md:tracking-[3px]">{{subtitle}}</p>
  62.                     <p class="text-[36px] [writing-mode:vertical-rl] md:text-lg items-center tracking-[14px] md:tracking-[10px]">{{title}}</p>
  63.                 </div>
  64.             </div>
  65.             {# スライダー #}
  66.             <div class="bg-white relative ml-auto w-[41.66vw] max-w-[808px] mr-7 lg:mr-0 mt-[-5.6vw] lg:mt-[0px] flex box-border lg:w-full">
  67.                 <div id="arrow-box__{{id}}"></div>
  68.                 <div id="product_carousel__{{ id }}" class="relative mx-10 md:mx-4 gap-x-2 md:gap-x-5 w-[40vw] items-center box-border lg:w-[100vw]">
  69.                     {# アイテム #}
  70.                     {% for images in productImages %}
  71.                         {% for image in images %}
  72.                             {% if id == image.category_id %}
  73.                                 <a href={{ url('product_detail', {'id': image.product_id}) }} class="slick-slide w-[8.85vw] drop-shadow-[0_8px_3px_rgba(0,0,0,0.08)] lg:w-[22.9vw] items-center mt-10 md:mt-6 mb-10 product-list box-border hover cursor-pointer" ontouchstart = "">
  74.                                     {% if image.file_name %}
  75.                                         <img src="{{ asset(image.file_name,'save_image') }}" alt="" class="w-[8.85vw] h-[8.85vw] lg:w-[22.9vw] lg:h-[22.9vw]" loading="lazy">
  76.                                     {% else %}
  77.                                         <img src="" alt="" class="w-[8.85vw] h-[8.85vw] lg:w-[22.9vw] lg:h-[22.9vw]" loading="lazy">
  78.                                     {% endif %}
  79.                                     <p class="w-[8.85vw] bg-white lg:w-[22.9vw] h-[74px] md:h-[60px] lg:text-[min(3.2vw,18px)] text-lg py-2 px-3 text-center flex justify-center items-center leading-normal">{{image.name}}</p>
  80.                                 </a>
  81.                             {% endif %}
  82.                         {% endfor %}
  83.                     {% endfor %}
  84.                 </div>
  85.             </div>
  86.         </div>
  87.         <a
  88.             href="{{url('product_list',{'category_id':id})}}"
  89.             class="flex xl:mr-7 ml-auto md:ml-0 md:h-[46px] md:w-[156px] w-[240px] h-[60px] bg-[#EFEEE8] gap-x-5 items-center justify-center border-b-[1px] border-manakaBlack bottom-0 hover cursor-pointer drop-shadow-[0_10px_5px_rgba(0,0,0,0.08)]">
  90.             <p class="md:text-sm tracking-widest">商品一覧</p>
  91.             <img src="{{ asset('assets/img/top/arrow_link.svg') }}" alt="矢印">
  92.         </a>
  93.     </div>
  94. {% endblock %}