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

Open in your IDE?
  1. {% set Category1 = repository('Eccube\\Entity\\Category').find(207) %} <!-- ブランド -->
  2. {% set Category2 = repository('Eccube\\Entity\\Category').find(206) %} <!-- 車種専用パーツ -->
  3. {% set Category3 = repository('Eccube\\Entity\\Category').find(2341) %} <!-- マテリアル -->
  4.     <div class="side_search-box">
  5.         <div class="mb-3">
  6.             <input type="text" class="form-control" placeholder="キーワード検索">
  7.         </div>
  8.         <div>
  9.             <h2>車種検索</h2>
  10.         </div>
  11.         <div>
  12.             <div class="dropdown drop-search-box">
  13.                 <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
  14.                 {% if selected_maker %}
  15.                     {{ selected_maker.name }}
  16.                 {% else %}
  17.                     全てのメーカー
  18.                 {% endif %}
  19.                 </button>
  20.                 <ul class="dropdown-menu" id="maker-ul" aria-labelledby="dropdownMenuButton1">
  21.                 {% for maker in Makers %}
  22.                     <li><a class="dropdown-item" href="javascript:void(0)" onclick="clickMakerSearch({{ maker.id }}, '{{ maker.name }}')">{{ maker.name }}</a></li>
  23.                 {% endfor %}
  24.                 </ul>
  25.             </div>
  26.             <div class="dropdown drop-search-box">
  27.                 <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
  28.                 {% if selected_vehicle_model %}
  29.                     {{ selected_vehicle_model.name }}
  30.                 {% else %}
  31.                     全ての車種
  32.                 {% endif %}
  33.                 </button>
  34.                 <ul class="dropdown-menu" id="vehicle-ul" aria-labelledby="dropdownMenuButton2">
  35.                 {% for vehicle in vehicleModels %}
  36.                     <li><a class="dropdown-item" href="javascript:void(0)" onclick="clickVehicleSearch({{ vehicle.id }}, '{{ vehicle.name }}')">{{ vehicle.name }}</a></li>
  37.                 {% endfor %}
  38.                 </ul>
  39.             </div>
  40.             <div class="dropdown drop-search-box">
  41.                 <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">
  42.                 {% if selected_year_model %}
  43.                     {{ selected_year_model.name }}
  44.                 {% else %}
  45.                     全ての年式
  46.                 {% endif %}
  47.                 </button>
  48.                 <ul class="dropdown-menu" id="modelYear-ul" aria-labelledby="dropdownMenuButton3">
  49.                 {% for model_year in yearModels %}
  50.                     <li><a class="dropdown-item" href="javascript:void(0)" onclick="clickModelYearSearch({{ model_year.id }}, '{{ model_year.name }}')">{{ model_year.name }}</a></li>
  51.                 {% endfor %}
  52.                 </ul>
  53.             </div>
  54.         </div>
  55.         <div>
  56.             <input type="button" value="検索" onclick="clickSideSearch()" />
  57.         </div>
  58.     </div>
  59.     <div class="side_search-box">
  60.         <div>
  61.             <h2>絞り込み検索</h2>
  62.         </div>
  63.         <div>
  64.             <h2>ブランド</h2>
  65.                 <div class="category-box">
  66.                     <div>
  67.                         {% for Brand in Brands %}
  68.                             <label for="{{ Brand.id }}">{{ Brand.name }}
  69.                                 <input type="checkbox" name="search_brand_box" id="{{ Brand.id }}" value="{{ Brand.id }}">
  70.                                 <span class="checkmark"></span>
  71.                                 <div class="control__indicator"></div>
  72.                             </label>
  73.                         {% endfor %}
  74.                     </div>
  75.                 </div>
  76.             {% if SearchCategories is not empty %}
  77.                 {% for SearchCategory in SearchCategories %}
  78.                     <div>
  79.                         <h2>{{ SearchCategory.Category.name }}</h2>
  80.                         <div class="category-box">
  81.                             <div>
  82.                                 {% for Category in SearchCategory.Category.children %}
  83.                                     <label for="{{ Category.id }}">{{ Category.name }}
  84.                                         <input type="checkbox" name="search_category_box" id="{{ Category.id }}" value="{{ Category.id }}">
  85.                                         <span class="checkmark"></span>
  86.                                         <div class="control__indicator"></div>
  87.                                     </label>
  88.                                 {% endfor %}
  89.                             </div>
  90.                         </div>
  91.                     </div>
  92.                 {% endfor %}
  93.             {% endif %}
  94.         </div>
  95.         <div>
  96.             <input type="button" value="検索" onclick="clickSideSearch()" />
  97.         </div>
  98.     </div>
  101. <style>
  102.     .side_search-box h2{
  103.         font-size: 16px;
  104.         font-weight: bold;
  105.     }
  106.     .side_search-box h3{
  107.         font-size: 15px;
  108.     }
  109.     .side_search-box h2, .side_search-box h3{
  110.         margin: 15px 10px;
  111.     }
  112.     .side_search-box{
  113.         /*padding: 10px 10px 10px 20px;*/
  114.         border: 1px solid #bdbdbd;
  115.         border-radius: 5px;
  116.         margin: 20px 5px 5px 30px;
  117.     }
  118.     .side_search-box .drop-search-box button{
  119.         width: 80%;
  120.         margin: 10px 10%;
  121.         border: 1px solid #bdbdbd;
  122.     }
  123.     .side_search-box label{
  124.         margin-left: 30px;
  125.         margin-bottom: 8px;
  126.         padding-left: 30px;
  127.         display: block;
  128.         cursor: pointer;
  129.         position: relative;
  130.     }
  131.     .side_search-box input[type="checkbox"]{
  132.         display: none;
  133.     }
  134.     .side_search-box .checkmark {
  135.         position: absolute;
  136.         top: 0;
  137.         left: 0;
  138.         height: 20px;
  139.         width: 20px;
  140.         /*background: #CCC;*/
  141.         box-sizing: border-box;
  142.         border: solid 1px;
  143.     }
  144.     .side_search-box .checkmark:after {
  145.         content: "";
  146.         position: absolute;
  147.         display: none;
  148.         left: 6px;
  149.         top: 2px;
  150.         width: 5px;
  151.         height: 10px;
  152.         border: 2px solid #FFF;
  153.         border-width: 0 2px 2px 0;
  154.         transform: rotate(45deg);
  155.     }
  157.     /* チェック時のスタイル */
  158.     .side_search-box input:checked + .checkmark {
  159.         background-color: #5D94D1;
  160.     }
  162.     /* チェック時 チェックマーク表示 */
  163.     .side_search-box input:checked + .checkmark:after {
  164.         display: block;
  165.     }
  167.     .side_search-box li{
  168.         display: block;
  169.     }
  170.     .side_search-box > div{
  171.         border-bottom: 1px solid #bdbdbd;
  172.     }
  173.     .side_search-box > div:last-child{
  174.         border-bottom: none;
  175.     }
  176.     .side_search-box input[type="button"]{
  177.         width: 100%;
  178.         padding: 10px;
  179.         font-size: 16px;
  180.         background: #5D94D1;
  181.         color: #FFF;
  182.         border: none;
  183.         border-radius: 0 0 3px 3px;
  184.     }
  185.     .category-box{
  186.         padding-bottom: 10px;
  187.     }
  188. </style>