templates/index/search.html.twig line 1

Open in your IDE?
  1. {% extends 'index/layout.html.twig' %}
  2. {% block title -%}
  3.   {%- if location -%}
  4.     {{ location.area.name }}{{ location.name }}
  5.   {%- else -%}
  6.     富山県
  7.   {%- endif -%}の{{ category|default('すべて') }}の店舗一覧
  8. {%- endblock %}
  9. {% block header %}
  10.   {# クーポン非表示対応に伴って戻るボタン非表示 #}
  11.   <header>
  12.     <div class="header_wr">
  13.       <div class="title_wr">
  14. {#        <a href="#" onclick="{% block header_back_btn %}history.back(-1);return false;{% endblock %}" class="back"></a>#}
  15.         <span style="width: 51px"></span>
  16.         <h1 class="header_title">店舗一覧</h1>
  17.       </div>
  18.       {% block header_nav_icon %}
  19.         <a href="{{ path('navi') }}" class="navi-trigger">
  20.           <img src="/img/icon_nav.svg" width="36" alt="">
  21.         </a>
  22.       {% endblock %}
  23.     </div>
  24.   </header>
  25. {% endblock %}
  26. {% block stylesheet %}
  27.   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  28.   <link rel="stylesheet" href="/css/list.css">
  29. {% endblock %}
  30. {% block main %}
  31.   <main>
  32. {#    <h1>お店を探す</h1>#}
  33.     <div class="search_results_box">
  34.       <dl class="search_item">
  35.         <dt class="dt">エリア</dt>
  36.         <dd class="dd">
  37.           {% if area %}
  38.             {{ area.name }}
  39.           {% elseif location %}
  40.             {{ location.name }}
  41.           {% else %}
  42.             すべて
  43.           {% endif %}
  44.         </dd>
  45.       </dl>
  46.       <dl class="search_item">
  47.         <dt class="dt">料理</dt>
  48.         <dd class="dd">{{ category|default('すべて') }}</dd>
  49.       </dl>
  50.       <p>からお店を選択しています</p>
  51.       <a href="{{ path('explore') }}" class="button">条件を選び直す</a>
  52.     </div>
  53.     <section class="infinite">
  54. {#      <h2>{{ pagination.totalItemCount }}件のお店が該当します</h2>#}
  55.       <h2 class="result">{{ totalShopCount }}件のお店が該当します</h2>
  56.       {% for shop in pagination %}
  57.       <div class="shop_wr infinite-item">
  58.         <div class="food_wr">
  59.           <ul class="clearfix">
  60. {#            {% for menu in shop.menus %}#}
  61.             {% set menu = shop.menus.first %}
  62.             <li>
  63.               <a href="{{ path('shop', {id: shop.id} )}}" class="shadow">
  64. {#                <img src="{{ menu.image }}" alt="{{ menu.name }}" style="border-radius: 5px;">#}
  65.               </a>
  66.               <div class="food_img" style="background-image:url({{ menu.image|default('/img/no-image.jpeg') }});border-radius: 5px;"></div>
  67.               {% if not shop.acceptable %}
  68.                 <a href="{{ path('shop', {id: shop.id} )}}" class="shop_unacceptable">受付時間外です</a>
  69.               {% endif %}
  70. {#              <h3>{{ menu.name }}</h3>#}
  71. {#              <div class="price">¥ {{ menu.price|number_format }} -</div>#}
  72.             </li>
  73. {#            {% endfor %}#}
  74.           </ul>
  75.         </div>
  76.         <div class="info_wr clearfix">
  77.           {#<div class="map_wr">#}
  78.             {#<div class="map-container" style="height: 100%;" data-lat="{{ shop.coordinate.latitude }}" data-lng="{{ shop.coordinate.longitude }}"></div>#}
  79.           {#</div>#}
  80.           <a href="{{ path('shop', {id: shop.id} )}}" class="details_wr">
  81.             <div class="shop_name_wr">
  82.               <div>
  83.                 <h2>{{ shop.name }}</h2>
  84.                 <div class="categories">{{ shop.categories|join(' / ') }}</div>
  85.               </div>
  86. {#              <div class="review_wr">#}
  87. {#                <div class="review_num">#}
  88. {#                  4.5#}
  89. {#                </div>#}
  90. {#              </div>#}
  91.             </div>
  92.             <ul class="provide">
  93.               {% if shop.toGo %}<li>テイクアウト</li>{% endif %}
  94.               {% if shop.delivery %}<li>デリバリー</li>{% endif %}
  95.             </ul>
  96.             <div class="indication">提供時間目安 <span>{{ shop.estimatedMinutes|default('-') }}分</span></div>
  97.           </a>
  98.         </div>
  99.       </div>
  100.       {% endfor %}
  101.     </section>
  102.     {% if hasNext %}
  103.     <a href="{{ path('search', nextParam) }}" class="next infinite-path">
  104.       更に表示する
  105.     </a>
  106.     {% endif %}
  107.     <div class="button_area">
  108.       {% if cart is defined %}
  109.         {% if cart %}
  110.           {% if cart.cartItems | length %}
  111.       <a href="{{ path('cart_index') }}" class="button">カートを見る</a>
  112.           {% endif %}
  113.         {% endif %}
  114.       {% endif %}
  115.     </div>
  116.   </main>
  117. {% endblock %}
  118. {% block js %}
  119. {#  <script async defer src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AIzaSyDxtlmq6i3t7yKHPlFdgvRLZh2dN4XnEok&callback=initMap"></script>#}
  120.   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  121.   <script type="text/javascript" src="/js/infinite-scroll.pkgd.min.js"></script>
  122.   <script>
  123.     var slickOptions = {
  124.       variableWidth: true,
  125.       arrows: false,
  126.       dots: false
  127.     };
  128.     function loadMap() {
  129.       var position = {lat: parseFloat($(this).data('lat')), lng: parseFloat($(this).data('lng'))};
  130.       var map = new google.maps.Map($(this).get(0), {
  131.         center: position,
  132.         zoom: 14,
  133.         disableDefaultUI: true
  134.       });
  135.       var marker = new google.maps.Marker({
  136.         position: position,
  137.         map: map,
  138.         draggable: false,
  139.         icon: {
  140.           url: '/img/map-marker.png',
  141.           scaledSize: new google.maps.Size(40, 40),
  142.           size: new google.maps.Size(80, 80),
  143.           origin: new google.maps.Point(0, 0),
  144.           anchor: new google.maps.Point(20, 38)
  145.         }
  146.       });
  147.     }
  148.     $(function () {
  149.       // $('.slick-carousel').slick(slickOptions);
  150.       var $infinite = $('.infinite');
  151.       $infinite.infiniteScroll({
  152.         // options
  153.         path: '.infinite-path',
  154.         append: '.infinite-item',
  155.         //history: 'push',
  156.         //debug: true,
  157.         button: '.infinite-path',
  158.         scrollThreshold: false
  159.       });
  160.       $infinite.on( 'append.infiniteScroll', function( event, response, path, items ) {
  161.         $.each(items, function (i, el) {
  162.           $(el).find('.slick-carousel').slick(slickOptions);
  163.           // $(el).find('.map-container').each(loadMap);
  164.         });
  165.       });
  166.     });
  167.     function initMap() {
  168.       // $(function () {
  169.       //   $('.map-container').each(loadMap);
  170.       // });
  171.     }
  172.   </script>
  173. {% endblock %}