{#
* Plugin Name : SearchPlus
*
* Copyright (C) BraTech Co., Ltd. All Rights Reserved.
* http://www.bratech.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' %}
{% block javascript %}
<script>
$(function() {
//デフォルトのデイトタイムピッカーが存在しない場合
if ($('[type="date"]').prop('type') !== 'date') {
$.getScript("{{ asset('assets/js/vendor/moment.min.js', 'admin') }}").done(function() {
$.getScript("{{ asset('assets/js/vendor/moment-with-locales.min.js', 'admin') }}").done(function() {
$.getScript("{{ asset('assets/js/vendor/tempusdominus-bootstrap-4.min.js', 'admin') }}").done(function() {
$('input[type=date]').datetimepicker({
locale: '{{ eccube_config.locale }}',
format: 'YYYY-MM-DD',
useCurrent: false,
buttons: {
showToday: true,
showClose: true
}
});
});
});
});
}
});
$(function() {
var toggleArea = $('.ec-searchDetail__toggleArea');
var toggleBtn = $('.ec-searchDetai__togglelBtn span');
$(toggleBtn).on("click",function($){
toggleArea.slideToggle().toggleClass('is_active');
});
});
//各項目の個別リセット
document.addEventListener('DOMContentLoaded', function () {
const searchClearButtons = document.querySelectorAll('.search_clear');
searchClearButtons.forEach(function (button) {
button.addEventListener('click', function (event) {
event.preventDefault();
const paramName = event.target.getAttribute('data-para');
const currentUrl = new URL(window.location.href);
const searchParams = currentUrl.searchParams;
if(paramName == 'productplus_6'){
searchParams.delete('hmin');
searchParams.delete('hmax');
}else if(paramName == 'productplus_7'){
searchParams.delete('wmin');
searchParams.delete('wmax');
}else{
// 該当するパラメータのリセット
searchParams.delete(paramName + '[]');
}
// 更新されたURLへリダイレクト
window.location.href = currentUrl.toString();
});
});
});
$(function(){
//アコーディオン
$('.cat_nav_open').click(function(){
$(this).toggleClass('active');
$(this).next('nav').slideToggle();
});
});
</script>
{% endblock %}
{# 現在のカテゴリ情報をセット #}
{% set current_id = "" %}
{% set current_name = "" %}
<div class="ec-contactRole product_drawer_search_area">
<div class="search_drawer_menu__top">
<button type="button" class="drawer_menu_detail_btn"><span></span><span></span><span></span></button>
<h2 class="search_drawer_title">絞り込み検索</h2>
</div><!--/.search_drawer_menu__top-->
{# 検索項目表示エリア #}
<div class="seach_resutl">
<ul class="seach_resutl__list">
{# 検索ワード #}
{% if search_form.vars.value and search_form.vars.value.name %}
<li class="ec-topicpath__item">{{ '「%name%」の検索結果'|trans({ '%name%': search_form.vars.value.name }) }}</li>
{% endif %}
{# カテゴリ名 #}
{% if Category is not null %}
{% for Path in Category.path %}
{# 親カテゴリは非表示 #}
{% if Path.id != 34 and Path.id != 7 %}
{% set current_id = Path.id %}
{% set current_name = Path.name %}
<li>{{ current_name }}</li>
{% endif %}
{% endfor %}
{% endif %}
{# 検索項目 #}
{% if ProductItems is defined %}
{% for ProductItem in ProductItems %}
{% set name = 'productplus_' ~ ProductItem.id %}
{% if ProductItem.input_type >= constant('Plugin\\ProductPlus42\\Entity\\ProductItem::SELECT_TYPE') %}
{% for choice in form[name].vars.choices %}
{% if choice.value in form[name].vars.data %}
<li>{{ choice.label }}</li>
{% endif %}
{% endfor %}
{% else %}
{# 高さと幅
{% if form[name].vars.label == "高さ" and form[name].vars.value != '' %}
{{ dump(form[name]) }}
<li>H:{{ form[name].vars.value|number_format }}mm 〜 </li>
{% elseif form[name].vars.label == "幅" and form[name].vars.value != '' %}
{{ dump(form[name]) }}
<li>W:{{ form[name].vars.value|number_format }}mm 〜 </li>
{% endif %}
#}
{% endif %}
{% endfor %}
{% endif %}
{# 高さ #}
{% if searchData.hmin or searchData.hmax %}
<li>
高さ
{% if searchData.hmin %}
{{ searchData.hmin }}mm
{% endif %}
<span>~</span>
{% if searchData.hmax %}
{{ searchData.hmax }}mm
{% endif %}
</li>
{% endif %}
{# 幅 #}
{% if searchData.wmin or searchData.wmax %}
<li>
幅
{% if searchData.wmin %}
{{ searchData.wmin }}mm
{% endif %}
<span>~</span>
{% if searchData.wmax %}
{{ searchData.wmax }}mm
{% endif %}
</li>
{% endif %}
{# 価格帯 #}
{% if form.pmin.vars.value != '' or form.pmax.vars.value != '' %}
<li>
{% if form.pmin.vars.value != '' %}
{{ form.pmin.vars.value|number_format }}円
{% endif %}
<span>~</span>
{% if form.pmax.vars.value != '' %}
{{ form.pmax.vars.value|number_format }}円
{% endif %}
</li>
{% endif %}
</ul>
{# リセットボタン #}
<a class="searchResetLink">検索クリア</a>
</div><!--/.seach_resutl-->
<div class="product_drawer_search_area__inner">
{# ブランド一覧 #}
{% set parentId = 34 %}
{% set ParentCategory = repository('Eccube\\Entity\\Category').find(parentId) %}
{% set childCategories = ParentCategory.children|sort((a, b) => a.sortNo <=> b.sortNo) %}
<div class="search_cat_nav_wrap">
<h2 class="search_en_title">
<span class="en">Brand</span>
<small>ブランドから探す</small>
</h2>
{% if BrandResult %}
<div class="nav_ac_label open">
<p>Brand</p>
<div class="icon-wrap">
<span class="disp_txt open">全て表示</span>
<span class="icon open"></span>
</div>
</div>
{% else %}
<div class="nav_ac_label">
<p>Brand</p>
<div class="icon-wrap">
<span class="disp_txt">全て表示</span>
<span class="icon"></span>
</div>
</div>
{% endif %}
{% if BrandResult %}
<div class="nav_ac_content open">
{% else %}
<div class="nav_ac_content">
{% endif %}
{% if BrandResult %}
<div class="current_cate_name">{{ current_name }}</div>
<div class="cat_nav_open">
<span>その他のブランド</span>
</div>
{% endif %}
<nav>
<ul class="search_cat_nav_list">
{% for childCategory in childCategories %}
{% if current_id != childCategory.id %}
<li>
<a href="{{ url('product_list') }}?category_id={{ childCategory.id }}">
{{ childCategory.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div><!--/.nav_ac_content-->
</div><!--/.search_cat_nav_wrap-->
{# カテゴリ一覧 #}
{% set parentId = 7 %}
{% set ParentCategory = repository('Eccube\\Entity\\Category').find(parentId) %}
{% set childCategories = ParentCategory.children|sort((a, b) => a.sortNo <=> b.sortNo) %}
<div class="search_cat_nav_wrap">
<h2 class="search_en_title">
<span class="en">Category</span>
<small>カテゴリーから探す</small>
</h2>
{% if CategoryResult %}
<div class="nav_ac_label open">
<p>Category</p>
<div class="icon-wrap">
<span class="disp_txt open">全て表示</span>
<span class="icon open"></span>
</div>
</div>
{% else %}
<div class="nav_ac_label">
<p>Category</p>
<div class="icon-wrap">
<span class="disp_txt">全て表示</span>
<span class="icon"></span>
</div>
</div>
{% endif %}
{% if CategoryResult %}
<div class="nav_ac_content open">
{% else %}
<div class="nav_ac_content">
{% endif %}
{% if CategoryResult %}
<div class="current_cate_name">{{ current_name }}</div>
<div class="cat_nav_open">
<span>その他のカテゴリー</span>
</div>
{% endif %}
<nav>
<ul class="search_cat_nav_list">
{% for childCategory in childCategories %}
{% if current_id != childCategory.id %}
<li>
<a href="{{ url('product_list') }}?category_id={{ childCategory.id }}">
{{ childCategory.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</div><!--/.nav_ac_content-->
</div><!--/.search_cat_nav_wrap-->
{# 検索ブロック #}
<form method="get" class="searchform" action="{{ path('product_list') }}">
<div class="ec-searchDetailRole ec-para-normal">
<div class="">
<div class="">
<div class="ec-borderedDefs">
<div class="ec-searchDetail__toggleArea">
<dl class="display_none">
<dt>{{ 'searchplus.block.search_category'|trans }}</dt>
<dd>
<div class="ec-select ec-select_search">
{{ form_widget(form.category_id, {'id': null, 'attr': {'class': 'category_id'}}) }}
</div>
</dd>
</dl>
{% if ProductItems is defined %}
{% for ProductItem in ProductItems %}
{% set name = 'productplus_' ~ ProductItem.id %}
{% if ProductItem.input_type == constant('Plugin\\ProductPlus42\\Entity\\ProductItem::IMAGE_TYPE') %}
{% elseif ProductItem.input_type == constant('Plugin\\ProductPlus42\\Entity\\ProductItem::DATE_TYPE') %}}
{% set name_start = 'productplus_' ~ ProductItem.id ~ '_date_start' %}
{% set name_end = 'productplus_' ~ ProductItem.id ~ '_date_end' %}
<dl>
<dt class="search_item_title nav_ac_label">
<p>{{ ProductItem.name }}</p>
<div class="icon-wrap">
<span class="disp_txt">全て表示</span>
<span class="icon"></span>
</div>
</dt>
<dd>
<div class="ec-halfInput ec-inputRange">
{{ form_widget(form[name_start]) }}<span>~</span>{{ form_widget(form[name_end]) }}
</div>
</dd>
</dl>
{% elseif ProductItem.input_type >= constant('Plugin\\ProductPlus42\\Entity\\ProductItem::SELECT_TYPE') %}
<dl class="acordion_dl">
<dt class="search_item_title nav_ac_label">
<p>{{ form[name].vars.label }}</p>
<div class="icon-wrap">
<span class="disp_txt">全て表示</span>
<span class="icon"></span>
</div>
</dt>
<dd class="nav_ac_content">
<div class="ec-checkbox">
<div id="{{ name }}">
{% for choice in form[name].vars.choices %}
<div class="ec-checkbox-item">
<input id="{{ name }}_{{loop.index}}" type="checkbox" value="{{ choice.value }}" name="{{ form[name].vars.full_name }}[]" {% if choice.value in form[name].vars.data %}checked="checked"{% endif %}>
<label for="{{ name }}_{{loop.index}}"><span>{{ choice.label }}</span></label>
</div>
{% endfor %}
</div>
</div>
</dd>
<dd class="search_item_btn__dt">
{# 検索 & リセットボタン #}
<ul class="btn clearfix search_item_btn__list">
<li>
<a data-para="{{ name }}" class="search_clear">クリア</a>
</li>
<li>
<input type="submit" value="OK" class="search_submit">
</li>
</ul>
</dd>
</dl>
{% else %}
<dl class="search_dl_flex">
<dt class="search_item_title">{{ form[name].vars.label }}</dt>
<dd>
{% if ProductItem.id == 6 %}
{# 高さ ID:6 #}
<div class="ec-halfInput ec-inputRange">
<input type="text" id="hmin" name="hmin" placeholder="" value="{{ searchData.hmin }}"><span class="unit_txt">mm</span>
<span class="line">~</span>
<input type="text" id="hmax" name="hmax" placeholder="" value="{{ searchData.hmax }}"><span class="unit_txt">mm</span>
</div>
{% elseif ProductItem.id == 7 %}
{# 幅 ID:7 #}
<div class="ec-halfInput ec-inputRange">
<input type="text" id="wmin" name="wmin" placeholder="" value="{{ searchData.wmin }}"><span class="unit_txt">mm</span>
<span class="line">~</span>
<input type="text" id="wmax" name="wmax" placeholder="" value="{{ searchData.wmax }}"><span class="unit_txt">mm</span>
</div>
{% endif %}
</dd>
<dd class="search_item_btn__dt">
{# 検索 & リセットボタン #}
<ul class="btn clearfix search_item_btn__list">
<li>
<a data-para="{{ name }}" class="search_clear">クリア</a>
</li>
<li>
<input type="submit" value="OK" class="search_submit">
</li>
</ul>
</dd>
</dl>
{% endif %}
{% endfor %}
{% endif %}
{# 価格検索 #}
<dl class="search_dl_flex">
<dt class="search_item_title">{{ 'searchplus.block.search_price'|trans }}</dt>
<dd>
<div class="ec-halfInput ec-inputRange">
{{ form_widget(form.pmin, {'attr': {'placeholder' : '¥' }}) }}<span>~</span>{{ form_widget(form.pmax, {'attr': {'placeholder' : '¥' }}) }}
</div>
</dd>
<dd class="search_item_btn__dt">
{# 検索 & リセットボタン #}
<ul class="btn clearfix search_item_btn__list">
<li><input type="submit" value="OK" class="search_submit"></li>
</ul>
</dd>
</dl>
</div>
<div class="ec-searchDetai__togglelBtn">
<span>
{{ 'searchplus.block.detail.title'|trans }}
<div class="ec-searchDetailClose">
<a class="ec-searchDetailCloseBtn">
<i class="fas fa-angle-down"></i>
</a>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="search_drawer_btn__bottom">
<a id="headerResetLink" class="searchResetLink headerSearch__clearBtn">クリア</a>
<button class="headerSearch__keywordBtn" type="submit">検索</button>
</div><!--/.search_drawer_btn__bottom-->
</form>
</div><!--/.product_drawer_search_area-->
{% block stylesheet %}
<style>
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
color: #f00;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
color: #00f;
}
.ec-searchDetailRole select {
width: 100%;
}
.ec-layoutRole__left dl,
.ec-layoutRole__right dl,
.ec-layoutRole__left dt,
.ec-layoutRole__right dt,
.ec-layoutRole__left dd,
.ec-layoutRole__right dd {
display: block;
width: 100%;
}
.ec-searchDetail__toggleArea,
.ec-layoutRole__left .ec-searchDetai__togglelBtn,
.ec-layoutRole__right .ec-searchDetai__togglelBtn {
display: none;
}
.ec-layoutRole__left .ec-searchDetail__toggleArea,
.ec-layoutRole__right .ec-searchDetail__toggleArea {
display: block;
}
.ec-searchDetai__togglelBtn {
text-align: center;
margin: 20px 0;
}
.ec-searchDetai__togglelBtn span {
cursor: pointer;
}
.ec-searchDetailClose {
display: inline-block;
}
.ec-searchDetailCloseBtn {
display: inline-block;
border-radius: 50%;
width: 20px;
height: 20px;
color: #fff;
text-align: center;
background: #000;
}
.ec-searchDetai__togglelBtn:hover i {
color: #fff;
}
.is_active + .ec-searchDetai__togglelBtn i {
transform: rotate(180deg) translateY(1px);
}
</style>
{% endblock %}
{#
<div class="ec-contactRole">
<div class="ec-searchDetailRole ec-para-normal">
<div class="ec-off1Grid">
<div class="ec-off1Grid__cell">
<form method="get" class="searchform" action="{{ path('product_list') }}">
<div class="ec-borderedDefs">
<dl>
<dt>{{ 'searchplus.block.search_keyword'|trans }}</dt>
<dd>
<div class="ec-input">
{{ form_widget(form.name, {'id': null, 'attr': {'placeholder' : 'searchplus.block.placeholder.keyword'|trans }} ) }}
</div>
</dd>
</dl>
<div class="ec-searchDetail__toggleArea">
<dl>
<dt>{{ 'searchplus.block.search_category'|trans }}</dt>
<dd>
<div class="ec-select ec-select_search">
{{ form_widget(form.category_id, {'id': null, 'attr': {'class': 'category_id'}}) }}
</div>
</dd>
</dl>
{% if form.maker_id is defined %}
<dl>
<dt>{{ 'maker.admin.maker'|trans }}</dt>
<dd>
<div class="ec-checkbox">
<div id="maker_id">
{% for choice in form.maker_id.vars.choices %}
<div class="ec-checkbox-item">
<input id="maker_id_{{loop.index}}" type="checkbox" value="{{ choice.value }}" name="{{ form.maker_id.vars.full_name }}[]" {% for data in form.maker_id.vars.data %}{% if data.id == choice.value %}checked="checked"{% endif %}{% endfor %}>
<label for="maker_id_{{loop.index}}"><span>{{ choice.label }}</span></label>
</div>
{% endfor %}
</div>
</div>
</dd>
</dl>
{% endif %}
<dl>
<dt>{{ 'searchplus.block.search_price'|trans }}</dt>
<dd>
<div class="ec-halfInput ec-inputRange">
{{ form_widget(form.pmin, {'attr': {'placeholder' : '¥' }}) }}<span>~</span>{{ form_widget(form.pmax, {'attr': {'placeholder' : '¥' }}) }}
</div>
</dd>
</dl>
<dl>
<dt>{{ 'searchplus.block.search_tag'|trans }}</dt>
<dd>
<div class="ec-checkbox">
<div id="tag_id">
{% for choice in form.tag_id.vars.choices %}
<div class="ec-checkbox-item">
<input id="tag_id_{{loop.index}}" type="checkbox" value="{{ choice.value }}" name="{{ form.tag_id.vars.full_name }}[]" {% for data in form.tag_id.vars.data %}{% if data.id == choice.value %}checked="checked"{% endif %}{% endfor %}>
<label for="tag_id_{{loop.index}}"><span>{{ choice.label }}</span></label>
</div>
{% endfor %}
</div>
</div>
</dd>
</dl>
<dl>
<dt>{{ 'searchplus.block.search_instock'|trans }}</dt>
<dd>
<div class="ec-checkbox">
{{ form_widget(form.instock) }}
</div>
</dd>
</dl>
{% if ProductItems is defined %}
{% for ProductItem in ProductItems %}
{% set name = 'productplus_' ~ ProductItem.id %}
{% if ProductItem.input_type == constant('Plugin\\ProductPlus42\\Entity\\ProductItem::IMAGE_TYPE') %}
{% elseif ProductItem.input_type == constant('Plugin\\ProductPlus42\\Entity\\ProductItem::DATE_TYPE') %}
{% set name_start = 'productplus_' ~ ProductItem.id ~ '_date_start' %}
{% set name_end = 'productplus_' ~ ProductItem.id ~ '_date_end' %}
<dl>
<dt>{{ ProductItem.name }}</dt>
<dd>
<div class="ec-halfInput ec-inputRange">
{{ form_widget(form[name_start]) }}<span>~</span>{{ form_widget(form[name_end]) }}
</div>
</dd>
</dl>
{% elseif ProductItem.input_type >= constant('Plugin\\ProductPlus42\\Entity\\ProductItem::SELECT_TYPE') %}
<dl>
<dt>{{ form[name].vars.label }}</dt>
<dd>
<div class="ec-checkbox">
<div id="{{ name }}">
{% for choice in form[name].vars.choices %}
<div class="ec-checkbox-item">
<input id="{{ name }}_{{loop.index}}" type="checkbox" value="{{ choice.value }}" name="{{ form[name].vars.full_name }}[]" {% if choice.value in form[name].vars.data %}checked="checked"{% endif %}>
<label for="{{ name }}_{{loop.index}}"><span>{{ choice.label }}</span></label>
</div>
{% endfor %}
</div>
</div>
</dd>
</dl>
{% else %}
<dl>
<dt>{{ form[name].vars.label }}</dt>
<dd>
<div class="ec-input">
{{ form_widget(form[name]) }}
</div>
</dd>
</dl>
{% endif %}
{% endfor %}
{% endif %}
</div>
<div class="ec-searchDetai__togglelBtn">
<span>
{{ 'searchplus.block.detail.title'|trans }}
<div class="ec-searchDetailClose">
<a class="ec-searchDetailCloseBtn">
<i class="fas fa-angle-down"></i>
</a>
</div>
</span>
</div>
</div>
<div class="ec-off4Grid">
<div class="ec-off4Grid__cell">
<button type="submit" class="ec-blockBtn--cancel">{{ 'searchplus.block.search_button'|trans }}</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
#}