{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% form_theme form 'Form/form_div_layout.twig' %}
{# @see https://github.com/bolt/bolt/pull/2388 #}
{% from _self import tree %}
{% macro tree(Category) %}
{% from _self import tree %}
{% if Category.id is not same as(149) %}
<div class="c-category-link" data-select="{{ Category.id }}">
{{ Category.name }}
</div>
{% endif %}
{% if Category.children|length > 0 %}
<div class="c-sub-category-lists">
{% for ChildCategory in Category.children %}
<div class="c-sub-category-list">
{{ tree(ChildCategory) }}
</div>
{% endfor %}
</div>
{% endif %}
{% endmacro %}
<script>
//初期値
$('.selectBox__output').each(function () {
const defaultText = $(this).next('.c-category-lists').children('.selectBox__selectorItem:first-child').text()
$(this).text(defaultText);
})
if (window.matchMedia('(min-width: 769px)').matches) {
//出力の枠をクリックした時の動作
$('.c-selectBox__output').on('click', function () {
$(this).next('.c-category-lists').slideToggle('fast');
$(this).next('.c-category-lists').toggleClass('open');
});
// バツボタンをクリックしたとき
$('.js-searchModalClose').on('click', function () {
$('.c-selectBox__output').next('.c-category-lists').slideToggle('fast');
})
//選択肢をクリックした時の動作
$('.c-category-link').on('click', function () {
const selectVal = $(this).data('select');
const selectText = $(this).text();
$('.c-selectBox__output').text(selectText);
$('.c-category-lists').slideToggle('fast');
$('.js-select_search_category').val(selectVal);
});
}
</script>
<div class="ec-headerSearch">
<form method="get" class="searchform" action="{{ path('product_list') }}">
<div class="ec-headerSearch__category">
{# <div class="ec-select ec-select_search">
{{ form_widget(form.category_id, {'id': 'select_search_category', 'attr': {'class': 'category_id'}}) }}
</div> #}
<input type="hidden" value="" class="js-select_search_category" id="select_search_category" name="category_id">
<div class="c-selectBox__output" data-select=""><span>全ての商品</span></div>
<div class="c-category-lists">
<span class="batsu js-searchModalClose"></span>
<div class="c-category-box">
<div class="c-category-link" data-select="">全ての商品</div>
{% for Categorie in Category %}
<div class="c-category-list">{{ tree(Categorie) }}</div>
{% endfor %}
</div>
</div>
</div>
<div class="ec-headerSearch__keyword">
<div class="ec-input">
{{ form_widget(form.name, {'id': null, 'attr': {'class': 'search-name', 'placeholder' : 'キーワードを入力' }} ) }}
<button class="ec-headerSearch__keywordBtn" type="submit">
<div class="ec-icon">
<img src="{{ asset('assets/icon/search-dark.svg') }}" alt="">
</div>
</button>
</div>
</div>
</form>
</div>