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

Open in your IDE?
  1. {#
  2. おすすめ商品などの商品一覧を表示するカルーセル
  3. ex. 当店のイチオシ！ ブレーカおすすめ商品
  4. @param string $label ブロックのタイトル
  5. @param string $href_label ブロックのリンクテキスト
  7. SCSS: /html/template/default/assets/scss/bluewood/twig/_category-list.scss
  8. #}
  10. {% set request_uri = app.request.server.get('REQUEST_URI') %}
  12. {% set category_ids = [5, 6, 9, 11, 12, 13, 14, 15, 16, 18, 19, 20, 21, 22, 24, 25, 26, 28, 29, 30, 32, 34, 35] %}
  14. {% set Categories = repository("Eccube\\Entity\\Category")
  15. .createQueryBuilder('c')
  16. .where('c.id IN (:category_ids)')
  17. .setParameter('category_ids', category_ids)
  18. .getQuery()
  19. .getResult() %}
  21. <section>
  22.     {% if label %}
  23.         <div class="heading_with_search_icon heading_with_search_icon--list-page">
  24.             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  25.                 <path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="#CF0800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  26.                 <path d="M16.4424 16.4434L20.9986 20.9997" stroke="#CF0800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  27.             </svg>
  28.             <h2 class="heading_with_search_icon__text">{{ label }}</h2>
  29.         </div>
  30.     {% endif %}
  31.     <div class="grid-container">
  32.     {% for c in Categories %}
  33.     {% set path = asset('assets/img/category/category-img-' ~ c.id ~ '.jpg', "user_data") %}
  34.         <div class="grid-item">
  35.             <a href="{{ url('product_list') }}?category_id={{c.id}}" class="category-list-item">
  36.                 <img src="{{path}}" alt="{{ c.name }}" width="60" height="60" class="category-list-item__img">
  37.                 <div class="category-list-item__label">{{ c.name }}</div>
  38.             </a>
  39.         </div>
  40.     {% endfor %}
  41.     </div>
  42.     <div class="d-flex justify-content-center">
  43.         <button type="button" id="js-collapse" class="sercah-by-category">
  44.             <span>{{ href_label }}</span>
  45.             <span
  46.             class="sercah-by-category__icon"
  47.             >
  48.                 <svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  49.                     <path d="M6 3L11 8L6 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/
  50.                     >
  51.                 </svg>                    
  52.             </span>
  53.         </a>
  54.     </div>
  55. </section>
  57. {% block javascript %}
  58.     <script>
  59.         // カテゴリ一覧から探すを押した時に全てのカテゴリを表示する
  60.         $(document).ready(function() {
  61.             $('.grid-item').hide();
  62.             $('.grid-item:lt(12)').show();
  63.             $('#js-collapse').on('click', () => {
  64.                 $('.grid-item').show();
  65.                 $('#js-collapse').hide();
  66.             });
  67.         });
  68.     </script>
  69. {% endblock %}