src/Eccube/Resource/template/default/Block/header.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. {% set categories = [
  12.     {
  13.         'name':'CONCEPT',
  14.         'href':'/help/about',
  15.     },
  16.     {
  17.         'name':'LINE UP',
  18.         'href':'/products/list',
  19.     },
  20.     {
  21.         'name':'海洋散骨',
  22.         'href':'/sea_burial',
  23.     },
  24.     {
  25.         'name':'SPECIAL',
  26.         'href':'/special',
  27.     },
  28.     {
  29.         'name':'ニュース',
  30.         'href':'/news',
  31.     },
  32.     {
  33.         'name':'ご利用ガイド',
  34.         'href':'/guide',
  35.     },
  36.     {
  37.         'name':'お問い合わせ',
  38.         'href':'/contact/other',
  39.     }
  40. ] %}
  42. {% block stylesheet %}{% endblock %}
  44. {% set isSeaBurialUrl = app.request.pathInfo == '/sea_burial' %}
  46. {% block javascript %}
  47.     {# ハンバーガーメニュー開閉の処理 #}
  48.     <script>
  49.         $(document).ready(function () {
  50.             $(".navigation").hide();
  51.             $(function () {
  52.                 $('.js-hamburger-menu').on('click', function () {
  53.                     $('.navigation').slideToggle(500)
  54.                 });
  55.             });
  56.         });
  57.     </script>
  58.     {% if isSeaBurialUrl %}
  59.         <script>
  60.             var headerIcons = [
  61.                 {
  62.                     id: "logo",
  63.                     before: "/html/template/default/assets/img/logo.webp" ,
  64.                     after: "/html/template/default/assets/img/logo-white.png",
  65.                 },
  66.                 {
  67.                     id: "logoSp",
  68.                     before: "/html/template/default/assets/img/logo.webp",
  69.                     after: "/html/template/default/assets/img/logo-white.png",
  70.                 },
  71.                 {
  72.                     id: "favorite",
  73.                     before: "/html/template/default/assets/icon/favorite.svg",
  74.                     after: "/html/template/default/assets/icon/favorite_white.svg",
  75.                 },
  76.                 {
  77.                     id: "person",
  78.                     before: "/html/template/default/assets/icon/person.svg",
  79.                     after: "/html/template/default/assets/icon/person_white.svg",
  80.                 },
  81.                 {
  82.                     id: "cart",
  83.                     before: "/html/template/default/assets/icon/shopping_cart.svg",
  84.                     after: "/html/template/default/assets/icon/shopping_cart_white.svg",
  85.                 },
  86.                 {
  87.                     id: "hamburger",
  88.                     before: "/html/template/default/assets/icon/hamburger.svg",
  89.                     after: "/html/template/default/assets/icon/hamburger_white.svg",
  90.                 }
  91.             ];
  92.             $(document).ready(function () {
  94.                 $(".change_text_color").addClass("text-white");
  95.                 headerIcons.forEach(function(icon){
  96.                     var iconElement = $('#'+ icon.id);
  97.                     iconElement.attr('src',icon.after);
  98.                 });
  100.                 $(window).on("scroll", function () {
  101.                     const sliderHeight = $(".first_view").height();
  102.                     if (sliderHeight + 150 < $(this).scrollTop()) {
  103.                         $(".change_text_color").removeClass("text-white");
  104.                         headerIcons.forEach(function(icon){
  105.                             console.log("test");
  106.                             var iconElement = $('#'+ icon.id);
  107.                             iconElement.attr('src',icon.before);
  108.                         });
  109.                     } else {
  110.                         $(".change_text_color").addClass("text-white");
  111.                         headerIcons.forEach(function(icon){
  112.                             var iconElement = $('#'+ icon.id);
  113.                             iconElement.attr('src',icon.after);
  114.                         });
  115.                     }
  116.                 });
  117.             });
  118.         </script>
  119.     {% endif %}
  120.     {% if app.request.get('_route') != 'homepage' %}
  121.         <script>
  122.             $(document).ready(function(){
  123.                 $('.js-sp-logo').removeClass('opacity-0');
  124.                 $(".js-logo").removeClass('opacity-0');
  125.                 });
  126.         </script>
  127.     {% endif %}
  128. {% endblock javascript %}
  130. {% block main %}
  131.     {{ include('Block/pagetop.twig') }}
  132.     <div class="change_text_color fixed w-full px-8 h-20 lg:h-16 py-4 lg:px-6 items-center flex justify-between whitespace-nowrap z-50 gap-4 top-0">
  133.         <a href="/" class="md:hidden">
  134.             <img src="{{asset('assets/img/logo.webp') }}"
  135.                 id="logo" alt="" class="w-[162px] h-[48px] xl:w-[113px] xl:h-[33px] js-logo opacity-0 duration-700">
  136.         </a>
  137.         <a href="/" class="hidden md:block">
  138.             <img src="{{asset('assets/img/logo.webp') }}" id="logoSp" alt="" class="w-[162px] h-[48px] lg:w-[113px] lg:h-[33px] js-sp-logo">
  139.         </a>
  140.         <ul class="flex gap-10 lessThanXl:gap-7 text-sm leading-7 lg:hidden">
  141.             {% for category in categories %}
  142.                 <li class="hover">
  143.                     <a href={{category.href}}>{{category.name}}</a>
  144.                 </li>
  145.             {% endfor %}
  146.         </ul>
  147.         <div class="flex items-center gap-4  text-[8px] leading-3 font-bold">
  148.             {% if is_granted('ROLE_USER') %}
  149.                 <a href="/mypage/favorite" class="w-8 h-8 flex-col justify-center items-center flex gap-[6px] hover">
  150.                     <img src="{{asset('assets/icon/favorite.svg')}}"
  151.                         id="favorite" alt="ハートのアイコン" class="w-8 h-8">
  152.                     <p class="lg:hidden">お気に入り</p>
  153.                 </a>
  154.             {% endif %}
  155.             <a href="{% if is_granted('ROLE_USER') %} /mypage {% else %} /mypage/login {% endif %}" class="w-8 h-8  flex flex-col justify-center items-center gap-[6px] text-black hover">
  156.                 <img src="{{asset('assets/icon/person.svg')}}"
  157.                     id="person" alt="ログインのアイコン" class="w-8 h-8">
  158.                 {% if is_granted('ROLE_USER') %}
  159.                     <p class="change_text_color lg:hidden">マイページ</p>
  160.                 {% else %}
  161.                     <p class="change_text_color lg:hidden">ログイン</p>
  162.                 {% endif %}
  163.             </a>
  164.             <a href="/cart" class="w-8 h-8 flex flex-col justify-center items-center gap-[6px] hover">
  165.                 <img src="{{asset('assets/icon/shopping_cart.svg')}}"
  166.                     id="cart" alt="カートのアイコン" class="w-8 h-8">
  167.                 <p class="lg:hidden">カート</p>
  168.             </a>
  169.             {# ハンバーガー #}
  170.             <button class="js-hamburger-menu hover">
  171.                 <img src="{{asset('assets/icon/hamburger.svg')}}"
  172.                     id="hamburger" alt="ハンバーガーメニュー" class=" w-8 h-8  hidden lg:block">
  173.             </button>
  174.         </div>
  175.     </div>
  176.     <nav class="navigation hidden fixed top-0 right-0 z-50 w-full overflow-y-scroll h-screen ">
  177.         {{ include('hamburger.twig') }}
  178.     </nav>
  179. {% endblock %}