templates/mons/stores/index.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout-large.html.twig' %}
  3. {% block banner %}
  4.     {{ render(url('odiseo_sylius_banner_plugin_shop_partial_banner', {'template': '@SyliusShop/Banner/_banner-nos-boutiques.html.twig'})) }}
  5. {% endblock %}
  7. {%- block title -%}
  8.     {% if page.title is not empty %}
  9.         {{ page.title }}
  10.     {% else %}
  11.         {{ parent() }}
  12.     {% endif %}
  13. {%- endblock -%}
  16. {% block head %}
  17.     {{ parent() }}
  19.     {% block stylesheets %}
  20.         {{ parent() }}
  22.         <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
  23.     {% endblock %}
  25.     {% block metatags %}
  26.         {{ parent() }}
  28.         <meta name="keywords" content="{{ 'sylius.stores.meta_keywords'|trans|e('html_attr') }}"/>
  29.         <meta name="description" content="{{ 'sylius.stores.discover_our_stores'|trans|e('html_attr') }}"/>
  30.     {% endblock %}
  31. {% endblock %}
  34. {% block content %}
  35.     <div class="store-list">
  36.         <div class="container">
  37.             {% include 'common/_breadcrumb.html.twig' %}
  39.             <div class="store-list__intro">{{ 'sylius.stores.discover_our_stores'|trans }}</div>
  40.         </div>
  41.         <div class="store-list__columns">
  42.             <div class="store-list__map-block" data-aos="fade-right">
  43.                 <div id='map'></div>
  44.             </div>
  45.             <div class="store-list__list" data-aos="fade-left">
  46.                 <h1 class="store-list__title">{{ 'sylius.stores.title_discover_our_stores'|trans|raw }}</h1>
  47.                 <div class="store-list__legend">
  48.                     <span>{{ 'sylius.stores.mons_store'|trans }}</span>
  49.                     <span>{{ 'sylius.stores.reseller'|trans }}</span>
  50.                 </div>
  51.                 <div class="store-list__items">
  52.                     {% for store in stores %}
  53.                         <div class="store-list__item">
  54.                             <a href="{{ path('app_shop_store_show', {code: store.code}) }}" title="{{ store.nameWhenLinked|e('html_attr') }}"><h2 class="store-list__item-title {% if store.isReseller %}reseller{% endif %}"><span class="store-list__badge {% if store.isReseller %}reseller{% endif %}">{{ loop.index }}</span>{{ store.name }}</h2></a>
  55.                             <div class="store-list__infos-section">
  56.                                 {% if store.address != "" and store.address is not null %}
  57.                                     <div class="store-list__icon-block">
  58.                                         <i class="fas fa-map-marker-alt"></i>
  59.                                         <div>{{ store.address }}</div>
  60.                                     </div>
  61.                                 {% endif %}
  62.                                 {% if store.email != "" and store.email is not null %}
  63.                                     <div class="store-list__icon-block">
  64.                                         <i class="fas fa-envelope"></i>
  65.                                         <div><a href="mailto:{{ store.email }}" title="{{ 'sylius.stores.write_to_the_store'|trans|e('html_attr') }}">{{ store.email }}</a></div>
  66.                                     </div>
  67.                                 {% endif %}
  68.                                 {% if store.phone != "" and store.phone is not null %}
  69.                                     <div class="store-list__icon-block">
  70.                                         <i class="fas fa-phone"></i>
  71.                                         <div>{{ 'sylius.stores.phone'|trans }} <a href="tel:{{ store.phone }}" target="_blank" title="{{ 'sylius.stores.call_the_store'|trans|e('html_attr') }}">{{ store.phone }}</a></div>
  72.                                     </div>
  73.                                 {% endif %}
  74.                                 {% if store.fax != "" and store.fax is not null %}
  75.                                     <div class="store-list__icon-block">
  76.                                         <i class="fas fa-fax"></i>
  77.                                         <div>{{ 'sylius.stores.fax'|trans }} {{ store.fax }}</div>
  78.                                     </div>
  79.                                 {% endif %}
  80.                                 {% if store.openingTimes != "" and store.openingTimes is not null %}
  81.                                     <div class="store-list__icon-block store-list__icon-block--opening">
  82.                                         <i class="fas fa-clock"></i>
  83.                                         <div>
  84.                                             <strong>{{ 'sylius.stores.opening_times'|trans }}</strong>
  85.                                             <br>
  86.                                             {{ store.openingTimes|raw }}
  87.                                         </div>
  88.                                     </div>
  89.                                 {% endif %}
  90.                             </div>
  91.                         </div>
  92.                     {% endfor %}
  93.                 </div>
  94.             </div>
  95.         </div>
  96.         <div class="citation" data-aos="fade-up">
  97.             <div class="container">
  98.                 <p>{{ 'sylius.stores.discover_our_events'|trans|raw }}</p>
  99.                 <a href="/{{ app.request.locale|slice(0, 2) }}/blog/articles" class="button button--secondary" title="{{ 'sylius.stores.discover_our_news'|trans|e('html_attr') }}">{{ 'sylius.stores.discover_our_news'|trans|raw }}</a>
  100.             </div>
  101.         </div>
  102.     </div>
  103. {% endblock %}
  106. {% block javascripts %}
  107.     {{ parent() }}
  109.     <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
  110.     <script type="text/javascript">
  111.         // Display the map
  112.         mapboxgl.accessToken = '{{ mapbox_key }}';
  114.         var map = new mapboxgl.Map({
  115.             container: 'map',
  116.             style: 'mapbox://styles/mapbox/light-v10',
  117.             center: [10, 47.8],
  118.             zoom: 3
  119.         });
  121.         var geojson = {
  122.             'type': 'FeatureCollection',
  123.             'features': [
  124.                 {% for store in stores %}
  125.                     {% if loop.index0 > 0 %}
  126.                         ,
  127.                     {% endif %}
  128.                     {
  129.                         'type': 'Feature',
  130.                          'geometry': {
  131.                             'type': 'Point',
  132.                             'coordinates': [{% if store.gpsLng != "" and store.gpsLng is not null %}{{ store.gpsLng }}{% else %}0{% endif %}, {% if store.gpsLat != "" and store.gpsLat is not null %}{{ store.gpsLat }}{% else %}0{% endif %}]
  133.                         },
  134.                         'properties': {
  135.                             'reseller': {% if store.isReseller %}true{% else %}false{% endif %},
  136.                             'title': '{{ store.name|e('js') }}',
  137.                             'description': `
  138.                                             <div class="store-list__infos-section">
  139.                                                 <div class="store-list__icon-block">
  140.                                                     <i class="fas fa-map-marker-alt"></i>
  141.                                                     <div>{{ store.address }}</div>
  142.                                                 </div>
  143.                                                 {% if store.email != "" and store.email is not null %}
  144.                                                     <div class="store-list__icon-block">
  145.                                                         <i class="fas fa-envelope"></i>
  146.                                                         <div><a href="mailto:{{ store.email }}" target="_blank" title="{{ 'sylius.stores.write_to_the_store'|trans|e('html_attr') }}">{{ store.email }}</a></div>
  147.                                                     </div>
  148.                                                 {% endif %}
  149.                                                 {% if store.phone != "" and store.phone is not null %}
  150.                                                     <div class="store-list__icon-block">
  151.                                                         <i class="fas fa-phone"></i>
  152.                                                         <div>{{ 'sylius.stores.phone'|trans|e('html_attr') }} <a href="tel:{{ store.phone }}" target="_blank" title="{{ 'sylius.stores.call_the_store'|trans|e('html_attr') }}">{{ store.phone }}</div>
  153.                                                     </div>
  154.                                                 {% endif %}
  155.                                                 {% if store.fax != "" and store.fax is not null %}
  156.                                                     <div class="store-list__icon-block">
  157.                                                         <i class="fas fa-fax"></i>
  158.                                                         <div>{{ 'sylius.stores.fax'|trans|e('html_attr') }} {{ store.fax }}</div>
  159.                                                     </div>
  160.                                                 {% endif %}
  161.                                             </div>
  162.                                         `
  163.                         }
  164.                     }
  165.                 {% endfor %}
  166.             ]
  167.         };
  169.         // add markers to map
  170.         geojson.features.forEach(function (marker) {
  171.             // create a HTML element for each feature
  172.             var el = document.createElement('div');
  173.             el.className = marker.properties.reseller ? 'marker reseller' : 'marker';
  175.             // make a marker for each feature and add it to the map
  176.             new mapboxgl.Marker(el)
  177.                 .setLngLat(marker.geometry.coordinates)
  178.                 .setPopup(
  179.                     new mapboxgl.Popup({ offset: 25 }) // add popups
  180.                         .setHTML(
  181.                             '<h3>' +
  182.                             marker.properties.title +
  183.                             '</h3><p>' +
  184.                             marker.properties.description +
  185.                             '</p>'
  186.                         )
  187.                 )
  188.                 .addTo(map);
  189.         });
  191.         var nav = new mapboxgl.NavigationControl();
  192.         map.addControl(nav, 'top-left');
  193.     </script>
  194. {% endblock %}