app/template/default/Block/header_hakama.twig line 1

Open in your IDE?
  1. {% block javascript %}
  2.     <script>
  3.         $(window).on('load', function() {
  4.             $('.burger-icon').click(function() {
  5.                 $('body').css('overflow', 'hidden');
  6.                 $(this).toggleClass('is-show');
  7.                 $('.mobile-header-active').toggleClass('is-show-content');
  8.                 if(!$('.sp-profile .burger-icon').hasClass('is-show')){
  9.                     $('body').css('overflow', '');
  10.                 }
  11.                 if($('.sp-profile .menu-search').hasClass('d-none')){
  12.                     $('.sp-profile .menu-close-search').addClass('d-none');
  13.                     $('.sp-profile .menu-search').removeClass('d-none');
  14.                     $('.sp-profile .input-search__popup').removeClass('isShowPopup');
  15.                 }
  16.             });
  17.             $('.aki-header-menu .menu-search').click(function() {
  18.                 $(this).addClass('d-none');
  19.                 $('.aki-header-menu .menu-close-search').removeClass('d-none');
  20.                 $('.aki-header-menu .input-search__popup').addClass('isShowPopup');
  21.             });
  22.             $('.aki-header-menu .menu-close-search').click(function() {
  23.                 $(this).addClass('d-none');
  24.                 $('.aki-header-menu .menu-search').removeClass('d-none');
  25.                 $('.aki-header-menu .input-search__popup').removeClass('isShowPopup');
  26.             });
  27.             $('.sp-profile .menu-search').click(function() {
  28.                 $(this).addClass('d-none');
  29.                 $('.sp-profile .menu-close-search').removeClass('d-none');
  30.                 $('.sp-profile .input-search__popup').addClass('isShowPopup');
  31.                 $('.burger-icon.is-show').removeClass('is-show');
  32.                 $('body').css('overflow', '');
  33.                 $('.mobile-header-active.is-show-content').removeClass('is-show-content');
  34.             });
  35.             $('.sp-profile .menu-close-search').click(function() {
  36.                 $(this).addClass('d-none');
  37.                 $('.sp-profile .menu-search').removeClass('d-none');
  38.                 $('.sp-profile .input-search__popup').removeClass('isShowPopup');
  39.             });
  40.             var offset = 4;
  41.             var dateToday = new Date();
  42.             var dateMin = new Date(dateToday.getFullYear(), dateToday.getMonth(), dateToday.getDate() + offset);
  43.             $('#AkiuseDateSideFormMobileHakama').datepicker({
  44.                 format: 'yyyy-mm-dd',
  45.                 language: 'ja',
  46.                 autoclose : true,
  47.                 keyboardNavigation : false,
  48.                 showMonthAfterYear: true,
  49.                 monthNames: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
  50.                 todayHighlight : true,
  51.                 startDate: dateMin,
  52.             })
  53.         })
  54.     </script>
  55. {% endblock %}
  56. {% include 'Block/header_banner_event.twig' %}
  57. <div class="aki-container pb10">
  58.     <div class="aki-row pb00 align-items-center">
  59.         <div class="col-6">
  60.             <h1 class="mb10 font-size-12 d-none d-md-block">{% if app.request.get('_route') == "homepae" %}着物レンタル (来店着付け無料・全国配送無料){% else %}{% if subtitle is defined and subtitle is not empty %}{{ subtitle }} | {% elseif title is defined and title is not empty %}{{ title }} | {% endif %}着物レンタル (来店着付け無料・全国配送無料){% endif %}</h1>
  61.             <a class="navbar-brand d-none d-md-block" href="/user_data/hakama"><img loading="lazy" src="{{ image_address }}/hakama/hakama_logo.svg" alt="着物レンタル{% if not isSalon %}あき{% endif %}"></a>
  62.             <a class="d-block d-md-none header-top" href="/user_data/hakama"><img loading="lazy" src="{{ image_address }}/hakama/hakama_logo_sp.svg" alt="着物レンタル{% if not isSalon %}あき{% endif %}" class="logo"></a>
  63.         </div>
  64.         <div class="col-6 text-end">
  65.             <div class="d-none d-md-block">
  66.                 <div class="profile aki-header-menu mb10">
  67.                     <div class="input-search">
  68.                         <span class="menu-search">
  69.                                 <svg width="19" height="19" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  70.                                 <path d="M16.3056 9.02778C16.3056 13.0472 13.0472 16.3056 9.02778 16.3056C5.00837 16.3056 1.75 13.0472 1.75 9.02778C1.75 5.00837 5.00837 1.75 9.02778 1.75C13.0472 1.75 16.3056 5.00837 16.3056 9.02778Z" stroke="#1F8048" stroke-linecap="round" stroke-linejoin="round"></path>
  71.                                 <path d="M18.7497 18.7499L14.5205 14.5208" stroke="#1F8048" stroke-linecap="round" stroke-linejoin="round"></path>
  72.                                 </svg>
  73.                                 検索
  74.                         </span>
  76.                         <span class="menu-close-search d-none">
  77.                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  78.                             <path d="M16.286 2.57144L2.57146 16.286C2.25907 16.5984 2.259 17.1164 2.5713 17.4287C2.8836 17.741 3.40163 17.7409 3.71402 17.4286L17.4286 3.714C17.741 3.40162 17.741 2.88358 17.4287 2.57128C17.1164 2.25898 16.5984 2.25905 16.286 2.57144Z" fill="#1F8048"/>
  79.                             <path d="M3.71301 2.57144L17.4276 16.286C17.74 16.5984 17.74 17.1164 17.4277 17.4287C17.1154 17.741 16.5974 17.7409 16.285 17.4286L2.57045 3.714C2.25806 3.40162 2.25799 2.88358 2.57029 2.57128C2.88259 2.25898 3.40062 2.25905 3.71301 2.57144Z" fill="#1F8048"/>
  80.                             </svg>
  81.                             検索
  82.                         </span>
  84.                         <div class="input-search__popup">
  85.                             <form method="get" action="{{ path('product_list') }}">
  86.                                 <div class="input-search__popup-form">
  87.                                     <input type="text" class="input-search__popup-input" name="name" placeholder="{{'front.product.search_footer_placeholder' | trans}}">
  88.                                     <button class="btn btn-primary" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  89.                                     <mask id="path-1-inside-1_1154_20913" fill="white">
  90.                                     <path d="M9.02778 16.8056C13.3233 16.8056 16.8056 13.3233 16.8056 9.02778C16.8056 4.73223 13.3233 1.25 9.02778 1.25C4.73223 1.25 1.25 4.73223 1.25 9.02778C1.25 13.3233 4.73223 16.8056 9.02778 16.8056Z"></path>
  91.                                     </mask>
  92.                                     <path d="M9.02778 16.8056C13.3233 16.8056 16.8056 13.3233 16.8056 9.02778C16.8056 4.73223 13.3233 1.25 9.02778 1.25C4.73223 1.25 1.25 4.73223 1.25 9.02778C1.25 13.3233 4.73223 16.8056 9.02778 16.8056Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-1-inside-1_1154_20913)"></path>
  93.                                     <path d="M18.7497 18.7499L14.5205 14.5208" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"></path>
  94.                                     </svg></button>
  95.                                 </div>
  96.                             </form>
  97.                         </div>
  98.                     </div>
  99.                     {% if is_granted('ROLE_USER') %}
  100.                         <p><a href="{{ url('logout') }}">
  101.                         <img loading="lazy" src="{{ asset('assets/icon/aki-cart-blue.svg') }}" class="aki-icon-default" alt="icon"/>{{ 'front.block.login.logout'|trans }}</a>
  102.                         </p>
  103.                         <p><a href="{{url('mypage')}}">
  104.                             <i class="aki-icon-pencil color-primary"></i>{{ 'front.block.login.mypage'|trans }}</a>
  105.                         </p>
  106.                     {% else %}
  107.                         <p><a href="{{ url('mypage_login') }}">
  108.                             <i class="aki-icon-user color-primary"></i>{{ 'front.block.login.login'|trans }}</a>
  109.                         </p>
  110.                         {% if not isSalon %}
  111.                             <p><a href="{{ url('entry') }}">
  112.                                 <i class="aki-icon-pencil color-primary"></i>{{ 'front.block.login.customer_registration'|trans }}</a>
  113.                             </p>
  114.                         {% endif %}
  115.                     {% endif %}
  116.                     <p><a href="{{url('cart')}}">
  117.                     <img loading="lazy" src="{{ asset('assets/icon/aki-cart-blue.svg') }}" class="aki-icon-default" alt="icon"/>{{ 'front.block.login.to_cart'|trans }}</a>
  118.                     </p>
  119.                     <ul>
  120.                         <li class="dropdown open list-style-none">
  121.                             <a href="/user_data/language" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
  122.                             <path d="M1 1L5 5L9 1" stroke="#8F90A6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
  123.                             </svg>
  124.                             </a>
  125.                             <ul class="dropdown-menu">
  126.                                 <li><a href="/">日本語</a></li>
  127.                                 <li><a href="/user_data/english" onclick="gtag('event', 'クリック', {'event_category': 'SPメニュー内','event_label': 'SPメニュー_english'});">English</a></li>
  128.                                 <li><a href="/user_data/china" onclick="gtag('event', 'クリック', {'event_category': 'SPメニュー内','event_label': 'SPメニュー_中文'});">簡体中文</a></li>
  129.                             </ul>
  130.                         </li>
  131.                     </ul>
  132.                 </div>
  133.                 <img loading="lazy" src="{{ asset('assets/img/aki/hotline.webp') }}" width="340" class="logo" alt="着物レンタル{% if not isSalon %}あき{% endif %}"/>
  134.             </div>
  135.             <div class="header-top d-block d-md-none">
  136.                 <div class="sp-profile ">
  137.                     <div><a href="/"><img loading="lazy" src="{{ asset('assets/icon/home-2.svg') }}" class="aki-icon-default" alt="icon"/>
  138.                         </a>
  139.                     </div>
  140.                     <div><a href="/cart"><img loading="lazy" src="{{ asset('assets/icon/aki-cart.svg') }}" class="aki-icon-default" alt="icon"/>
  141.                         </a>
  142.                     </div>
  143.                     <div class="input-search">
  144.                         <span class="menu-search"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  145.                         <path d="M16.0556 9.02778C16.0556 12.9091 12.9091 16.0556 9.02778 16.0556C5.14644 16.0556 2 12.9091 2 9.02778C2 5.14644 5.14644 2 9.02778 2C12.9091 2 16.0556 5.14644 16.0556 9.02778Z" stroke="#31352E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  146.                         <path d="M18.7497 18.7499L14.5205 14.5208" stroke="#31352E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  147.                         </svg>
  148.                         </span>
  149.                         <span class="menu-close-search d-none"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  150.                         <path d="M16.286 2.57144L2.57146 16.286C2.25907 16.5984 2.259 17.1164 2.5713 17.4287C2.8836 17.741 3.40163 17.7409 3.71402 17.4286L17.4286 3.714C17.741 3.40162 17.741 2.88358 17.4287 2.57128C17.1164 2.25898 16.5984 2.25905 16.286 2.57144Z" fill="#666666"/>
  151.                         <path d="M3.71301 2.57144L17.4276 16.286C17.74 16.5984 17.74 17.1164 17.4277 17.4287C17.1154 17.741 16.5974 17.7409 16.285 17.4286L2.57045 3.714C2.25806 3.40162 2.25799 2.88358 2.57029 2.57128C2.88259 2.25898 3.40062 2.25905 3.71301 2.57144Z" fill="#666666"/>
  152.                         </svg>
  153.                         </span>
  154.                         <div class="input-search__popup">
  155.                             <form method="get" action="{{ path('product_list') }}">
  156.                                 <div class="input-search__popup-form">
  157.                                     <input type="text" class="input-search__popup-input" name="name" placeholder="{{'front.product.search_footer_placeholder' | trans}}">
  158.                                     <button class="btn btn-primary" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  159.                                     <mask id="path-1-inside-1_1154_20913" fill="white">
  160.                                     <path d="M9.02778 16.8056C13.3233 16.8056 16.8056 13.3233 16.8056 9.02778C16.8056 4.73223 13.3233 1.25 9.02778 1.25C4.73223 1.25 1.25 4.73223 1.25 9.02778C1.25 13.3233 4.73223 16.8056 9.02778 16.8056Z"></path>
  161.                                     </mask>
  162.                                     <path d="M9.02778 16.8056C13.3233 16.8056 16.8056 13.3233 16.8056 9.02778C16.8056 4.73223 13.3233 1.25 9.02778 1.25C4.73223 1.25 1.25 4.73223 1.25 9.02778C1.25 13.3233 4.73223 16.8056 9.02778 16.8056Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-1-inside-1_1154_20913)"></path>
  163.                                     <path d="M18.7497 18.7499L14.5205 14.5208" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round"></path>
  164.                                     </svg></button>
  165.                                 </div>
  166.                             </form>
  167.                         </div>
  169.                     </div>
  170.                     <div class="burger-icon color-primary" onclick="gtag('event', 'クリック', {'event_category': 'SPメニュー','event_label': 'SPメニュー'});">
  171.                         <span class="burger-icon-top"></span>
  172.                         <span class="burger-icon-mid"></span>
  173.                         <span class="burger-icon-bottom"></span>
  174.                     </div>
  175.                 </div>
  176.             </div>
  178.             <div class="mobile-header-active aki-mobile en_header_mobile">
  179.             <section class="aki-search mt20 mb10">
  180.                     <form name="left_search_form" action="/products/list" id="left-search-product-form" class="left_search_form aki-search-banner aki-search-new pa20">
  181.                     <div class="aki-form-group date mb15">
  182.                         <div class="input-group input-group-lg aki-search-input">
  183.                             <span class="input-group-addon"><i class="aki-icon-calenda color-primary"></i></span>
  184.                             <input name="date" type="text" class="productListDate form-control datepicker hasDatepicker " placeholder="ご利用日" readonly="" id="AkiuseDateSideFormMobileHakama" data-id="date-filter">
  185.                         </div>
  186.                     </div>
  187.                     <div class="aki-form-group aki-search-select mb15">
  188.                         <div class="input-group input-group-lg position-relative custom_arrow_select">
  189.                             <span class="input-group-addon"><img loading="lazy" src="/html/template/default/assets/img/aki/kimono.svg" alt="kimono"></span>
  190.                             <select name="category_id" class="form-control " onclick="gtag('event', 'クリック', {'event_category': 'SPメニュー内','event_label': '利用シーンを選択'});">
  191.                                 <option value="">ご利用シーン・着物の種類</option>
  192.                                 {% if not isSalon %}
  193.                                     <optgroup label="花火大会・お祭りなど">
  194.                                         <option value="43">ゆかた（女性用）</option>
  195.                                         <option value="42">ゆかた（男性用）</option>
  196.                                     </optgroup>
  197.                                 {% endif %}
  198.                                 <optgroup label="成人式">
  199.                                     <option value="53">振袖</option>
  200.                                     <option value="39">袴（男性用）</option>
  201.                                 </optgroup>
  202.                                 <optgroup label="卒業式・入学式">
  203.                                     <option value="40">卒業袴</option>
  204.                                     <option value="53">振袖</option>
  205.                                     <option value="50">訪問着</option>
  206.                                     <option value="39">紋付袴（男性用）</option>
  207.                                 </optgroup>
  208.                                 <optgroup label="結婚式">
  209.                                     <option value="34">婚礼衣装</option>
  210.                                     <option value="53">振袖</option>
  211.                                     <option value="52">黒留袖</option>
  212.                                     <option value="51">色留袖</option>
  213.                                     <option value="50">訪問着</option>
  214.                                     <option value="41">男物</option>
  215.                                     <option value="39">袴（男性用）</option>
  216.                                 </optgroup>
  217.                                 <optgroup label="パーティー・お茶会">
  218.                                     <option value="53">振袖</option>
  219.                                     <option value="50">訪問着</option>
  220.                                     <option value="51">色留袖</option>
  221.                                     <option value="49">色無地</option>
  222.                                     <option value="48">小紋</option>
  223.                                     <option value="41">男物</option>
  224.                                 </optgroup>
  225.                                 <optgroup label="観劇・お食事会">
  226.                                     <option value="48">小紋</option>
  227.                                     <option value="50">訪問着</option>
  228.                                     <option value="41">男物</option>
  229.                                 </optgroup><optgroup label="七五三・お宮参り・十三参り">
  230.                                     <option value="38">産着</option>
  231.                                     <option value="37">七五三（三歳祝着）</option>
  232.                                     <option value="36">七五三（五歳祝着）</option>
  233.                                     <option value="35">七五三（七歳祝着）</option>
  234.                                     <option value="158">十三参り</option>
  235.                                     <option value="50">訪問着</option>
  236.                                     <option value="41">男物</option>
  237.                                 </optgroup>
  238.                             </select>
  239.                         </div>
  240.                     </div>
  241.                     <div class="input-group-lg">
  242.                     <button class="aki-btn aki-btn-primary mb15 w-100 form-control" type="submit" onclick="gtag('event', 'クリック', {'event_category': 'SPメニュー内','event_label': '商品を探す'});"><img loading="lazy" src="/html/template/default/assets/icon/search-white.svg" class="aki-icon-default" alt="icon"> 着物を探す</button>
  243.                     </div>
  244.                         {% if APP_ENV != APP_PROD %}
  245.                             <div class="aki-form-group">
  246.                                 <div class="input-group input-group-lg position-relative">
  247.                                     <select class="form-control aki-search-input aki-btn-primary text-center reservation_store_list">
  248.                                         <option value="">お下見来店予約</option>
  249.                                             <option value="shibuya">渋谷本店</option>
  250.                                             <option value="ginza">銀座店</option>
  251.                                             <option value="ikebukuro">池袋店</option>
  252.                                             <option value="yokohama">横浜店</option>
  253.                                     </select>
  254.                                     <span class="icon-select-down"><img loading="lazy" src="/html/template/default/assets/icon/aki-icon-down-white.svg" alt="kimono"></span>
  255.                                 </div>
  256.                             </div>
  257.                         {% endif %}
  258.                                         </form>
  259.                 </section>
  260.                 <a href="/">着物レンタル{% if not isSalon %}あき{% endif %}TOPページ</a>
  261.                 <a href="/user_data/753/recommend">おすすめ七五三着物レンタル</a>
  262.                 <a href="/user_data/753/fullset">七五三着物フルセット</a>
  263.                 <a href="/user_data/753/img_point">七五三写真撮影のポイント</a>
  264.                 <a href="/user_data/753/faq">七五三のよくある質問</a>
  265.                 <a href="/user_data/753/hair_makeup">七五三ヘアーセット メイクについて</a>
  266.                 <a href="/user_data/753/rental_step">七五三着物レンタルの流れ</a>
  267.                 <a href="/user_data/753/voice">七五三レンタルお客様からの声</a>
  268.                 <a href="/user_data/753/basic_knowledge">お子さまからの質問</a>
  269.                 <a href="/user_data/753/spot">近くの参拝スポット</a>
  270.                 <p class="color-primary mt20 mb15">店舗一覧</p>
  271.                 <div class="aki-mobile-link mb30">
  272.                 <section class="aki-mobile-list">
  273.                 <a class="text-center aki-border" href="/user_data/shop/shibuya">渋谷本店</a>
  274.                 <a class="text-center aki-border" href="/user_data/shop/ginza">銀座店</a>
  275.                 <a class="text-center aki-border" href="/user_data/shop/ikebukuro">池袋店</a>
  276.                 <a class="text-center aki-border" href="/user_data/shop/yokohama">横浜店</a>
  277.                 </section>
  278.             </div>
  279.             </div>
  280.         </div>
  281.     </div>
  282. </div>
  283. <div class="en_header aki-header-menu d-none d-md-block">
  284.     <div class="category-top">
  285.         <div class="aki-container">
  286.             <div class="en_header_menu">
  287.                 <p><a href="/">着物レンタル{% if not isSalon %}あき{% endif %}TOPページ</a></p>
  288.                 <p><a href="/user_data/hakama#seven-point">満足するための7つの嬉しいこと</a></p>
  289.                 <p><a href="/user_data/hakama#hakama_flow">ご利用の流れ</a></p>
  290.             </div>
  291.         </div>
  292.     </div>
  293. </div>
  294. <div class="aki-header-menu aki-container aki-header-menu_753">
  295.     <div class="aki-navbar d-block">
  296.         <ul class="menu-header d-flex align-items-center justify-content-between">
  297.             <li><a href="/user_data/hakama#l001">学生（女性）におすすめの卒業袴</a></li>
  298.             <li><a href="/user_data/hakama#l002">先生におすすめの卒業袴</a></li>
  299.             <li><a href="/user_data/hakama#l003">学生（男性）におすすめの紋付袴</a></li>
  300.             <li><a href="/user_data/hakama#l004">ジュニアにおすすめの卒業袴</a></li>
  301.             <li><a href="/user_data/hakama#l005">お母さんにおすすめの着物</a></li>
  302.         </ul>
  303.     </div>
  304. </div>