app/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 = repository('Eccube\\Entity\\Category').getList() %}
  12. {% set totalQuantity = get_carts_total_quantity() %}
  14. {% macro tree(Category) %}
  15.     {% from _self import tree %}
  16.     <a href="{{ url('product_list') }}?category_id={{ Category.id }}" class="link-block">{{ Category.name }}</a>
  17.     {% if Category.children|length > 0 %}
  18.         <ul class="mega-category-child">
  19.             {% for ChildCategory in Category.children %}
  20.                 <li class="parent-list">
  21.                     {{ tree(ChildCategory) }}
  22.                 </li>
  23.             {% endfor %}
  24.         </ul>
  25.     {% endif %}
  26. {% endmacro %}
  28. {# @see https://github.com/bolt/bolt/pull/2388 #}
  29. {% from _self import tree %}
  31. <div class="inner">
  32.     <div class="header__logo logo-wrap">
  33.         <a href="{{ url('homepage') }}" class="link-block">
  34.             <svg class="logo">
  35.                 <use xlink:href="{{ asset('assets/img/common/sprite.svg#logo-nipponnomado') }}"></use>
  36.             </svg>
  37.         </a>
  38.     </div>
  39.     <div class="header__menu">
  40.         <nav>
  41.             <ul class="header-main-menu">
  42.                 <li class="menu-parent history">
  43.                     <a href="{{ url('history') }}" class="link-block">しる</a>
  44.                 </li>
  45.                 <li>
  46.                     <a href="{{ url('work') }}" class="link-block">みる</a>
  47.                 </li>
  48.                 <li class="menu-parent select">
  49.                     <a href="{{ url('product_list') }}" class="link-block">えらぶ</a>
  50.                 </li>
  51.             </ul>
  52.         </nav>
  53.     </div>
  54.     {{ render(path('block_search_product')) }}
  55.     <div class="header__icons">
  56.         <ul class="header-ec-menu">
  57.             <li class="header-ec-menu__list --search">
  58.                 <a href="{{ url('help') }}" class="ec-menu-item link-block">
  59.                     <div class="ec-menu-item__icon-wrap">
  60.                         <svg class="search-box__icon">
  61.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-search') }}"></use>
  62.                         </svg>
  63.                     </div>
  64.                 </a>
  65.             </li>
  66.             <li class="header-ec-menu__list ec-menu-parent --help">
  67.                 <a href="{{ url('help') }}" class="ec-menu-item link-block">
  68.                     <div class="ec-menu-item__icon-wrap">
  69.                         <svg class="icon">
  70.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-help') }}"></use>
  71.                         </svg>
  72.                     </div>
  73.                     <p class="ec-menu-item__text">ヘルプ</p>
  74.                 </a>
  75.                 <div class="children-menu-wrap">
  76.                     <ul class="ec-menu-children">
  77.                         <li>
  78.                             <a href="{{ url('contact') }}">
  79.                                 <p>お問い合わせ</p>
  80.                                 <svg class="icon">
  81.                                     <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  82.                                 </svg>
  83.                             </a>
  84.                         </li>
  85.                         <li>
  86.                             <a href="{{ url('help') }}">
  87.                                 <p>よくあるご質問</p>
  88.                                 <svg class="icon">
  89.                                     <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  90.                                 </svg>
  91.                             </a>
  92.                         </li>
  93.                     </ul>
  94.                 </div>
  95.             </li>
  96.             <li class="header-ec-menu__list ec-menu-parent --mypage">
  97.                 <a href="{{ url('mypage') }}" class="ec-menu-item link-block">
  98.                     <div class="ec-menu-item__icon-wrap">
  99.                         <svg class="icon">
  100.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-mypage') }}"></use>
  101.                         </svg>
  102.                     </div>
  103.                     <p class="ec-menu-item__text">マイページ</p>
  104.                     <div class="children-menu-wrap">
  105.                         <ul class="ec-menu-children">
  106.                             <li>
  107.                                 <a href="{{ url('mypage_favorite') }}">
  108.                                     <p>お気に入り商品</p>
  109.                                     <svg class="icon">
  110.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  111.                                     </svg>
  112.                                 </a>
  113.                             </li>
  114.                             <li>
  115.                                 <a href="{{ url('mypage_reserve') }}">
  116.                                     <p>お取り置き商品</p>
  117.                                     <svg class="icon">
  118.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  119.                                     </svg>
  120.                                 </a>
  121.                             </li>
  122.                             <li>
  123.                                 <a href="{{ url('mypage_history') }}">
  124.                                     <p>注文履歴</p>
  125.                                     <svg class="icon">
  126.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  127.                                     </svg>
  128.                                 </a>
  129.                             </li>
  130.                             <li>
  131.                                 <a href="{{ url('mypage_change') }}">
  132.                                     <p>会員情報の変更</p>
  133.                                     <svg class="icon">
  134.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  135.                                     </svg>
  136.                                 </a>
  137.                             </li>
  138.                             {# <li>
  139.                                 <a href="{{ url('forgot') }}">
  140.                                     <p>パスワードの再設定</p>
  141.                                     <svg class="icon">
  142.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  143.                                     </svg>
  144.                                 </a>
  145.                             </li> #}
  146.                             {% if is_granted('ROLE_USER') %}
  147.                                 <li>
  148.                                     <a href="{{ url('logout') }}">
  149.                                         <p>ログアウト</p>
  150.                                         <svg class="icon">
  151.                                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  152.                                         </svg>
  153.                                     </a>
  154.                                 </li>
  155.                             {% else %}
  156.                                 <li>
  157.                                     <a href="{{ url('mypage_login') }}">
  158.                                         <p>ログイン</p>
  159.                                         <svg class="icon">
  160.                                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  161.                                         </svg>
  162.                                     </a>
  163.                                 </li>
  164.                             {% endif %}
  165.                         </ul>
  166.                     </div>
  167.                 </a>
  168.             </li>
  169.             <li class="header-ec-menu__list --cart">
  170.                 <a href="{{ url('cart') }}" class="ec-menu-item link-block">
  171.                     <div class="ec-menu-item__icon-wrap cart-badge">
  172.                         <svg class="icon">
  173.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-cart') }}"></use>
  174.                         </svg>
  175.                         {% set totalQuantity = get_carts_total_quantity() %}
  176.                         <span id="cart-count-num" class="num">{{ totalQuantity|number_format }}</span>
  177.                     </div>
  178.                     <p class="ec-menu-item__text">カート</p>
  179.                 </a>
  180.             </li>
  181.             <li class="header-ec-menu__list">
  182.                 <div class="ec-menu-item hamburger-wrap">
  183.                     <div class="ec-menu-item__icon-wrap hamburger">
  184.                         <span></span>
  185.                         <span></span>
  186.                         <span></span>
  187.                     </div>
  188.                     <p class="hamburger-wrap__text">すべて表示</p>
  189.                 </div>
  190.             </li>
  191.         </ul>
  192.     </div>
  193. </div>
  194. <div class="mega-menu">
  195.     <ul class="inner">
  196.         <li class="mega-menu-item history">
  197.             <div class="mega-menu-item__head">
  198.                 <p class="lead en-font">History</p>
  199.                 <p class="text">東京組が選ぶ建材のこだわり</p>
  200.             </div>
  201.             <div class="mega-menu-item__link">
  202.                 <div class="col">
  203.                     <p class="head">商品セレクトの背景</p>
  204.                     <a href="{{ url('work') }}">History</a>
  205.                 </div>
  206.                 <div class="col">
  207.                     <p class="head">ショールーム</p>
  208.                     <a href="https://tokyogumi.co.jp/showroom/" target="_blank" class="blank-link">
  209.                         <p>東京ショールーム</p>
  210.                         <svg class="icon">
  211.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  212.                         </svg>
  213.                     </a>
  214.                     <a href="https://madoba.jp/wp/showroom.html" target="_blank" class="blank-link">
  215.                         <p>青森ショールーム</p>
  216.                         <svg class="icon">
  217.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  218.                         </svg>
  219.                     </a>
  220.                 </div>
  221.                 <div class="col">
  222.                     <p class="head">コーポレートサイト</p>
  223.                     <a href="https://madoba.jp/" target="_blank" class="blank-link">
  224.                         <p>株式会社 日本の窓</p>
  225.                         <svg class="icon">
  226.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  227.                         </svg>
  228.                     </a>
  229.                     <a href="https://tokyogumi.co.jp/" target="_blank" class="blank-link">
  230.                         <p>株式会社 東京組</p>
  231.                         <svg class="icon">
  232.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  233.                         </svg>
  234.                     </a>
  235.                 </div>
  236.                 <div class="col">
  237.                     <p class="head">イベント・ニュース情報</p>
  238.                     <a href="https://madoba.jp/news/" target="_blank" class="blank-link">
  239.                         <p>日本の窓 NEWSページ</p>
  240.                         <svg class="icon">
  241.                             <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  242.                         </svg>
  243.                     </a>
  244.                 </div>
  245.             </div>
  246.         </li>
  247.         <li class="mega-menu-item select">
  248.             <div class="mega-menu-item__head">
  249.                 <p class="lead en-font">Select</p>
  250.                 <p class="text">商品を購入する</p>
  251.             </div>
  252.             <ul class="mega-menu-item__category">
  253.                 {% for Category in Categories %}
  254.                     {# <li class="mega-category-parent">
  255.                         <a href="#tmp" class="link-block">カテゴリ名カテゴリ名1</a>
  256.                         <ul class="mega-category-child">
  257.                             <li>
  258.                                 <a href="#tmp" class="link-block">
  259.                                     <p>建材カテゴリ名</p>
  260.                                     <svg class="icon">
  261.                                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-arrow02') }}"></use>
  262.                                     </svg>
  263.                                 </a>
  264.                             </li>
  265.                         </ul>
  266.                     </li> #}
  267.                     <li>
  268.                         {{ tree(Category) }}
  269.                     </li>
  270.                 {% endfor %}
  271.             </ul>
  272.         </li>
  273.     </ul>
  274. </div>
  275. <div class="mega-menu all-menu">
  276.     <div class="mega-menu-item__head">
  277.         <p class="lead en-font">Show menu</p>
  278.         <p class="text">すべての項目</p>
  279.     </div>
  280.     <div class="all-menu-wrap">
  281.         <ul>
  282.             <li class="parent-menu">
  283.                 <div class="all-menu-wrap__head">
  284.                     <p>しる</p>
  285.                     <span class="plus-toggle"></span>
  286.                 </div>
  287.                 <ul class="all-menu-wrap__content">
  288.                     <li class="all-menu-link">
  289.                         <a href="{{ url('history') }}">
  290.                             <p>History</p>
  291.                         </a>
  292.                     </li>
  293.                     <li class="all-menu-link">
  294.                         <a href="https://madoba.jp/" target="_blank" class="blank-link">
  295.                             <p>株式会社 日本の窓</p>
  296.                             <svg class="icon">
  297.                                 <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  298.                             </svg>
  299.                         </a>
  300.                     </li>
  301.                     <li class="all-menu-link">
  302.                         <a href="https://tokyogumi.co.jp/" target="_blank" class="blank-link">
  303.                             <p>株式会社 東京組</p>
  304.                             <svg class="icon">
  305.                                 <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  306.                             </svg>
  307.                         </a>
  308.                     </li>
  309.                     <li class="all-menu-link">
  310.                         <a href="https://madoba.jp/wp/showroom.html" target="_blank" class="blank-link">
  311.                             <p>青森ショールーム</p>
  312.                             <svg class="icon">
  313.                                 <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  314.                             </svg>
  315.                         </a>
  316.                     </li>
  317.                     <li class="all-menu-link">
  318.                         <a href="https://tokyogumi.co.jp/showroom/" target="_blank" class="blank-link">
  319.                             <p>東京ショールーム</p>
  320.                             <svg class="icon">
  321.                                 <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-link01') }}"></use>
  322.                             </svg>
  323.                         </a>
  324.                     </li>
  325.                 </ul>
  326.             </li>
  327.             <li class="parent-menu">
  328.                 <div class="all-menu-wrap__head">
  329.                     <p>みる</p>
  330.                     <span class="plus-toggle"></span>
  331.                 </div>
  332.                 <ul class="all-menu-wrap__content">
  333.                     <li class="all-menu-link">
  334.                         <a href="{{ url('work') }}">
  335.                             <p>施工事例集</p>
  336.                         </a>
  337.                     </li>
  338.                 </ul>
  339.             </li>
  340.             <li class="parent-menu">
  341.                 <div class="all-menu-wrap__head">
  342.                     <p>えらぶ</p>
  343.                     <span class="plus-toggle"></span>
  344.                 </div>
  345.                 <ul class="all-menu-wrap__content">
  346.                     <li class="all-menu-link">
  347.                         <a href="{{ url('product_category') }}">
  348.                             <p>カテゴリ一覧</p>
  349.                         </a>
  350.                     </li>
  351.                     {% for Category in Categories %}
  352.                         <li class="all-menu-link">
  353.                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">
  354.                                 <p>{{ Category.name }}</p>
  355.                             </a>
  356.                         </li>
  357.                     {% endfor %}
  358.                 </ul>
  359.             </li>
  360.             <li class="parent-menu">
  361.                 <div class="all-menu-wrap__head">
  362.                     <p>ヘルプ</p>
  363.                     <span class="plus-toggle"></span>
  364.                 </div>
  365.                 <ul class="all-menu-wrap__content">
  366.                     <li class="all-menu-link">
  367.                         <a href="{{ url('contact') }}">
  368.                             <p>お問い合わせ</p>
  369.                         </a>
  370.                     </li>
  371.                     <li class="all-menu-link">
  372.                         <a href="{{ url('help') }}">
  373.                             <p>よくあるご質問</p>
  374.                         </a>
  375.                     </li>
  376.                 </ul>
  377.             </li>
  378.             <li class="parent-menu">
  379.                 <div class="all-menu-wrap__head">
  380.                     <p>マイページ</p>
  381.                     <span class="plus-toggle"></span>
  382.                 </div>
  383.                 <ul class="all-menu-wrap__content">
  384.                     <li class="all-menu-link">
  385.                         <a href="{{ url('mypage') }}">
  386.                             <p>マイページ</p>
  387.                         </a>
  388.                     </li>
  389.                     <li class="all-menu-link">
  390.                         <a href="{{ url('mypage_history') }}">
  391.                             <p>注文履歴</p>
  392.                         </a>
  393.                     </li>
  394.                     <li class="all-menu-link">
  395.                         <a href="{{ url('mypage_favorite') }}">
  396.                             <p>お気に入り商品一覧</p>
  397.                         </a>
  398.                     </li>
  399.                     <li class="all-menu-link">
  400.                         <a href="{{ url('mypage_change') }}">
  401.                             <p>アカウント詳細</p>
  402.                         </a>
  403.                     </li>
  404.                     <li class="all-menu-link">
  405.                         <a href="{{ url('mypage_delivery') }}">
  406.                             <p>登録したお届け先</p>
  407.                         </a>
  408.                     </li>
  409.                     {# <li class="all-menu-link">
  410.                         <a href="{{ url('forgot') }}">
  411.                             <p>パスワードの変更</p>
  412.                         </a>
  413.                     </li> #}
  414.                 </ul>
  415.             </li>
  416.         </ul>
  417.     </div>
  418.     <div class="all-menu-sns">
  419.         <ul class="footer-sns-link">
  420.             <li>
  421.                 <a href="https://www.facebook.com/nippon.no.mado/" class="link-block">
  422.                     <svg class="icon">
  423.                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-facebook') }}"></use>
  424.                     </svg>
  425.                 </a>
  426.             </li>
  427.             <li>
  428.                 <a href="https://www.instagram.com/nippon_no_mado/" class="link-block">
  429.                     <svg class="icon">
  430.                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-instagram') }}"></use>
  431.                     </svg>
  432.                 </a>
  433.             </li>
  434.             <li>
  435.                 <a href="https://twitter.com/i/flow/login?redirect_after_login=%2FTOKYOGUMI" class="link-block">
  436.                     <svg class="icon">
  437.                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-twitter') }}"></use>
  438.                     </svg>
  439.                 </a>
  440.             </li>
  441.             <li>
  442.                 <a href="https://www.pinterest.jp/tokyogumi/" class="link-block">
  443.                     <svg class="icon">
  444.                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-pinterest') }}"></use>
  445.                     </svg>
  446.                 </a>
  447.             </li>
  448.             <li>
  449.                 <a href="https://www.youtube.com/@nippon_no_mado/featured" class="link-block">
  450.                     <svg class="icon" preserveaspectratio="none">
  451.                         <use xlink:href="{{ asset('assets/img/common/sprite.svg#icon-youtube') }}"></use>
  452.                     </svg>
  453.                 </a>
  454.             </li>
  455.         </ul>
  456.     </div>
  457.     <div class="all-menu-policy">
  458.         <ul>
  459.             <li><a href="{{ url('help_agreement') }}" class="link-block">利用規約</a></li>
  460.             {# <li><a href="{{ url('help_transaction') }}" class="link-block">取引規約</a></li> #}
  461.             <li><a href="{{ url('help_tradelaw') }}" class="link-block">特定商取引に基づく表記</a></li>
  462.             <li><a href="{{ url('help_guide') }}" class="link-block">ご利用ガイド</a></li>
  463.             <li><a href="{{ url('help_privacy') }}" class="link-block">プライバシーポリシー</a></li>
  464.         </ul>
  465.     </div>
  466. </div>
  468. {# <div class="ec-headerNaviRole">
  469.     <div class="ec-headerNaviRole__left">
  470.         <div class="ec-headerNaviRole__search">
  471.             {{ render(path('block_search_product')) }}
  472.         </div>
  473.         <div class="ec-headerRole__navSP">
  474.             {{ include('Block/nav_sp.twig') }}
  475.         </div>
  476.     </div>
  477.     <div class="ec-headerNaviRole__right">
  478.         <div class="ec-headerNaviRole__nav">
  479.             {{ include('Block/login.twig') }}
  480.         </div>
  481.         <div class="ec-headerRole__cart">
  482.             {{ include('Block/cart.twig') }}
  483.         </div>
  484.     </div>
  485.     <!--  TODO:予約ボタンの位置変更 -->
  486. </div> #}