app/template/default/Block/header_stock_photo.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/stock-photo/main_module.css', 'user_data') }}">
  15.     <link rel="stylesheet" href="{{ asset('assets/css/stock-photo/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('photos')}}">
  47.                 <img src="{{ asset('assets/img/common/stock-photo_title1.svg', 'user_data') }}">
  48.             </a>
  49.         </div>
  50.         <div class="header_menus">
  51.             <div class="header_inner1">
  52.                 <div class="ec-headerSearch">
  53.                     <form method="get" class="search-form pc" action="{{ path('photo-product_list') }}#contents-list">
  54.                         <input type="search" name="name" maxlength="50" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  55.                         <button type="submit" class="search-form-submit" aria-label="検索"></button>
  56.                     </form>
  57.                 </div>
  58.                 <div class="header_link1 pc">
  59.                     <ul class="link1">
  60.                         <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  61.                         <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  62.                         <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  63.                         <li><a href="{{ url('opinion') }}">意見箱</a></li>
  64.                     </ul>
  65.                 </div>
  66.                 <div class="header_link2">
  67.                     {{ include('Block/stockphoto_login.twig') }}
  68.                 </div>
  70.                 <div class="hamburger-menu sp">
  71.                     <button id="hamburger" class="hamburger">
  72.                         <span></span>
  73.                         <span></span>
  74.                         <span></span>
  75.                     </button>
  77.                     <nav id="menus" class="menus">
  78.                         <ul class="hamburger-tabs">
  79.                             <li class="menu-item">
  80.                                 <a href="{{ url('homepage') }}">TOP</a>
  81.                             </li>
  82.                             <li class="menu-item photo-pub">
  83.                                 <a href="{{ url('homepage') }}">フォトパブ堂書店</a>
  84.                                 <ul class="submenu">
  85.                                     <li><span></span><a href="{{ url('homepage') }}books">  フォトパブ堂書店TOP</a></li>
  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 == 6) %}
  170.             <div class="ec-categoryNaviRole">
  171.                 <div class="ec-itemNav">
  172.                     <ul class="ec-itemNav__nav">
  173.                         {% for FirstCategory in Categories %}
  174.                             {% for SecondCategory in FirstCategory.children %}
  175.                                 <li>
  176.                                     <a href="{{ url('photo-product_list') }}?category_id={{ SecondCategory.id }}">
  177.                                         {{ SecondCategory.name }}
  178.                                     </a>
  179.                                 </li>                                
  180.                             {% endfor %}
  181.                         {% endfor %}
  182.                     </ul>
  183.                 </div>
  184.             </div>
  185.         </ul>
  186.     </div>
  187.     <div class="sp-search-form">
  188.         <form action="{{ path('photo-product_list') }}#contents-list" class="search-form sp">
  189.             <input type="search" name="name" maxlength="50" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  190.             <button type="submit" class="search-form-submit" aria-label="検索"></button>
  191.         </form>
  192.     </div>
  193. </section>
  194. </div>
  196. <style>
  197.     .fixed-header {
  198.     position: fixed;
  199.     top: 0;
  200.     left: 0;
  201.     width: 100%;
  202.     z-index: 9999;
  203.     background-color: #fff; /* 背景が透けないように */
  204.     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 任意：影で浮かせる */
  205.     }
  206.     
  207.     body {
  208.         padding-top: 150px; /* ヘッダーの高さに合わせて調整（例：80px） */
  209.     }
  210. @media screen and (max-width: 820px) {
  211.     body {
  212.         padding-top: 180px; /* ヘッダーの高さに合わせて調整（例：80px） */
  213.     }
  214. }
  216. </style>