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

Open in your IDE?
  1. {% set limit = 3 %}
  2. {% set productMaxLength = 10 %}
  4. <div class="ec-headerNaviRole" style="padding-bottom: 20px;">
  5.     <div class="header-block-42">
  6.         <div class="header01">
  7.             <div class="header-block-nav">
  8.                 <div class="basic-header-bottom">
  9.                     <div class="mega-container">
  10.                         <div class="mega-menu-wrapper p-relative">
  11.                             <div class="d-flex align-items-center justify-content-between">
  12.                                 <div class="basic-header-logo">
  13.                                     <a href="{{ url('homepage') }}" title="{{ BaseInfo.shop_name }}">
  14.                                         <img alt="{{ BaseInfo.shop_name }}"
  15.                                              src="/html/user_data/logo.png?version=1759206319">
  16.                                     </a>
  17.                                 </div>
  18.                                 {# SP (<768px) drawer trigger. position:fixed top-left circle (style.css .ec-headerNavSP),
  19.                                    hidden at >=768px; function.js binds the click to toggle .ec-drawerRole (category nav). #}
  20.                                 <div class="ec-headerRole__navSP">
  21.                                     <div class="ec-headerNavSP">
  22.                                         <i class="fas fa-bars"></i>
  23.                                     </div>
  24.                                 </div>
  25.                                 <div class="basic-header-bottom-right d-flex justify-content-end align-items-center">
  26.                                     <div class="basic-header-meta-items-3 d-flex align-items-center">
  29.                                         {% if is_granted('ROLE_USER') %}
  30.                                             <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
  31.                                                 <div class="basic-header-meta-icon-3 basic-link NavSP">
  32.                                                     <a href="{{ url('mypage') }}" title="マイページ"> <i class="fa fa-user-circle" aria-hidden="true"></i></a>
  33.                                                 </div>
  34.                                             </div>
  36.                                             <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
  37.                                                 <div class="basic-header-meta-icon-3 basic-link NavSP">
  38.                                                     <a href="{{ url('logout') }}" title="ログアウト"> <i class="fa fa-sign-out" aria-hidden="true"></i></a>
  39.                                                 </div>
  40.                                             </div>
  41.                                         {% else %}
  42.                                             <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
  43.                                                 <div class="basic-header-meta-icon-3 basic-link NavSP">
  44.                                                     <a href="{{ url('entry') }}" title="新規会員登録"> <i class="fa fa-user-circle" aria-hidden="true"></i></a>
  45.                                                 </div>
  46.                                             </div>
  48.                                             <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
  49.                                                 <div class="basic-header-meta-icon-3 basic-link NavSP">
  50.                                                     <a href="{{ url('mypage_login') }}" title="ログイン"> <i class="fa fa-lock fa-large" aria-hidden="true"></i></a>
  51.                                                 </div>
  52.                                             </div>
  53.                                         {% endif %}
  54.                                         {% if BaseInfo.option_favorite_product %}
  55.                                             <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center">
  56.                                                 <div class="basic-header-meta-icon-3 basic-link">
  57.                                                     <a href="{{ url('mypage_favorite') }}"> <i class="fa fa-heart" aria-hidden="true"></i></a>
  58.                                                 </div>
  59.                                             </div>
  60.                                         {% endif %}
  61.                                         {% set Carts = get_all_carts() %}
  62.                                         {% set totalPrice = get_carts_total_price() %}
  63.                                         {% set totalQuantity = get_carts_total_quantity() %}
  64.                                         <div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center">
  65.                                             <div class="basic-header-meta-icon-3 basic-header-cart">
  66.                                                 <a href="{{ url('cart') }}" title="カートへ進む">
  67.                                                     <i class="fa fa-shopping-cart fa-large" aria-hidden="true"></i>
  68.                                                     <span class="basic-header-cart-count">{{ totalQuantity|number_format }}</span>
  69.                                                 </a>
  71.                                                 {% if totalQuantity <= 0 %}
  72.                                                     <div class="basic-header-cart-wrapper">
  73.                                                         <h5>現在カート内に商品はございません。</h5>
  74.                                                     </div>
  75.                                                 {% endif %}
  76.                                             </div>
  77.                                         </div>
  78.                                         <div class="basic-search-btn-wrapper">
  79.                                             <button class="basic-search-open-btn" data-open-name="search" data-js="basic_canvas__open-btn" type="button">
  80.                                                 <i class="fa fa-search" aria-hidden="true"></i>
  81.                                             </button>
  82.                                         </div>
  83.                                         {# Tablet-only hamburger toggle for the main menu #}
  84.                                         <div class="basic-header-tablet-toggle">
  85.                                             <button class="basic-tablet-nav-toggle" type="button" aria-label="メニューを開閉" aria-expanded="false">
  86.                                                 <i class="fa fa-bars" aria-hidden="true"></i>
  87.                                             </button>
  88.                                         </div>
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                         </div>
  93.                     </div>
  94.                 </div>
  95.             </div>
  96.         </div>
  97.     </div>
  98. </div>
  99. <div style="background:#365055">
  100. <div class="ec-headerNaviRole" style="color:#fff;padding-bottom: 20px;">
  101.     <div class="header-block-42">
  102.         <div class="header01">
  103.             <div class="header-block-nav">
  104.                 <div class="basic-header-bottom">
  105.                     <div class="mega-container">
  106.                         <div class="mega-menu-wrapper p-relative">
  107.                             <div class="d-flex align-items-center justify-content-between">
  108.                                 <div class="basic-main-menu d-none d-lg-flex align-items-center">
  109.                                                                             <nav>
  110.                                             <ul>
  112.                                                 <!-- デフォルト表示形式 -->
  113.                                                 <li class="has-dropdown">
  114.                                                     <a href="#" data-open-name="info" data-js="basic_canvas__open-btn">
  115.                                                         ご購入までの流れ
  116.                                                     </a>
  117.                                                 </li>
  121.                                                                                                     
  122.                                                                                                             <!-- デフォルト表示形式 -->
  123.                                                         <li class="has-dropdown">
  124.                                                             <a href="" title="カテゴリ">
  125.                                                                 カテゴリ
  126.                                                             </a>
  128.                                                                                                                             <i class="fa fa-angle-down" aria-hidden="true"></i>
  130.                                                                 <ul class="submenu">
  131.                                                                                                                                             <li>
  132.                                                                             <a href="/products/list?category_id=7" title="カーポート・車庫">
  133.                                                                                 カーポート・車庫
  134.                                                                             </a>
  135.                                                                         </li>
  136.                                                                                                                                             <li>
  137.                                                                             <a href="/products/list?category_id=16" title="倉庫・ガレージ">
  138.                                                                                 倉庫・ガレージ
  139.                                                                             </a>
  140.                                                                         </li>
  141.                                                                                                                                             <li>
  142.                                                                             <a href="/products/list?category_id=8" title="サイクルポート・駐輪場">
  143.                                                                                 サイクルポート・駐輪場
  144.                                                                             </a>
  145.                                                                         </li>
  146.                                                                                                                                             <li>
  147.                                                                             <a href="/products/list?category_id=9" title="ゲート">
  148.                                                                                 ゲート
  149.                                                                             </a>
  150.                                                                         </li>
  151.                                                                                                                                             <li>
  152.                                                                             <a href="/products/list?category_id=12" title="テラス">
  153.                                                                                 テラス
  154.                                                                             </a>
  155.                                                                         </li>
  156.                                                                                                                                             <li>
  157.                                                                             <a href="/products/list?category_id=19" title="ベランダ・バルコニー">
  158.                                                                                 ベランダ・バルコニー
  159.                                                                             </a>
  160.                                                                         </li>
  161.                                                                                                                                             <li>
  162.                                                                             <a href="/products/list?category_id=18" title="オーニング・日よけ">
  163.                                                                                 オーニング・日よけ
  164.                                                                             </a>
  165.                                                                         </li>
  166.                                                                                                                                             <li>
  167.                                                                             <a href="/products/list?category_id=11" title="ウッドデッキ">
  168.                                                                                 ウッドデッキ
  169.                                                                             </a>
  170.                                                                         </li>
  171.                                                                                                                                             <li>
  172.                                                                             <a href="/products/list?category_id=14" title="フェンス・柵">
  173.                                                                                 フェンス・柵
  174.                                                                             </a>
  175.                                                                         </li>
  176.                                                                                                                                             <li>
  177.                                                                             <a href="/products/list?category_id=25" title="門扉">
  178.                                                                                 門扉
  179.                                                                             </a>
  180.                                                                         </li>
  181.                                                                                                                                             <li>
  182.                                                                             <a href="/products/list?category_id=13" title="ポスト・門柱宅配ボックス">
  183.                                                                                 ポスト・門柱宅配ボックス
  184.                                                                             </a>
  185.                                                                         </li>
  186.                                                                                                                                             <li>
  187.                                                                             <a href="/products/list?category_id=15" title="物置・収納・屋外倉庫">
  188.                                                                                 物置・収納・屋外倉庫
  189.                                                                             </a>
  190.                                                                         </li>
  191.                                                                                                                                             <li>
  192.                                                                             <a href="/products/list?category_id=20" title="ガーデンファニチャー">
  193.                                                                                 ガーデンファニチャー
  194.                                                                             </a>
  195.                                                                         </li>
  196.                                                                                                                                             <li>
  197.                                                                             <a href="/products/list?category_id=22" title="人工芝">
  198.                                                                                 人工芝
  199.                                                                             </a>
  200.                                                                         </li>
  201.                                                                                                                                             <li>
  202.                                                                             <a href="/products/list?category_id=17" title="内窓・二重窓">
  203.                                                                                 内窓・二重窓
  204.                                                                             </a>
  205.                                                                         </li>
  206.                                                                                                                                             <li>
  207.                                                                             <a href="/products/list?category_id=38" title="パーゴラ">
  208.                                                                                 パーゴラ
  209.                                                                             </a>
  210.                                                                         </li>
  211.                                                                                                                                             <li>
  212.                                                                             <a href="/products/list?category_id=39" title="立水栓・ガーデンシンク">
  213.                                                                                 立水栓・ガーデンシンク
  214.                                                                             </a>
  215.                                                                         </li>
  216.                                                                                                                                             <li>
  217.                                                                             <a href="/products/list?category_id=40" title="手すり">
  218.                                                                                 手すり
  219.                                                                             </a>
  220.                                                                         </li>
  221.                                                                                                                                             <li>
  222.                                                                             <a href="/products/list?category_id=10" title="ストックヤード">
  223.                                                                                 ストックヤード
  224.                                                                             </a>
  225.                                                                         </li>
  226.                                                                                                                                             <li>
  227.                                                                             <a href="/products/list?category_id=27" title="ゴミステーション">
  228.                                                                                 ゴミステーション
  229.                                                                             </a>
  230.                                                                         </li>
  231.                                                                                                                                             <li>
  232.                                                                             <a href="/products/list?category_id=42" title="面格子・窓格子">
  233.                                                                                 面格子・窓格子
  234.                                                                             </a>
  235.                                                                         </li>
  236.                                                                                                                                             <li>
  237.                                                                             <a href="/products/list?category_id=41" title="窓シャッター">
  238.                                                                                 窓シャッター
  239.                                                                             </a>
  240.                                                                         </li>
  241.                                                                                                                                             <li>
  242.                                                                             <a href="/products/list?category_id=43" title="玄関ドア">
  243.                                                                                 玄関ドア
  244.                                                                             </a>
  245.                                                                         </li>
  246.                                                                                                                                     </ul>
  247.                                                                                                                     </li>
  248.                                                                                                                                                         
  249.                                                                                                             <!-- デフォルト表示形式 -->
  250.                                                         <li class="has-dropdown">
  251.                                                             <a href="" title="ブランド">
  252.                                                                 ブランド
  253.                                                             </a>
  255.                                                                                                                             <i class="fa fa-angle-down" aria-hidden="true"></i>
  257.                                                                 <ul class="submenu">
  258.                                                                                                                                             <li>
  259.                                                                             <a href="/products/list?maker_id=1&amp;m=LIXIL" title="LIXIL">
  260.                                                                                 LIXIL
  261.                                                                             </a>
  262.                                                                         </li>
  263.                                                                                                                                             <li>
  264.                                                                             <a href="/products/list?maker_id=2&amp;m=YKK AP" title="YKK AP">
  265.                                                                                 YKK AP
  266.                                                                             </a>
  267.                                                                         </li>
  268.                                                                                                                                             <li>
  269.                                                                             <a href="/products/list?maker_id=3&amp;m=三協アルミ" title="三協アルミ">
  270.                                                                                 三協アルミ
  271.                                                                             </a>
  272.                                                                         </li>
  273.                                                                                                                                             <li>
  274.                                                                             <a href="/products/list?maker_id=4&amp;m=四国化成" title="四国化成">
  275.                                                                                 四国化成
  276.                                                                             </a>
  277.                                                                         </li>
  278.                                                                                                                                             <li>
  279.                                                                             <a href="/products/list?maker_id=5&amp;m=タカショー" title="タカショー">
  280.                                                                                 タカショー
  281.                                                                             </a>
  282.                                                                         </li>
  283.                                                                                                                                             <li>
  284.                                                                             <a href="/products/list?maker_id=8&amp;m=パナソニック" title="パナソニック">
  285.                                                                                 パナソニック
  286.                                                                             </a>
  287.                                                                         </li>
  288.                                                                                                                                             <li>
  289.                                                                             <a href="/products/list?maker_id=9&amp;m=イナバ " title="イナバ ">
  290.                                                                                 イナバ 
  291.                                                                             </a>
  292.                                                                         </li>
  293.                                                                                                                                             <li>
  294.                                                                             <a href="/products/list?maker_id=10&amp;m=ヨドコウ" title="ヨドコウ">
  295.                                                                                 ヨドコウ
  296.                                                                             </a>
  297.                                                                         </li>
  298.                                                                                                                                             <li>
  299.                                                                             <a href="/products/list?maker_id=6&amp;m=ユニソン" title="ユニソン">
  300.                                                                                 ユニソン
  301.                                                                             </a>
  302.                                                                         </li>
  303.                                                                                                                                             <li>
  304.                                                                             <a href="/products/list?maker_id=7&amp;m=エスビック" title="エスビック">
  305.                                                                                 エスビック
  306.                                                                             </a>
  307.                                                                         </li>
  308.                                                                                                                                             <li>
  309.                                                                             <a href="/products/list?maker_id=1&amp;m=13タクボ" title="タクボ">
  310.                                                                                 タクボ
  311.                                                                             </a>
  312.                                                                         </li>
  313.                                                                                                                                     </ul>
  314.                                                                                                                     </li>
  315.                                                                                                     
  316.                                         {% if is_granted('ROLE_USER') %}
  317.                                                 <li class="has-dropdown">
  318.                                                     <a href="{{ url('mypage') }}" title="マイページ">
  319.                                                         マイページ
  320.                                                     </a>
  321.                                                 </li>
  322.                                                 <li class="has-dropdown">
  323.                                                     <a href="{{ url('logout') }}" title="ログアウト">
  324.                                                         ログアウト
  325.                                                     </a>
  326.                                                 </li>
  327.                                         {% else %}
  328.                                                 <li class="has-dropdown">
  329.                                                     <a href="{{ url('entry') }}" title="新規会員登録">
  330.                                                         新規会員登録
  331.                                                     </a>
  332.                                                 </li>
  333.                                                 <li class="has-dropdown">
  334.                                                     <a href="{{ url('mypage_login') }}" title="ログイン">
  335.                                                         ログイン
  336.                                                     </a>
  337.                                                 </li>
  338.                                         {% endif %}
  339.                                                 <li class="has-dropdown">
  340.                                                     <a href="{{ url('contact') }}" title="お問い合わせ">
  341.                                                         お問い合わせ
  342.                                                     </a>
  343.                                                 </li>
  345.                                             </ul>
  346.                                         </nav>
  347.                                                                     </div>
  348.                             </div>
  349.                         </div>
  350.                     </div>
  351.                 </div>
  352.             </div>
  354.             <!-------------------------------------------Contact Info---------------------------------------------------->
  355.             <div class="contact-info">
  356.                 <div class="basic_canvas__area" data-open-js="basic_canvas__area__info" data-js="basic_canvas__area">
  357.                     <div class="basic_canvas__bg"></div>
  358.                     <div class="basic_canvas__wrapper">
  359.                         <div class="basic_canvas__content">
  360.                             <div class="basic_canvas__top mb-40 d-flex justify-content-between align-items-center">
  361.                                 <div class="basic_canvas__logo logo">
  362.                                     <a href="{{ url('homepage') }}">
  363.                                         <img alt="{{ BaseInfo.shop_name }}"
  364.                                              src="/html/user_data/logo.png?version=1759206319">
  365.                                     </a>
  366.                                 </div>
  367.                                 <div class="basic_canvas__close">
  368.                                     <button class="basic_canvas__close-btn" type="button" data-js="basic_canvas__close-btn">
  369.                                         <i class="fa fa-times" aria-hidden="true"></i>
  370.                                     </button>
  371.                                 </div>
  372.                             </div>
  373.                             <div class="basic_canvas__search mb-40">
  374.                                 <form method="get" class="searchform" action="{{ path('product_list') }}">
  375.                                     <button type="submit">
  376.                                         <i class="fa fa-search" aria-hidden="true"></i>
  377.                                     </button>
  378.                                     <input type="text" name="name" placeholder="商品名やキーワードで検索">
  379.                                 </form>
  380.                             </div>
  382.                                                             <div class="basic_canvas__about d-none d-lg-block mb-30">
  383.                                     <h4>ご購入までの流れ</h4>
  384.                                     <p>ご購入までの流れについて、簡潔に記載します。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
  385. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
  386. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
  387. テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  388.                                 </div>
  389.                             
  390.                                                             <div class="basic_canvas__contact mb-30">
  391.                                     <h4>お見積依頼</h4>
  392.                                     <ul>
  393.                                         
  394.                                                                                     <li class="d-flex align-items-center gap-2">
  395.                                                 <div class="basic_canvas__contact-icon">
  396.                                                     <a href="tel:Line">
  397.                                                         <i class="fa fa-phone" aria-hidden="true"></i>
  398.                                                     </a>
  399.                                                 </div>
  400.                                                 <div class="basic_canvas__contact-text">
  401.                                                     <a href="tel:Line">
  402.                                                         Line
  403.                                                     </a>
  404.                                                 </div>
  405.                                             </li>
  406.                                         
  407.                                                                                     <li class="d-flex align-items-center gap-2">
  408.                                                 <div class="basic_canvas__contact-icon">
  409.                                                     <a href="mailto:support@mail.com">
  410.                                                         <i class="fa fa-envelope-open" aria-hidden="true"></i>
  411.                                                     </a>
  412.                                                 </div>
  413.                                                 <div class="basic_canvas__contact-text">
  414.                                                     <a href="mailto:support@mail.com">
  415.                                                         support@mail.com
  416.                                                     </a>
  417.                                                 </div>
  418.                                             </li>
  419.                                                                             </ul>
  420.                                 </div>
  421.                             
  422.                             <div class="basic_canvas__social">
  423.                                 <ul>
  424.                                                                             <li>
  425.                                             <a target="_blank" rel="noreferrer" href="#facebook">
  426.                                                 <i class="fa fa-facebook-square" aria-hidden="true"></i>
  427.                                             </a>
  428.                                         </li>
  429.                                     
  430.                                                                             <li>
  431.                                             <a target="_blank" rel="noreferrer" href="#twitter">
  432.                                                 <i class="fa fa-twitter-square" aria-hidden="true"></i>
  433.                                             </a>
  434.                                         </li>
  435.                                     
  436.                                                                             <li>
  437.                                             <a target="_blank" rel="noreferrer" href="#youtube">
  438.                                                 <i class="fa fa-youtube" aria-hidden="true"></i>
  439.                                             </a>
  440.                                         </li>
  441.                                     
  442.                                                                             <li>
  443.                                             <a target="_blank" rel="noreferrer" href="#google">
  444.                                                 <i class="fa fa-google" aria-hidden="true"></i>
  445.                                             </a>
  446.                                         </li>
  447.                                     
  448.                                                                             <li>
  449.                                             <a target="_blank" rel="noreferrer" href="#instagram">
  450.                                                 <i class="fa fa-instagram" aria-hidden="true"></i>
  451.                                             </a>
  452.                                         </li>
  453.                                                                     </ul>
  454.                             </div>
  455.                         </div>
  456.                     </div>
  457.                 </div>
  458.             </div>
  460.             <!-------------------------------------------Search Form---------------------------------------------------->
  461.             <div class="search-area">
  462.                 <div class="classic-search-popup-area" data-open-js="basic_canvas__area__search" data-js="basic_canvas__area">
  463.                     <div class="container">
  464.                         <div class="row">
  465.                             <div class="col-12">
  466.                                 <div class="classic-search-popup">
  467.                                     <div class="classic-search-form">
  468.                                         <form method="get" class="searchform" action="{{ path('product_list') }}">
  469.                                             <div class="classic-search-input">
  470.                                                 <input type="search" name="name" placeholder="商品名やキーワードで検索">
  471.                                                 <div class="classic-search-submit">
  472.                                                     <button type="submit">
  473.                                                         <i class="fa fa-search" aria-hidden="true"></i>
  474.                                                     </button>
  475.                                                 </div>
  476.                                             </div>
  477.                                         </form>
  479.                                         <div class="classic-search-close">
  480.                                             <div class="classic-search-close-btn">
  481.                                                 <button type="button" data-js="basic_canvas__close-btn">
  482.                                                     <i class="fa fa-times" aria-hidden="true"></i>
  483.                                                 </button>
  484.                                             </div>
  485.                                         </div>
  486.                                     </div>
  488.                                                                     </div>
  489.                             </div>
  490.                         </div>
  491.                     </div>
  492.                 </div>
  493.             </div>
  494.         </div>
  495.     </div>
  496. </div>
  497. </div>