app/template/BlackCherry/Block/footer.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% block stylesheet %}
  12. <style>
  13.     .search-menu {
  14.     background: #FFE8F2;
  15.     width: 100%;
  16.     height: 100vh;
  17.     position: fixed;
  18.     top: 0;
  19.     left: 0;
  20.     z-index: 99999;
  21.     overflow-y: auto;
  22.     padding: 1.2em;
  23.     box-sizing: border-box;
  24.     font-family: sans-serif;
  25.     }
  27.     .search-menu__header {
  28.     display: flex;
  29.     justify-content: flex-start;
  30.     align-items: center;
  31.     }
  33.     .close-btn {
  34.     background: none;
  35.     border: none;
  36.     font-size: 1.2em;
  37.     color: black;
  38.     text-align: center;
  39.     font-weight: bold;
  40.     }
  41.     .close-btn span {
  42.     font-size: 0.7em;
  43.     display: block;
  44.     }
  46.     .search-menu__title {
  47.     text-align: center;
  48.     font-size: 0.9em;
  49.     margin: 0.5em 0 1em;
  50.     color: #C60D69;
  51.     }
  53.     .search-menu__subtitle {
  54.     font-size: 0.8em;
  55.     text-align: center;
  56.     margin-top: 1.2em;
  57.     font-style: italic;
  58.     color: #black;
  59.     }
  61.     .input-text {
  62.     width: 100%;
  63.     padding: 0.7em;
  64.     margin-bottom: 1em;
  65.     border-radius: 5px;
  66.     border: none;
  67.     font-size: 1em;
  68.     box-sizing: border-box;
  69.     }
  71.     .form-group {
  72.     display: flex;
  73.     align-items: center;
  74.     margin-bottom: 0.8em;
  75.     }
  77.     .label-box {
  78.     background-color: #FC7CB3;
  79.     padding: 0.4em 0.8em;
  80.     border-radius: 3px;
  81.     font-size: 0.8em;
  82.     font-style: italic;
  83.     margin-right: 0.5em;
  84.     white-space: nowrap;
  85.     color: #444;
  86.     }
  88.     .select-box {
  89.     flex: 1;
  90.     padding: 0.5em;
  91.     border: none;
  92.     border-radius: 4px;
  93.     font-size: 1em;
  94.     }
  96.     .search-menu__buttons {
  97.     display: flex;
  98.     justify-content: space-between;
  99.     margin-top: 1.5em;
  100.     }
  102.     .btn-reset {
  103.     background: white;
  104.     border: 1px solid #aaa;
  105.     padding: 0.5em 1.2em;
  106.     border-radius: 5px;
  107.     font-weight: bold;
  108.     }
  110.     .btn-search {
  111.     background: #C60D69;
  112.     color: white;
  113.     border: none;
  114.     padding: 0.5em 2em;
  115.     border-radius: 5px;
  116.     font-weight: bold;
  117.     }
  118. </style>
  119. {% endblock %}
  120. {% block javascript %}
  121. <script>
  122.     var makers = {{ global_makers|map(m => {'id': m.id, 'name': m.name})|json_encode|raw }};
  123. </script>
  124. <script>
  125.   $(function () {
  126.        let select = $('#makerSelect'); // id="makerSelect" をターゲット
  127.       if (typeof makers !== 'undefined') {
  128.         makers.forEach(function (m) {
  129.           select.append($('<option>', { value: m.id, text: m.name }));
  130.         });
  132.         // URLパラメータ維持
  133.         const params = new URLSearchParams(window.location.search);
  134.         if (params.has('maker_id')) {
  135.           select.val(params.get('maker_id'));
  136.         }
  137.       }
  138.       
  139.     $('#searchMenu').hide();
  141.     $('#openSearchMenu').on('click', function () {
  142.       $('#searchMenu').fadeIn();
  143.     });
  145.     $('#closeSearchMenu').on('click', function () {
  146.       $('#searchMenu').fadeOut();
  147.     });
  148.   });
  149. </script>
  150. {% endblock %}
  151. <div class="ec-footerRole">
  152.     <div class="ec-footerRole__top"></div>
  153.     <div class="ec-footerRole__inner">
  154.         <div class="ec-footerTitle__logo">
  155.             <a href="{{ url('homepage') }}">
  156.                 <img src="{{ asset('assets/img/new/img_logo.png') }}" alt="logo" />
  157.             </a>
  158.         </div>
  159.     </div>
  160. </div>
  161. <div class="ec-footerRoleSP">
  162.     <ul>
  163.         <li>
  164.             <div id="openSearchMenu" class="ec-footerRoleSP_navi before-search">検索</div>
  165.         </li>
  166.         <li>
  167.             <a href="{{ url('cart') }}" class="ec-footerRoleSP_navi before-cart">カート</a>
  168.         </li>
  169.         <li>
  170.             <a href="{{ url('mypage_favorite') }}" class="ec-footerRoleSP_navi before-favorite">お気に入り</a>
  171.         </li>
  172.         <li>
  173.             <a href="{{ url('mypage') }}" class="ec-footerRoleSP_navi before-history">注文履歴</a>
  174.         </li>
  175.         <li>
  176.             <a href="{{ url('mypage') }}" class="ec-footerRoleSP_navi before-user">マイページ</a>
  177.         </li>
  178.     </ul>
  179. </div>
  180. <div id="searchMenu" class="search-menu" style="display: none;">
  181.   <div class="search-menu__header">
  182.     <button id="closeSearchMenu" class="close-btn">✕<br><span>CLOSE</span></button>
  183.   </div>
  185.   <div class="search-menu__body">
  186.     <p class="search-menu__title">検索メニュー</p>
  188.     <form method="get" class="searchform" action="{{ path('product_list') }}">
  189.       <input type="text" name="keyword" class="input-text" placeholder="フリーワード" />
  191.       <div class="form-group">
  192.         <label class="label-box">入荷日</label>
  193.         <input type="date" name="date" value="" class="select-box">
  194.       </div>
  196.       <div class="form-group">
  197.         <label class="label-box">メーカー</label>
  198.         <select name="maker_id" class="select-box" id="makerSelect">
  199.           <option value="">すべてのメーカー</option>
  200.           {# オプションはサーバ側でGET受信して処理 #}
  201.         </select>
  202.       </div>
  204.       <div class="search-menu__buttons">
  205.         <button type="reset" class="btn-reset">リセット</button>
  206.         <button type="submit" class="btn-search">検索</button>
  207.       </div>
  208.     </form>
  209.   </div>
  210. </div>