app/template/default/Block/pickup_maker.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. {# デザイン確認用: dtb_pickup_makerを使わず、メーカーと商品を直接取得 #}
  13. {% set Makers = repository('Plugin\\Maker42\\Entity\\Maker').findBy({}, {sort_no: 'desc'}, 3) %}
  14. {% set pickupMakers = [] %}
  15. {% for Maker in Makers %}
  16.     {% set products = repository('Eccube\\Entity\\Product').findBy({'Maker': Maker, 'Status': 1}, {'create_date': 'DESC'}, 1000) %}
  17.     {% set inStockProducts = [] %}
  18.     {% for p in products %}
  19.         {% if p.main_list_image and p.getStockMax > 0 and inStockProducts|length < 10 %}
  20.             {% set inStockProducts = inStockProducts|merge([p]) %}
  21.         {% endif %}
  22.     {% endfor %}
  23.     {% if inStockProducts|length > 0 %}
  24.         {% set pickupMakers = pickupMakers|merge([{'maker': Maker, 'products': inStockProducts}]) %}
  25.     {% endif %}
  26. {% endfor %}
  28. {% if pickupMakers|length > 0 %}
  29. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  30. <style>
  31.     .pickup-maker-section {
  32.         margin-bottom: 40px;
  33.     }
  34.     .pickup-maker-header {
  35.         margin-bottom: 16px;
  36.         padding: 0 4px;
  37.     }
  38.     .pickup-maker-header h3 {
  39.         display: flex;
  40.         align-items: center;
  41.         gap: 8px;
  42.         font-size: 1.2rem;
  43.         font-weight: bold;
  44.         margin: 0;
  45.     }
  46.     .pickup-maker-header__logo {
  47.         width: 64px !important;
  48.         height: 64px !important;
  49.         object-fit: contain;
  50.     }
  51.     .pickup-maker-more {
  52.         text-align: right;
  53.         margin-top: 12px;
  54.         padding: 0 4px;
  55.     }
  56.     .pickup-maker-swiper {
  57.         position: relative;
  58.         padding: 0 40px;
  59.     }
  60.     .pickup-maker-swiper .swiper-button-prev,
  61.     .pickup-maker-swiper .swiper-button-next {
  62.         color: #333;
  63.         width: 32px;
  64.         height: 32px;
  65.     }
  66.     .pickup-maker-swiper .swiper-button-prev::after,
  67.     .pickup-maker-swiper .swiper-button-next::after {
  68.         font-size: 16px;
  69.     }
  70.     .pickup-maker-swiper .swiper-button-prev {
  71.         left: 0;
  72.     }
  73.     .pickup-maker-swiper .swiper-button-next {
  74.         right: 0;
  75.     }
  76.     .pickup-maker-swiper .ec-shelfGrid__item {
  77.         width: 100%;
  78.         margin-bottom: 0;
  79.         padding: 0;
  80.     }
  81.     @media (max-width: 767px) {
  82.         .pickup-maker-swiper {
  83.             padding: 0 30px;
  84.         }
  85.     }
  86. </style>
  88. <div class="ec-role">
  89.     <div class="pickup_maker">
  90.         <h2 class="top_title">ピックアップメーカー</h2>
  92.         {% for entry in pickupMakers %}
  93.             <div class="pickup-maker-section">
  94.                 <div class="pickup-maker-header">
  95.                     <h3>
  96.                         <a class="text-decoration-none" href="{{ url('product_list') }}?maker_id={{ entry.maker.id }}">
  97.                             <img class="pickup-maker-header__logo" src="{{ asset('assets/img/maker/' ~ entry.maker.id ~ '.png', 'user_data') }}" alt="{{ entry.maker.name }}" loading="lazy">
  98.                             {{ entry.maker.name }}
  99.                         </a>
  100.                     </h3>
  101.                 </div>
  103.                 <div class="pickup-maker-swiper">
  104.                     <div class="swiper pickup-maker-swiper-{{ loop.index }}">
  105.                         <div class="swiper-wrapper">
  106.                             {% for Product in entry.products %}
  107.                                 <div class="swiper-slide">
  108.                                     <div class="ec-shelfGrid__item">
  109.                                         <a href="{{ url('product_detail', {'id': Product.id}) }}">
  110.                                             <p class="ec-shelfGrid__item-image">
  111.                                                 <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}"
  112.                                                      alt="{{ Product.name }}" loading="lazy" class="w-auto">
  113.                                             </p>
  114.                                             <dl>
  115.                                                 <dt class="fs-6 item_name">{{ Product.name }}</dt>
  116.                                             </dl>
  117.                                         </a>
  118.                                         <div class="ec-shelfGrid__item-buttom">
  119.                                             {{ include('Block/product_list_price.twig', {Product: Product}, ignore_missing = true) }}
  120.                                             {{ include('Block/product_code.twig', {Product: Product}, ignore_missing = true) }}
  121.                                             {{ include('Block/stock.twig', {Product: Product}, ignore_missing = true) }}
  122.                                         </div>
  123.                                     </div>
  124.                                 </div>
  125.                             {% endfor %}
  126.                         </div>
  127.                     </div>
  128.                     <div class="swiper-button-prev swiper-button-prev-{{ loop.index }}"></div>
  129.                     <div class="swiper-button-next swiper-button-next-{{ loop.index }}"></div>
  130.                 </div>
  132.                 <div class="pickup-maker-more">
  133.                     <a class="btn-metro-color px-5 py-2 fs-6" href="{{ url('product_list') }}?maker_id={{ entry.maker.id }}">もっと見る</a>
  134.                 </div>
  135.             </div>
  136.         {% endfor %}
  137.     </div>
  138. </div>
  140. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  141. <script>
  142.     document.addEventListener('DOMContentLoaded', function() {
  143.         {% for entry in pickupMakers %}
  144.             new Swiper('.pickup-maker-swiper-{{ loop.index }}', {
  145.                 slidesPerView: 2,
  146.                 spaceBetween: 12,
  147.                 navigation: {
  148.                     prevEl: '.swiper-button-prev-{{ loop.index }}',
  149.                     nextEl: '.swiper-button-next-{{ loop.index }}',
  150.                 },
  151.                 breakpoints: {
  152.                     768: {
  153.                         slidesPerView: 4,
  154.                         spaceBetween: 16,
  155.                     },
  156.                     1024: {
  157.                         slidesPerView: 5,
  158.                         spaceBetween: 20,
  159.                     },
  160.                 },
  161.             });
  162.         {% endfor %}
  163.     });
  164. </script>
  165. {% endif %}