app/template/default/Block/search_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. #}
  8. {% form_theme form 'Form/form_div_layout.twig' %}
  9. {# @see https://github.com/bolt/bolt/pull/2388 #}
  10. {% from _self import tree %}
  11. {% macro tree(Category) %}
  12.     {% from _self import tree %}
  13.     {% if Category.id is not same as(149) %}
  14.     <div class="c-category-link" data-select="{{ Category.id }}">
  15.         {{ Category.name }}
  16.     </div>
  17.     {% endif %}
  18.     {% if Category.children|length > 0 %}
  19.         <div class="c-sub-category-lists">
  20.             {% for ChildCategory in Category.children %}
  21.             
  22.                 <div class="c-sub-category-list">
  23.                     {{ tree(ChildCategory) }}
  24.                 </div>
  25.                 
  26.             {% endfor %}
  27.         </div>
  28.     {% endif %}
  29. {% endmacro %}
  30. <script>
  31.     //初期値
  32.     $('.selectBox__output').each(function () {
  33.         const defaultText = $(this).next('.c-category-lists').children('.selectBox__selectorItem:first-child').text()
  34.         $(this).text(defaultText);
  35.     })
  37.     if (window.matchMedia('(min-width: 769px)').matches) {
  38.     //出力の枠をクリックした時の動作
  39.     $('.c-selectBox__output').on('click', function () {
  40.         $(this).next('.c-category-lists').slideToggle('fast');
  41.         $(this).next('.c-category-lists').toggleClass('open');
  42.     });
  44.     // バツボタンをクリックしたとき
  45.     $('.js-searchModalClose').on('click', function () {
  46.       $('.c-selectBox__output').next('.c-category-lists').slideToggle('fast');
  47.     })
  48.     //選択肢をクリックした時の動作
  49.     $('.c-category-link').on('click', function () {
  50.         const selectVal = $(this).data('select');
  51.         const selectText = $(this).text();
  52.         $('.c-selectBox__output').text(selectText);
  53.         $('.c-category-lists').slideToggle('fast');
  54.         $('.js-select_search_category').val(selectVal);
  55.     });
  56.     }
  57. </script>
  58. <div class="ec-headerSearch">
  59.     <form method="get" class="searchform" action="{{ path('product_list') }}">
  60.         <div class="ec-headerSearch__category">
  61.             {# <div class="ec-select ec-select_search">
  62.                 {{ form_widget(form.category_id, {'id': 'select_search_category', 'attr': {'class': 'category_id'}}) }}
  63.             </div> #}
  64.             <input type="hidden" value="" class="js-select_search_category" id="select_search_category" name="category_id">
  65.             <div class="c-selectBox__output" data-select=""><span>全ての商品</span></div>
  66.             <div class="c-category-lists">
  67.                 <span class="batsu js-searchModalClose"></span>
  68.                 <div class="c-category-box">
  69.                     <div class="c-category-link" data-select="">全ての商品</div>
  70.                     {% for Categorie in Category %}
  71.                         <div class="c-category-list">{{ tree(Categorie) }}</div>
  72.                     {% endfor %}
  74.                 </div>
  76.             </div>
  77.         </div>
  78.         <div class="ec-headerSearch__keyword">
  79.             <div class="ec-input">
  80.                 {{ form_widget(form.name, {'id': null, 'attr': {'class': 'search-name', 'placeholder' : 'キーワードを入力' }} ) }}
  81.                 <button class="ec-headerSearch__keywordBtn" type="submit">
  82.                     <div class="ec-icon">
  83.                         <img src="{{ asset('assets/icon/search-dark.svg') }}" alt="">
  84.                     </div>
  85.                 </button>
  86.             </div>
  87.         </div>
  88.     </form>
  89. </div>