app/template/default/Block/header1.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. #}
  13. {% block stylesheet %}
  14.     {#<link rel="stylesheet" href="{{ asset('assets/css/main_module.css', 'user_data') }}">#}
  15.     {#<link rel="stylesheet" href="{{ asset('assets/css/header_style.css', 'user_data') }}">#}
  16.     <link rel="stylesheet" href="{{ asset('assets/css/page/header_stock_photo.css', 'user_data') }}">
  17. {% endblock %}
  19. {% block javascript %}
  20.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  21.     <script src="{{ asset('assets/js/header.js', 'user_data') }}"></script>
  22.     
  23.     <script>
  24.         document.addEventListener('DOMContentLoaded', function() {
  25.             if (window.innerWidth <= 768) {  // スマホサイズ判定
  26.                 const navLinks = document.querySelectorAll('.ec-categoryNaviRole .ec-itemNav__nav > li > a');
  27.         
  28.                 navLinks.forEach(function(link) {
  29.                     link.addEventListener('click', function(e) {
  30.                         // もし親liに「開くためのイベント」が登録されてるなら、それだけ止める
  31.                         e.stopPropagation(); // 親要素への伝播を止める（クリックイベントが親に届かない）
  32.                         // e.preventDefault() は書かない → これを書かないから「リンク移動はする」！！
  33.                     });
  34.                 });
  35.             }
  36.         });
  37.     </script>
  38.     
  39. {% endblock  %}
  42. <div class="fixed-header">
  43.     <section>
  44.     <div id="site_header">
  45.         <div class="header_logo">
  46.             <a href="{{url('books')}}">
  47.                 <img src="{{ asset('assets/img/common/photopub_title.svg', 'user_data') }}">
  48.             </a>
  49.         </div>
  50.         <div class="header_menus">
  51.             <div class="header_inner1">
  52.                 {#{{ render(path('block_search_product')) }}#}
  53.                 <div class="ec-headerSearch">
  54.                     <form method="get" class="search-form pc" action="{{ path('product_list') }}">
  55.                         <input type="search" name="name" maxlength="50" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  56.                         <button type="submit" class="search-form-submit" aria-label="検索"></button>
  57.                     </form>
  58.                 </div>
  59.                 <div class="header_link1 pc">
  60.                     <ul class="link1">
  61.                         <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  62.                         <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  63.                         <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  64.                         <li><a href="{{ url('opinion') }}">意見箱</a></li>
  65.                     </ul>
  66.                 </div>
  67.                 <div class="header_link2">
  68.                     {{ include('Block/login.twig', {parent_template: 'header1.twig'}) }}
  69.                 </div>
  71.                 <div class="hamburger-menu sp">
  72.                     <button id="hamburger" class="hamburger">
  73.                         <span></span>
  74.                         <span></span>
  75.                         <span></span>
  76.                     </button>
  78.                     <nav id="menus" class="menus">
  79.                         <ul class="hamburger-tabs">
  80.                             <li class="menu-item">
  81.                                 <a href="{{ url('homepage') }}">TOP</a>
  82.                             </li>
  83.                             <li class="menu-item">
  84.                                 <a href="{{ url('homepage') }}">フォトパブ堂書店</a>
  85.                                 <ul class="submenu">
  86.                                     {% set AllCategories = repository('Eccube\\Entity\\Category').getList() %}
  87.                                     {% set Categories = AllCategories|filter(c => c.id is not null and c.id == 1) %}
  88.                                     {% for Category in Categories %}
  89.                                         {% for Child in Category.Children %}
  90.                                             <li>
  91.                                                 <span><a href="{{ url('product_list') }}?category_id={{ Child.id }}">{{ Child }}</a></span>
  92.                                             </li>
  93.                                         {% endfor %}
  94.                                     {% endfor %}
  95.                                 </ul>
  96.                             </li>
  97.                             <li class="menu-item">
  98.                                 <a href="{{ url('homepage') }}">フォトパブ写真館</a>
  99.                                 <ul class="submenu">
  100.                                     <li><span></span><a href="{{ url('homepage') }}photos">  フォトパブ写真館TOP</a></li>
  101.                                     {% set AllCategories = repository('Eccube\\Entity\\Category').getList() %}
  102.                                     {% set Categories = AllCategories|filter(c => c.id is not null and c.id == 6) %}
  103.                                     {% for Category in Categories %}
  104.                                         {% for Child in Category.Children %}
  105.                                             <li>
  106.                                                 <span><a href="{{ url('photo-product_list') }}?category_id={{ Child.id }}">{{ Child }}</a></span>
  107.                                             </li>
  108.                                         {% endfor %}
  109.                                     {% endfor %}
  110.                                 </ul>
  111.                             </li>
  112.                             <li class="menu-item">
  113.                                 <a href="https://jihi.photo-pub.co.jp/">自費出版サービス</a>
  114.                                 <ul class="submenu">
  115.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/">自費出版について</a></li>
  116.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/calc.php">自動見積もり</a></li>
  117.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/qanda.php">出版までの流れ</a></li>
  118.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/inquiry/">自費出版に関するご相談</a></li>
  119.                                 </ul>
  120.                             </li>
  121.                             <li class="menu-item">
  122.                                 <a href="https://photo-pub.co.jp/event">イベント情報</a>
  123.                                 <ul class="submenu">
  124.                                     <li><span></span><a href="https://photo-pub.co.jp/event">イベント一覧</a></li>
  125.                                 </ul>
  126.                             </li>
  127.                             <li class="menu-item">
  128.                                 <a href="https://photo-pub.co.jp/recruit">各種募集</a>
  129.                                 <ul class="submenu">
  130.                                     <li><span></span><a href="https://photo-pub.co.jp/recruit">募集一覧</a></li>
  131.                                 </ul>
  132.                             </li>
  133.                         </ul>
  135.                         <ul class="hamburger-links">
  136.                             <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  137.                             <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  138.                             <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  139.                             <li><a href="{{ url('opinion') }}">意見箱</a></li>
  140.                             <li><a href="{{url('help_privacy')}}">プライバシー<br class="br_linkbox">ポリシー</a></li>
  141.                             <li><a href="{{url('help_tradelaw')}}">特定商取引法<br class="br_linkbox">に基づく表記</a></li>
  142.                         </ul>
  144.                         <ul class="hamburger-sns">
  145.                             <li><a><img src="{{ asset('assets/img/common/sns_ic_insta.png', 'user_data') }}" alt="insta"></a></li>
  146.                             <li><a href="https://www.youtube.com/@%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96"><img src="{{ asset('assets/img/common/sns_ic_youtube.svg', 'user_data') }}" alt="youtube"></a></li>
  147.                             <li><a href="https://twitter.com/share?url=https://photo-pub.co.jp/&via=photopub402&hashtags=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0&text=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0"><img src="{{ asset('assets/img/common/sns_ic_x.svg', 'user_data') }}" alt="x"></a></li>
  148.                             <li><a href="http://www.facebook.com/share.php?u=https://photo-pub.co.jp/"><img src="{{ asset('assets/img/common/sns_ic_fb.svg', 'user_data') }}" alt="fb"></a></li>
  149.                         </ul>
  150.                     </nav>
  152.                 </div>
  153.             </div>
  154.             <div class="header_inner2 pc">
  155.                 <ul class="select_btns">
  156.                     <li class="btn"><a href="{{ url('homepage') }}">TOP</a></li>
  157.                     <li class="btn"><a href="{{ url('homepage') }}books">フォトパブ堂書店</a></li>
  158.                     <li class="btn"><a href="{{ url('homepage') }}photos">フォトパブ写真館</a></li>
  159.                     <li class="btn"><a href="http://jihi.photo-pub.co.jp/">自費出版サービス</a></li>
  160.                     <li class="btn"><a href="https://photo-pub.co.jp/event">イベント情報</a></li>
  161.                     <li class="btn"><a href="https://photo-pub.co.jp/recruit">各種募集</a></li>
  162.                 </ul>
  163.             </div>
  164.         </div>
  165.     </div>
  166.     <div class="tabs">
  167.         <ul class="tabs_inner">
  168.             {% set AllCategories = repository('Eccube\\Entity\\Category').getList() %}
  169.             {% set Categories = AllCategories|filter(c => c.id is not null and c.id == 1) %}
  170.     
  171.             {% macro tree(Category, depth) %}
  172.                 {% from _self import tree %}
  173.     
  174.                 {% if depth == 1 %}
  175.                     <li>
  176.                         <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  177.                             {{ Category.name }}
  178.                         </a>
  179.                         {% if Category.children|length > 0 %}
  180.                             <ul>
  181.                                 {% for ChildCategory in Category.children %}
  182.                                     {{ tree(ChildCategory, depth + 1) }}
  183.                                 {% endfor %}
  184.                             </ul>
  185.                         {% endif %}
  186.                     </li>
  187.                 {% elseif depth == 2 %}
  188.                     <li>
  189.                         <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  190.                             {{ Category.name }}
  191.                         </a>
  192.                     </li>
  193.                 {% endif %}
  194.             {% endmacro %}
  195.     
  196.             {% from _self import tree %}
  197.     
  198.             <div class="ec-categoryNaviRole">
  199.                 <div class="ec-itemNav">
  200.                     <ul class="ec-itemNav__nav">
  201.                         {% for FirstCategory in Categories %}
  202.                             {% for SecondCategory in FirstCategory.children %}
  203.                                 {{ tree(SecondCategory, 1) }}
  204.                             {% endfor %}
  205.                         {% endfor %}
  206.                     </ul>
  207.                 </div>
  208.             </div>
  209.         </ul>
  210.     </div>
  211.     <div class="sp-search-form">
  212.         <form action="{{ path('product_list') }}" class="search-form sp">
  213.             <input type="search" name="name" maxlength="50" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  214.             <button type="submit" class="search-form-submit" aria-label="検索"></button>
  215.         </form>
  216.     </div>
  217. </section>
  218. </div>
  220. <style>
  221.     .fixed-header {
  222.     position: fixed;
  223.     top: 0;
  224.     left: 0;
  225.     width: 100%;
  226.     z-index: 9999;
  227.     background-color: #fff; /* 背景が透けないように */
  228.     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 任意：影で浮かせる */
  229.     }
  230.     
  231.     body {
  232.         padding-top: 150px; /* ヘッダーの高さに合わせて調整（例：80px） */
  233.     }
  234. @media screen and (max-width: 820px) {
  235.     body {
  236.         padding-top: 180px; /* ヘッダーの高さに合わせて調整（例：80px） */
  237.     }
  238. }
  240. </style>