src/Eccube/Resource/template/default/Block/header.twig line 107

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 javascript %}
  12.     {# ハンバーガーメニュー開閉の処理 #}
  13.     <script>
  14.         $(document).ready(function () {
  15. $(".navigation").hide();
  16. $(function () {
  17. $('.js-hamburger-menu').on('click', function () {
  18. $('.navigation').slideToggle(500)
  19. $('.navigation').toggleClass('active')
  20. $('.hamburger-menu-top').toggleClass('top-0 top-3 lg:top-4 rotate-45 rotate-0')
  21. $('.hamburger-menu-middle').toggleClass('hidden')
  22. $('.hamburger-menu-bottom').toggleClass('-rotate-45 rotate-0 lg:top-4')
  23. $('.hamburger-menu-text').toggleClass('opacity-0 opacity-100')
  24. });
  25. });
  26. });
  27.     </script>
  29. {% endblock javascript %}
  30. {% set totalQuantity = get_carts_total_quantity() %}
  31. {% set categories = [
  32.     {
  33.         'name': 'お仏壇',
  34.         'id':'1',
  35.     },
  36.     {
  37.         'name': 'お位牌',
  38.          'id':'2',
  39.     },
  40.     {
  41.         'name': '仏具',
  42.          'id':'3',
  43.     },
  44.     {
  45.         'name': 'セット',
  46.          'id':'4',
  47.     },
  48.     {
  49.         'name': '手元供養',
  50.          'id':'21',
  51.     },
  52. ] %}
  54. {% block main %}
  55.     <div class="bg-white h-[82px] bg-opacity-95 fixed z-20 w-full px-6 lg:px-2 lg:h-[56px] py-4">
  56.         <a href="{{url('homepage')}}" class="hover w-[298px] lg:w-[180px] absolute -translate-x-1/2 left-1/2 mx-auto my-[6px] lg:my-1">
  57.             <img src="{{ asset('assets/img/header/site-logo.png') }}" alt="site_logo on Header" class="">
  58.         </a>
  59.         <div class="flex items-center justify-between">
  60.             <a href="tel:0355795671" class="lg:hidden hover flex gap-3 items-center">
  61.                 <i class="fas fa-phone fa-flip-horizontal fa-lg" style="color: #585858;"></i>
  62.                 <p class="text-[#0F0F0F] font-extralight text-sm tracking-[4.4px]">03-5579-5671</p>
  63.             </a>
  64.             {# SP時のハンバーガー #}
  65.             <div class="lg:flex hidden cursor-pointer w-7 items-center justify-center">
  66.                 <button class="relative js-hamburger-menu h-7 w-7">
  67.                     <span class="hamburger-menu-top h-[0.8px] absolute top-0 right-0 bg-black w-7 inline-block rotate-0 duration-300"></span>
  68.                     <span class="hamburger-menu-middle h-[0.8px] absolute top-[9px] right-0 bg-black w-7 inline-block duration-300"></span>
  69.                     <span class="hamburger-menu-bottom h-[0.8px] absolute top-[18px] right-0 bg-black w-7 inline-block rotate-0 duration-300"></span>
  70.                 </button>
  71.             </div>
  72.             <div class="flex items-center gap-10 lg:gap-3">
  73.                 <a href="{% if is_granted('ROLE_USER') %} /mypage {% else %} /mypage/login {% endif %}" class="hover h-fit flex">
  74.                     {% if is_granted('ROLE_USER') %}
  75.                         <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" class="w-6"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#585858" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
  76.                     {% else %}
  77.                         <div class="flex gap-2 border-[#EFEFEF] border rounded py-3 lg:py-2 px-7 items-center lg:hidden">
  78.                             <img src="{{ asset('assets/img/header/heroicons-solid/user.svg') }}" alt="register_login_btn on Header" class="w-6 h-auto">
  79.                             <p class="font-light font-notosans text-xs">会員登録・ログイン</p>
  80.                         </div>
  81.                         <img src="{{ asset('assets/img/header/heroicons-solid/user.svg') }}" alt="register_login_btn on Header" class="lg:block hidden w-6 h-6">
  82.                     {% endif %}
  83.                 </a>
  84.                 <div class="flex items-center gap-8">
  85.                     <a href="{{url('cart')}}" class="relative cursor-pointer">
  86.                         <img src="{{ asset('assets/img/header/cart.png') }}" alt="cart on Header">
  87.                         <span class="absolute -right-1 -bottom-3 bg-white rounded-[50%] w-5 h-5 text-center text-xs leading-5 shadow-md">
  88.                             {{ totalQuantity|number_format }}
  89.                         </span>
  90.                     </a>
  91.                     <div class="lg:hidden cursor-pointer pt-2">
  92.                         <button class="relative js-hamburger-menu h-4 w-full">
  93.                             <span class="hamburger-menu-top h-px absolute top-0 right-0 bg-black w-9 inline-block rotate-0 duration-300"></span>
  94.                             <span class="hamburger-menu-middle h-px absolute top-1.5 right-0 bg-black w-9 inline-block duration-300"></span>
  95.                             <span class="hamburger-menu-bottom h-px absolute top-3 right-0 bg-black w-9 inline-block rotate-0 duration-300"></span>
  96.                         </button>
  97.                         <p class="hamburger-menu-text text-[11px] font-bold duration-300 opacity-100">MENU</p>
  98.                     </div>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.     </div>
  103.     <nav class="navigation fixed hidden top-[82px] left-0 z-20 bg-white h-[calc(100%-81px)] w-full bg-opacity-95 py-20 overflow-y-scroll lg:h-[calc(100%-44px)] lg:top-[56px] lg:py-6">
  104.         {{ include('hamburger.twig') }}
  105.     </nav>
  106.     <div class="opacity-0 h-[164px] lg:h-[52px]">ヘッダーの高さ分の要素</div>
  107.     {{ include('sticky-nav.twig') }}
  108. {% endblock %}