src/Eccube/Resource/template/default/sticky-nav.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. #}
  12. {% block javascript %}
  13.     <script>
  14.         $(document).ready(function () {
  15.             $("#nav").hide();
  16.             $('.open-category').on('click', function () {
  17.                 $('.open-category').toggleClass('active bg-[#F7F6F2]');
  18.                 $("#nav").toggleClass('panelactive');
  19.                 $('#nav').removeClass('opacity-0');
  20.                 $('#nav').slideToggle(500)
  21.             });
  23.             $('.open-category a').click(function () {
  24.                 $('.open-category').removeClass('active');
  25.                 $('#nav').removeClass('panelactive');
  26.             });
  27.             $('.close-category').click(function () {
  28.                 $('#nav').slideToggle(500)
  29.                  $('.open-category').removeClass('bg-[#F7F6F2]');
  30.             });
  31.             $('.js-hamburger-menu').on('click', function (){
  32.                 if($('.navigation').hasClass('active')){
  33.                     $(".sticky-nav").removeClass('opacity-0');
  34.                 }else{
  35.                     $(".sticky-nav").addClass('opacity-0');
  36.                 }
  37.             })
  38.         })
  39.     </script>
  40.     {# ページ毎のスクロールイベント #}
  41.     {% if app.request.get('_route') == 'homepage' %}
  42.         <script>
  43.             $(document).ready(function () {
  44.                 $(".pc-category").removeClass('opacity-0');
  45.                 $(window).on("scroll", function () {
  46.                     // フッター
  47.                     const point = window.pageYOffset;
  48.                     const docHeight = $(document).height();
  49.                     const dispHeight = $(window).height();
  50.                     const sliderHeight = $(".footer").height();
  51.                     const footerInnerHeight = $('.footer').innerHeight();
  52.                     if (point > docHeight-dispHeight-footerInnerHeight) {
  53.                         $(".sticky-nav").addClass('opacity-0');
  54.                     }else{
  55.                         $(".sticky-nav").removeClass('opacity-0');
  56.                     }
  57.                     // TOPページ
  58.                     const mvHeight = $(".mv").height();
  59.                     if (mvHeight - 300 < $(this).scrollTop()) {
  60.                         if(point > docHeight-dispHeight-footerInnerHeight == false){
  61.                             $(".sticky-nav").removeClass('opacity-0');
  62.                         }
  63.                     }else{
  64.                         $('#nav').fadeOut(500)
  65.                         $(".sticky-nav").addClass('opacity-0');
  66.                         $('.open-category').removeClass('bg-[#F7F6F2]');
  67.                     }
  68.                 });
  69.             });
  70.         </script>
  71.     {% else %}
  72.         <script>
  73.             $(document).ready(function () {
  74.                 $(".sticky-nav").removeClass('opacity-0');
  75.                 $(".pc-category").removeClass('opacity-0');
  76.                     $(window).on("scroll", function () {
  77.                     // フッター
  78.                     const point = window.pageYOffset;
  79.                     const docHeight = $(document).height();
  80.                     const dispHeight = $(window).height();
  81.                     const sliderHeight = $(".footer").height();
  82.                     const footerInnerHeight = $('.footer').innerHeight();
  83.                     if (point > docHeight-dispHeight-footerInnerHeight) {
  84.                         $(".sticky-nav").addClass('opacity-0');
  85.                     }else{
  86.                         $(".sticky-nav").removeClass('opacity-0');
  87.                     }
  88.                 });
  89.             })
  90.         </script>
  91.     {% endif %}
  92.     <script>
  93.         $(document).ready(function () {
  94.             var targetPages = [
  95.                 '/contact/complete',
  96.                 '/contact/confirm',
  97.                 '/contact',
  98.                 '/contact/showroom',
  99.                 '/contact/catalog',
  100.                 '/contact/other',
  101.                 '/contact/coordinate',
  102.                 '/contact/form',
  103.                 '/entry/activate',
  104.                 '/entry/complete',
  105.                 '/entry/confirm',
  106.                 '/entry',
  107.                 '/forgot/complete',
  108.                 '/forgot',
  109.                 '/forgot/reset',
  110.                 '/help/agreement',
  111.                 '/help/privacy',
  112.                 '/help/sitemap',
  113.                 '/help/tradelaw',
  114.                 '/mypage/change_complete',
  115.                 '/mypage/change',
  116.                 '/mypage/delivery_edit',
  117.                 '/mypage/delivery',
  118.                 '/mypage/favorite',
  119.                 '/mypage/',
  120.                 '/mypage/login',
  121.                 '/mypage/withdraw_complete',
  122.                 '/mypage/withdraw_confirm',
  123.                 '/mypage/withdraw',
  124.                 '/user_data/catalog',
  125.                 '/user_data/corporate',
  126.                 '/user_data/guide_detail',
  127.                 '/user_data/guide_top',
  128.                 '/user_data/movie',
  129.                 '/user_data/naire',
  130.                 '/user_data/photo_service',
  131.                 '/user_data/pick_up-altar',
  132.                 '/user_data/pick_up-altar',
  133.                 '/user_data/qa',
  134.                 '/user_data/reading_detail',
  135.                 '/user_data/reading',
  136.                 '/user_data/service',
  137.                 '/user_data/service',
  138.                 '/cart',
  139.                 '/shopping/alert',
  140.                 '/shopping/confirm',
  141.                 '/shopping/complete',
  142.                 '/shopping',
  143.                 '/shopping/login',
  144.                 '/shopping/nomember',
  145.                 '/shopping/shipping_edit',
  146.                 '/shopping/shipping_multiple_edit',
  147.                 '/shopping/shipping_multiple',
  148.                 '/shopping',
  149.                 '/shopping/error',
  150.             ];
  151.             var currentUrl = location.pathname;
  153.             if ($.inArray(currentUrl, targetPages) !== -1) {
  154.                 console.log("test");
  155.                 $(".sticky-nav").hide();
  156.                 $(".pc-category").hide();
  157.             }
  158.         });
  159.     </script>
  160. {% endblock %}
  161. {% set Categories = repository('Eccube\\Entity\\Category').getList() %}
  162. {% set categories = [
  163.     {
  164.         'name': 'お仏壇',
  165.         'id':'2',
  166.     },
  167.     {
  168.         'name': 'お位牌',
  169.          'id':'1',
  170.     },
  171.     {
  172.         'name': '仏具',
  173.          'id':'3',
  174.     },
  175.     {
  176.         'name': 'セット',
  177.          'id':'4',
  178.     },
  179.     {
  180.         'name': '手元供養',
  181.          'id':'21',
  182.     },
  183. ] %}
  185. {% block main %}
  186.     <div class="bg-manakaBeige w-full fixed top-[82px] lg:top-[56px] z-10 md:hidden pc-category opacity-0">
  187.         <ul class="flex items-center gap-4 h-[82px] max-w-[1440px] justify-end mx-auto pr-4">
  188.             {% if app.request.get('_route') == 'product_list' %}
  189.                 {% for category in categories %}
  190.                     <li class="drop-shadow-lg bg-[#FBFBF9] px-1.5 py-0.5 rounded-3xl w-[86px] text-center {% if Category.id == category.id %}text-white !bg-[#D0CBBE]{% endif %}">
  191.                         <a href="{{url('product_list',{'category_id':category.id})}}" class="cursor-pointer hover text-[15px] tracking-widest leading-8 ">
  192.                             {{category.name}}
  193.                         </a>
  194.                     </li>
  195.                 {% endfor %}
  196.             {% else %}
  197.                 {% for category in categories %}
  198.                     <li class="drop-shadow-lg bg-[#FBFBF9] px-1.5 py-0.5 rounded-3xl w-[86px] text-center">
  199.                         <a href="{{url('product_list',{'category_id':category.id})}}" class="cursor-pointer hover text-[15px] tracking-widest leading-8 ">
  200.                             {{category.name}}
  201.                         </a>
  202.                     </li>
  203.                 {% endfor %}
  204.             {% endif %}
  205.         </ul>
  206.     </div>
  207.     <div
  208.         class="md:flex hidden fixed bg-white bottom-0 left-0 z-20 w-full items-center border-[#F7F6F2] border-t sticky-nav opacity-0 duration-700">
  209.         {# 商品カテゴリー #}
  210.         <button class="flex flex-col items-center justify-center p-4 w-full gap-2 open-category">
  211.             <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewbox="0 0 25 24" fill="none">
  212.                 <path d="M9.5 5H7.5C6.96957 5 6.46086 5.21071 6.08579 5.58579C5.71071 5.96086 5.5 6.46957 5.5 7V19C5.5 19.5304 5.71071 20.0391 6.08579 20.4142C6.46086 20.7893 6.96957 21 7.5 21H17.5C18.0304 21 18.5391 20.7893 18.9142 20.4142C19.2893 20.0391 19.5 19.5304 19.5 19V7C19.5 6.46957 19.2893 5.96086 18.9142 5.58579C18.5391 5.21071 18.0304 5 17.5 5H15.5M9.5 5C9.5 5.53043 9.71071 6.03914 10.0858 6.41421C10.4609 6.78929 10.9696 7 11.5 7H13.5C14.0304 7 14.5391 6.78929 14.9142 6.41421C15.2893 6.03914 15.5 5.53043 15.5 5M9.5 5C9.5 4.46957 9.71071 3.96086 10.0858 3.58579C10.4609 3.21071 10.9696 3 11.5 3H13.5C14.0304 3 14.5391 3.21071 14.9142 3.58579C15.2893 3.96086 15.5 4.46957 15.5 5M12.5 12H15.5M12.5 16H15.5M9.5 12H9.51M9.5 16H9.51" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"/>
  213.             </svg>
  214.             <p class="text-xs">商品カテゴリー</p>
  215.         </button>
  216.         <hr
  217.         class="h-10 bg-[#F7F6F2] w-[2px] border-none">
  218.         {# 問い合わせ #}
  219.         <a href="{{url('contact')}}" class="flex flex-col items-center justify-center p-3 w-full gap-2">
  220.             <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewbox="0 0 25 24" fill="none">
  221.                 <path d="M3.5 8L11.39 13.26C11.7187 13.4793 12.1049 13.5963 12.5 13.5963C12.8951 13.5963 13.2813 13.4793 13.61 13.26L21.5 8M5.5 19H19.5C20.0304 19 20.5391 18.7893 20.9142 18.4142C21.2893 18.0391 21.5 17.5304 21.5 17V7C21.5 6.46957 21.2893 5.96086 20.9142 5.58579C20.5391 5.21071 20.0304 5 19.5 5H5.5C4.96957 5 4.46086 5.21071 4.08579 5.58579C3.71071 5.96086 3.5 6.46957 3.5 7V17C3.5 17.5304 3.71071 18.0391 4.08579 18.4142C4.46086 18.7893 4.96957 19 5.5 19Z" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"/>
  222.             </svg>
  223.             <p class="text-xs">お問い合わせ</p>
  224.         </a>
  225.     </div>
  226.     <nav class="fixed bottom-[72px] w-full md:grid grid-cols-3 gap-3 hidden py-7 px-8 bg-white border-[#F7F6F2] border-t z-10 opacity-0" id="nav">
  227.         <div class="close-category absolute top-2 right-3">
  228.             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" fill="none" class="">
  229.                 <path d="M4 12L12 4M4 4L12 12" stroke="#E2DFD6" stroke-linecap="round" stroke-linejoin="round"/>
  230.             </svg>
  231.         </div>
  232.         {% for category in categories %}
  233.             <a href="{{url('product_list',{'category_id':category.id})}}" class="max-w-[calc(100%÷{{ category|length }})] bg-white border border-[#E2DFD6] py-2 px-4 block whitespace-nowrap text-center rounded hover">
  234.                 {{category.name}}
  235.             </a>
  236.         {% endfor %}
  237.         <a href="{{url('homepage')}}" class="w-full bg-white border border-[#E2DFD6] py-2 px-4 block whitespace-nowrap text-center rounded hover">
  238.             TOP
  239.         </a>
  240.     </nav>
  241. {% endblock %}