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

Open in your IDE?
  1. {% block stylesheet %}
  2. <style>
  3.     .popup_mypage {
  4.         font-size: small;
  5.         width: auto;
  6.         min-width: 100px;
  7.         padding: 10px;
  8.         display: none;
  9.         position: absolute;
  10.         line-height: 1.2;
  11.         top: 45px;
  12.         right:55px;
  13.         z-index: 15;
  14.         background: #fff;
  15.         border: #9ece7a solid 1px;
  16.         border-radius: 2px;
  17.         -webkit-border-radius: 2px;
  18.         -moz-border-radius: 2px;
  19.     }
  20.     .popup_mypage p:first-child {
  21.         line-height: 1.3;
  22.         margin-bottom: 0.5em;
  23.     }
  24.     .popup_cart {
  25.         font-size: small;
  26.         width: auto;
  27.         min-width: 120px;
  28.         padding: 10px;
  29.         display: none;
  30.         position: absolute;
  31.         top: 45px;
  32.         right:5px;
  33.         z-index: 15;
  34.         background: #fff;
  35.         border: #9ece7a solid 1px;
  36.         border-radius: 2px;
  37.         -webkit-border-radius: 2px;
  38.         -moz-border-radius: 2px;
  39.     }
  40.     .popup_cart .product_type {
  41.         margin-bottom: 5px;
  42.     }
  43.     .popup_cart div:last-child {
  44.         margin-bottom: 0;
  45.     }
  46.     .popup_mypage a,
  47.     .popup_cart a {
  48.         text-decoration: underline;
  49.     }
  51.     .popup_mypage h2,
  52.     .popup_cart h2 {
  53.         font-size: 1.2em;
  54.     }
  55.     .quantity,
  56.     .money {
  57.         font-size: 14px;
  58.         font-weight: bold;
  59.     }
  60. </style>
  61. {% endblock %}
  62. {% block javascript %}
  63. <script>
  64.     $(function() {
  65.         var $body = $('body');
  66.         var $window = $(window);
  68.         $window.on('scroll', function() {
  69.             var scrollTop = $window.scrollTop();
  70.             var windowWidth = $window.width();
  72.             // 画面幅が768px未満の場合
  73.             if (windowWidth < 768) {
  74.             if (scrollTop > 10) {
  75.                 if (!$body.hasClass('header-fixed')) {
  76.                 $body.addClass('header-fixed');
  77.                 }
  78.             } else {
  79.                 if ($body.hasClass('header-fixed')) {
  80.                 $body.removeClass('header-fixed');
  81.                 }
  82.             }
  83.             }
  84.             // 画面幅が768px以上の場合
  85.             else if (windowWidth < 880) {
  86.             if (scrollTop > 20) {
  87.                 if (!$body.hasClass('header-fixed')) {
  88.                 $body.addClass('header-fixed');
  89.                 }
  90.             } else {
  91.                 if ($body.hasClass('header-fixed')) {
  92.                 $body.removeClass('header-fixed');
  93.                 }
  94.             }
  95.             }
  96.         });
  97.         $window.on('load resize', function() {
  98.             var windowWidth = $window.width();
  99.             var scrollTop = $window.scrollTop();
  101.             // 画面幅が768px未満の場合
  102.             if (windowWidth < 768) {
  103.             if (scrollTop <= 10 && $body.hasClass('header-fixed')) {
  104.                 $body.removeClass('header-fixed');
  105.             }
  106.             }
  107.             // 画面幅が768px以上、880px未満の場合
  108.             else if (windowWidth < 880) {
  109.             if (scrollTop <= 20 && $body.hasClass('header-fixed')) {
  110.                 $body.removeClass('header-fixed');
  111.             }
  112.             } 
  113.             // 画面幅が880px以上の場合
  114.             else {
  115.             if ($body.hasClass('header-fixed')) {
  116.                 $body.removeClass('header-fixed');
  117.             }
  118.             }
  119.         });
  120.     });
  121. </script>
  122. {% endblock javascript %}
  123. {% set Carts = get_all_carts() %}
  124. {% set totalPrice = get_carts_total_price() %}
  125. {% set totalQuantity = get_carts_total_quantity() %}
  126. <div id="header_wrap" class="clearfix">
  127.     <div id="header">
  128.         <div class="only-pc__880">
  129.             <div class="header-top flex">
  130.                 <h1 id="site_description">学校保健、性教育、食教育、メンタルヘルスなど"健康教育"に関する書籍を発行している出版社です。</h1>
  131.                 <div class="header-top__list">
  132.                     <ul class="flex">
  133.                         <li class="contact-mail"><a href="{{ url('contact') }}" ><img src="{{ asset('assets/img/icon/icon_mail_red.png', 'user_data') }}" alt="メールフォームへ" />お問い合わせ</a></li>
  134.                         {% if is_granted('ROLE_USER') == true %}
  135.                             <li class="mypage-btn"><a href="{{ url('mypage') }}"><img src="{{ asset('assets/img/common/btn_mypage.png', 'user_data') }}" alt="マイページ">マイページ</a></li>
  136.                             <li class="login-btn"><a href="{{ url('logout') }}"><img src="{{ asset('assets/img/common/btn_logout.png', 'user_data') }}" alt="ログアウト">ログアウト</a></li>
  137.                         {% else %}
  138.                             <li class="mypage-btn"><a href="{{ url('entry') }}"><img src="{{ asset('assets/img/common/btn_mypage.png', 'user_data') }}" alt="会員登録">会員登録</a></li>
  139.                             <li class="login-btn"><a href="{{ url('mypage') }}"><img src="{{ asset('assets/img/common/btn_login.png', 'user_data') }}" alt="ログイン">ログイン</a></li>
  140.                         {% endif %}
  141.                         <li class="sns-link"><a href="https://twitter.com/higashiyama_pub" target="_blank"><img src="/html/user_data/assets/img/icon/icon_x.png" alt="公式X"></a></li>
  142.                         <li class="sns-link"><a href="https://www.instagram.com/higashiyama_pub" target="_blank"><img src="/html/user_data/assets/img/icon/icon_insta.png" alt="公式インスタグラム"></a></li>
  143.                         <li class="sns-link"><a href="https://www.youtube.com/channel/UCleuOBiUeXjnRTIOhC8-4YQ/featured" target="_blank"><img src="/html/user_data/assets/img/icon/icon_youtube.png" alt="youtube"></a></li>
  144.                         <li id="cart-btn"><a href="{{ url('cart') }}"><img src="{{ asset('assets/img/common/btn_cart.png', 'user_data') }}" alt="カート"><span class="ec-cartNavi__badge">{{ totalQuantity|number_format }}</span></a></li>
  145.                     </ul>
  146.                     <div class="header-top__bottom">
  147.                         <div class="flex">
  148.                             <p class="contact-tel"><a href="tel:0758419278" ><img src="{{ asset('assets/img/icon/icon_tel_red.png', 'user_data') }}" alt="電話番号" />075-841-9278(平日9:00〜17:00)</a></p>
  149.                             {% if is_granted('ROLE_USER') == true %}
  150.                             <p class="welcome">ようこそ、{{ app.user.name01 }}{{ app.user.name02 }}様</p>
  151.                             {% else %}
  152.                             <p class="welcome">ようこそ、ゲスト様</p>
  153.                             {% endif %}
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.         </div>
  159.         <div class="header-menu flex">
  160.             <div class="ec-headerNavSP" id="trigger">
  161.                 <i class="fas fa-bars"></i>
  162.             </div>
  163.             <h2 id="site_logo">
  164.                 <a href="{{ url('homepage') }}">
  165.                     <img src="{{ asset('assets/img/common/logo.jpg', 'user_data') }}" alt="東山書房">
  166.                 </a>
  167.             </h2>
  168.             <div class="header_utility">
  169.                 <div class="header-btnicon only-sp__880">
  170.                     <ul class="flex">
  171.                         {% if is_granted('ROLE_USER') == true %}
  172.                             <li class="mypage-btn"><a href="{{ url('mypage') }}"><img src="{{ asset('assets/img/common/btn_mypage.png', 'user_data') }}" alt="マイページ"></a></li>
  173.                             <li class="login-btn"><a href="{{ url('logout') }}"><img src="{{ asset('assets/img/common/btn_logout.png', 'user_data') }}" alt="ログアウト"></a></li>
  174.                             <li id="cart-btn"><a href="{{ url('cart') }}"><img src="{{ asset('assets/img/common/btn_cart.png', 'user_data') }}" alt="カート"><span class="ec-cartNavi__badge">{{ totalQuantity|number_format }}</span></a></li>
  175.                         {% else %}
  176.                             <li class="mypage-btn"><a href="{{ url('entry') }}"><img src="{{ asset('assets/img/common/btn_mypage.png', 'user_data') }}" alt="会員登録"></a></li>
  177.                             <li class="login-btn"><a href="{{ url('mypage') }}"><img src="{{ asset('assets/img/common/btn_login.png', 'user_data') }}" alt="ログイン"></a></li>
  178.                             <li id="cart-btn"><a href="{{ url('cart') }}"><img src="{{ asset('assets/img/common/btn_cart.png', 'user_data') }}" alt="カート"><span class="ec-cartNavi__badge">{{ totalQuantity|number_format }}</span></a></li>
  179.                         {% endif %}
  180.                     </ul>
  181.                 </div>
  182.             </div>
  183.         </div>
  184.     </div>
  185. </div>