{% extends 'index/layout.html.twig' %}
{% block title -%}
{%- if location -%}
{{ location.area.name }}{{ location.name }}
{%- else -%}
富山県
{%- endif -%}の{{ category|default('すべて') }}の店舗一覧
{%- endblock %}
{% block header %}
{# クーポン非表示対応に伴って戻るボタン非表示 #}
<header>
<div class="header_wr">
<div class="title_wr">
{# <a href="#" onclick="{% block header_back_btn %}history.back(-1);return false;{% endblock %}" class="back"></a>#}
<span style="width: 51px"></span>
<h1 class="header_title">店舗一覧</h1>
</div>
{% block header_nav_icon %}
<a href="{{ path('navi') }}" class="navi-trigger">
<img src="/img/icon_nav.svg" width="36" alt="">
</a>
{% endblock %}
</div>
</header>
{% endblock %}
{% block stylesheet %}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="/css/list.css">
{% endblock %}
{% block main %}
<main>
{# <h1>お店を探す</h1>#}
<div class="search_results_box">
<dl class="search_item">
<dt class="dt">エリア</dt>
<dd class="dd">
{% if area %}
{{ area.name }}
{% elseif location %}
{{ location.name }}
{% else %}
すべて
{% endif %}
</dd>
</dl>
<dl class="search_item">
<dt class="dt">料理</dt>
<dd class="dd">{{ category|default('すべて') }}</dd>
</dl>
<p>からお店を選択しています</p>
<a href="{{ path('explore') }}" class="button">条件を選び直す</a>
</div>
<section class="infinite">
{# <h2>{{ pagination.totalItemCount }}件のお店が該当します</h2>#}
<h2 class="result">{{ totalShopCount }}件のお店が該当します</h2>
{% for shop in pagination %}
<div class="shop_wr infinite-item">
<div class="food_wr">
<ul class="clearfix">
{# {% for menu in shop.menus %}#}
{% set menu = shop.menus.first %}
<li>
<a href="{{ path('shop', {id: shop.id} )}}" class="shadow">
{# <img src="{{ menu.image }}" alt="{{ menu.name }}" style="border-radius: 5px;">#}
</a>
<div class="food_img" style="background-image:url({{ menu.image|default('/img/no-image.jpeg') }});border-radius: 5px;"></div>
{% if not shop.acceptable %}
<a href="{{ path('shop', {id: shop.id} )}}" class="shop_unacceptable">受付時間外です</a>
{% endif %}
{# <h3>{{ menu.name }}</h3>#}
{# <div class="price">¥ {{ menu.price|number_format }} -</div>#}
</li>
{# {% endfor %}#}
</ul>
</div>
<div class="info_wr clearfix">
{#<div class="map_wr">#}
{#<div class="map-container" style="height: 100%;" data-lat="{{ shop.coordinate.latitude }}" data-lng="{{ shop.coordinate.longitude }}"></div>#}
{#</div>#}
<a href="{{ path('shop', {id: shop.id} )}}" class="details_wr">
<div class="shop_name_wr">
<div>
<h2>{{ shop.name }}</h2>
<div class="categories">{{ shop.categories|join(' / ') }}</div>
</div>
{# <div class="review_wr">#}
{# <div class="review_num">#}
{# 4.5#}
{# </div>#}
{# </div>#}
</div>
<ul class="provide">
{% if shop.toGo %}<li>テイクアウト</li>{% endif %}
{% if shop.delivery %}<li>デリバリー</li>{% endif %}
</ul>
<div class="indication">提供時間目安 <span>{{ shop.estimatedMinutes|default('-') }}分</span></div>
</a>
</div>
</div>
{% endfor %}
</section>
{% if hasNext %}
<a href="{{ path('search', nextParam) }}" class="next infinite-path">
更に表示する
</a>
{% endif %}
<div class="button_area">
{% if cart is defined %}
{% if cart %}
{% if cart.cartItems | length %}
<a href="{{ path('cart_index') }}" class="button">カートを見る</a>
{% endif %}
{% endif %}
{% endif %}
</div>
</main>
{% endblock %}
{% block js %}
{# <script async defer src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=AIzaSyDxtlmq6i3t7yKHPlFdgvRLZh2dN4XnEok&callback=initMap"></script>#}
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="/js/infinite-scroll.pkgd.min.js"></script>
<script>
var slickOptions = {
variableWidth: true,
arrows: false,
dots: false
};
function loadMap() {
var position = {lat: parseFloat($(this).data('lat')), lng: parseFloat($(this).data('lng'))};
var map = new google.maps.Map($(this).get(0), {
center: position,
zoom: 14,
disableDefaultUI: true
});
var marker = new google.maps.Marker({
position: position,
map: map,
draggable: false,
icon: {
url: '/img/map-marker.png',
scaledSize: new google.maps.Size(40, 40),
size: new google.maps.Size(80, 80),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(20, 38)
}
});
}
$(function () {
// $('.slick-carousel').slick(slickOptions);
var $infinite = $('.infinite');
$infinite.infiniteScroll({
// options
path: '.infinite-path',
append: '.infinite-item',
//history: 'push',
//debug: true,
button: '.infinite-path',
scrollThreshold: false
});
$infinite.on( 'append.infiniteScroll', function( event, response, path, items ) {
$.each(items, function (i, el) {
$(el).find('.slick-carousel').slick(slickOptions);
// $(el).find('.map-container').each(loadMap);
});
});
});
function initMap() {
// $(function () {
// $('.map-container').each(loadMap);
// });
}
</script>
{% endblock %}