{#
* 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 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-inputRange input + span,
.ec-inputRange input {
display: inline-block;
margin-left: 2%;
}
.ec-inputRange input:first-child {
margin-left: 0;
}
.ec-inputRange input {
width: 45%;
}
.ec-checkbox-item {
display: inline-block;
margin-right: 3%;
}
.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-layoutRole__left .ec-inputRange input,
.ec-layoutRole__right .ec-inputRange input {
width: 85%;
margin-left: 0;
}
.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 %}
{% 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');
});
});
</script>
{% endblock %}
<div class="ec-contactRole mb20" id="search_detail">
<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">
<div class="mb10">
<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>
<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\\ProductPlus\\Entity\\ProductItem::IMAGE_TYPE') %}
{% elseif ProductItem.input_type == constant('Plugin\\ProductPlus\\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\\ProductPlus\\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-off4Grid search_detailBtn mb20">
<div class="ec-off4Grid__cell">
<button type="submit" class="ec-blockBtn--cancel">{{ 'searchplus.block.search_button'|trans }}</button>
</div>
</div>
</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>