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

Open in your IDE?
  1. {% block javascript %}
  2.     <script>
  3.     $(function() {
  4.         $(".product_btn_search").click(function(){
  5.             $(this).parent().submit();
  6.         });
  8.         $(".product_btn_del").click(function(){
  9.             $(".search-form-custom").find("input[type='text'], input[type='checkbox'], select").val("");
  10.             $(this).parent().submit();
  11.         });
  12.     });
  13.     </script>
  14. {% endblock %}
  16. <div class="ec-headerNaviRole__search">
  17.     {{ form_start(searchForm, {'method': 'GET', 'action': path('custom_product_search'), 'attr': {'class': 'search-form-custom product_form_search'}}) }}
  19.         <div class="ec-headerSearch__keyword">
  20.             <div class="ec-input">
  21.                 <p class="_title02">キーワード</p>
  22.                 <div class='cus-input-search'>
  23.                     {{ form_widget(searchForm.keyword, {
  24.                         'attr': {
  25.                             'class': 'form-control',
  26.                             'placeholder': ''
  27.                         }
  28.                     }) }}
  29.                     <button class="ec-headerSearch__keywordBtn" type="submit"></button>
  30.                 </div>
  31.             </div>
  32.         </div>
  34.         <h3 class="product_form_title {% if category %}active{% endif %}">
  35.             <span>カテゴリー</span>
  36.         </h3>
  37.         <ul class="product_form_checkbox" {% if category %}style="display:block"{% endif %}>
  38.             {% for category in searchForm.category %}
  39.             <li>
  40.             {{ form_widget(category, {
  41.                 'attr': {
  42.                     'class': 'form-check-input',
  43.                     'id': 'category_' ~ category.vars.value
  44.                 }
  45.             }) }}
  46.             </li>
  47.             {% endfor %}
  48.         </ul>
  50.         <h3 class="product_form_title _icon01 {% if category17 %}active{% endif %}">
  51.             <span>ライフスタイル</span>
  52.         </h3>
  53.         <ul class="product_form_checkbox" {% if category17  %}style="display:block"{% endif %}>
  54.             {% for category in searchForm.category_17 %}
  55.             <li>
  56.             {{ form_widget(category, {
  57.                 'attr': {
  58.                     'class': 'form-check-input',
  59.                     'id': 'category_' ~ category.vars.value
  60.                 }
  61.             }) }}
  62.             </li>
  63.             {% endfor %}
  64.         </ul>
  66.         <h3 class="product_form_title _icon02"><span>こだわり条件から探す</span></h3>
  67.         <p class="_title02">商品ステータス</p>
  68.         {{ form_widget(searchForm.category_19, {
  69.             'attr': {
  70.                 'class': 'product_form_select',
  71.             }
  72.         }) }}
  73.         
  74.         <p class="_title02">サイズ</p>
  75.         <ul class="product_size_checkbox">
  76.             {% for ClassCategory in searchForm.class_name_2 %}
  77.             <li>
  78.             {{ form_widget(ClassCategory, {
  79.                 'attr': {
  80.                     'class': 'form-check-input',
  81.                     'id': 'category_' ~ ClassCategory.vars.value
  82.                 }
  83.             }) }}
  84.             </li>
  85.             {% endfor %}
  86.         </ul>
  88.         <div class="_column">
  89.             <p class="_title02">塗装</p>
  90.             <a class="_tooltip _left" href="#" data-tooltip="ツヤありは光沢があり、ツヤなしは落ち着いたマット仕上げになります。"></a>
  91.         </div>
  92.         <ul class="product_coating_checkbox">
  93.             {% for category in searchForm.class_name_4 %}
  94.             <li>
  95.             {{ form_widget(category, {
  96.                 'attr': {
  97.                     'class': 'form-check-input',
  98.                     'id': 'category_' ~ category.vars.value
  99.                 }
  100.             }) }}
  101.             </li>
  102.             {% endfor %}
  103.         </ul>
  106.         <p class="_title02">ボディタイプ</p>
  107.         {{ form_widget(searchForm.class_name_3, {
  108.             'attr': {
  109.                 'class': 'product_form_select',
  110.             }
  111.         }) }}
  112.         
  113.         <div class="_column">
  114.             <p class="_title02">フレット数</p>
  115.             <a class="_tooltip _left" href="#" data-tooltip="弦を押さえる金属の数です。フレットが多いほど高い音まで演奏できます。"></a>
  116.         </div>
  117.         {{ form_widget(searchForm.class_name_1, {
  118.             'attr': {
  119.                 'class': 'product_form_select',
  120.             }
  121.         }) }}
  123.         <div class="_column">
  124.             <p class="_title02">ピックアップ</p>
  125.             <a class="_tooltip _left" href="#" data-tooltip="アンプにつなぐための機能です。ライブ演奏や録音にも使えます。"></a>
  126.         </div>
  127.         {{ form_widget(searchForm.class_name_5, {
  128.             'attr': {
  129.                 'class': 'product_form_select',
  130.             }
  131.         }) }}
  133.         <p class="_title02">価格帯</p>
  134.         <div class="product_form_price">
  135.             {{ form_widget(searchForm.price_min, {
  136.                 'attr': {
  137.                     'class': 'product_form_select',
  138.                 }
  139.             }) }}
  140.             </select><span class="_yen">円</span><span class="_to">〜</span>
  141.             {{ form_widget(searchForm.price_max, {
  142.                 'attr': {
  143.                     'class': 'product_form_select',
  144.                 }
  145.             }) }}
  146.             <span class="_yen">円</span>
  147.         </div>
  149.         <p class="product_btn_search">この条件で絞り込む</p>
  150.         <p class="product_btn_del">リセット</p>
  151.     {{ form_end(searchForm) }}
  152. </div>