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

Open in your IDE?
  1. <div class="store-list__items">
  2.     {% for store in stores %}
  3.         <div class="store-list__item">
  4.             <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>
  5.             <div class="store-list__infos-section">
  6.                 {% if store.address != "" and store.address is not null %}
  7.                     <div class="store-list__icon-block">
  8.                         <i class="fas fa-map-marker-alt"></i>
  9.                         <div>{{ store.address }}</div>
  10.                     </div>
  11.                 {% endif %}
  12.                 {% if store.email != "" and store.email is not null %}
  13.                     <div class="store-list__icon-block">
  14.                         <i class="fas fa-envelope"></i>
  15.                         <div><a href="mailto:{{ store.email }}" title="{{ 'sylius.stores.write_to_the_store'|trans|e('html_attr') }}">{{ store.email }}</a></div>
  16.                     </div>
  17.                 {% endif %}
  18.                 {% if store.phone != "" and store.phone is not null %}
  19.                     <div class="store-list__icon-block">
  20.                         <i class="fas fa-phone"></i>
  21.                         <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>
  22.                     </div>
  23.                 {% endif %}
  24.                 {% if store.fax != "" and store.fax is not null %}
  25.                     <div class="store-list__icon-block">
  26.                         <i class="fas fa-fax"></i>
  27.                         <div>{{ 'sylius.stores.fax'|trans }} {{ store.fax }}</div>
  28.                     </div>
  29.                 {% endif %}
  30.                 {% if store.openingTimes != "" and store.openingTimes is not null %}
  31.                     <div class="store-list__icon-block store-list__icon-block--opening">
  32.                         <i class="fas fa-clock"></i>
  33.                         <div>
  34.                             <strong>{{ 'sylius.stores.opening_times'|trans }}</strong>
  35.                             <br>
  36.                             {{ store.openingTimes|raw }}
  37.                         </div>
  38.                     </div>
  39.                 {% endif %}
  40.             </div>
  41.         </div>
  42.     {% endfor %}
  43. </div>
  45. <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
  46. <script type="text/javascript">
  47.     // Display the map
  48.     mapboxgl.accessToken = '{{ mapbox_key }}';
  50.     var map = new mapboxgl.Map({
  51.         container: 'map',
  52.         style: 'mapbox://styles/mapbox/light-v10',
  53.         center: [10, 47.8],
  54.         zoom: 3
  55.     });
  57.     var geojson = {
  58.         'type': 'FeatureCollection',
  59.         'features': [
  60.             {% for store in stores %}
  61.             {% if loop.index0 > 0 %}
  62.             ,
  63.             {% endif %}
  64.             {
  65.                 'type': 'Feature',
  66.                 'geometry': {
  67.                     'type': 'Point',
  68.                     '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 %}]
  69.                 },
  70.                 'properties': {
  71.                     'reseller': {% if store.isReseller %}true{% else %}false{% endif %},
  72.                     'title': '{{ store.name|e('js') }}',
  73.                     'description': `
  74.                                         <div class="store-list__infos-section">
  75.                                             <div class="store-list__icon-block">
  76.                                                 <i class="fas fa-map-marker-alt"></i>
  77.                                                 <div>{{ store.address }}</div>
  78.                                             </div>
  79.                                             {% if store.email != "" and store.email is not null %}
  80.                                                 <div class="store-list__icon-block">
  81.                                                     <i class="fas fa-envelope"></i>
  82.                                                     <div><a href="mailto:{{ store.email }}" target="_blank" title="{{ 'sylius.stores.write_to_the_store'|trans|e('html_attr') }}">{{ store.email }}</a></div>
  83.                                                 </div>
  84.                                             {% endif %}
  85.                                             {% if store.phone != "" and store.phone is not null %}
  86.                                                 <div class="store-list__icon-block">
  87.                                                     <i class="fas fa-phone"></i>
  88.                                                     <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>
  89.                                                 </div>
  90.                                             {% endif %}
  91.                                             {% if store.fax != "" and store.fax is not null %}
  92.                                                 <div class="store-list__icon-block">
  93.                                                     <i class="fas fa-fax"></i>
  94.                                                     <div>{{ 'sylius.stores.fax'|trans|e('html_attr') }} {{ store.fax }}</div>
  95.                                                 </div>
  96.                                             {% endif %}
  97.                                         </div>
  98.                                     `
  99.                 }
  100.             }
  101.             {% endfor %}
  102.         ]
  103.     };
  105.     // add markers to map
  106.     geojson.features.forEach(function (marker) {
  107.         // create a HTML element for each feature
  108.         var el = document.createElement('div');
  109.         el.className = marker.properties.reseller ? 'marker reseller' : 'marker';
  111.         // make a marker for each feature and add it to the map
  112.         new mapboxgl.Marker(el)
  113.             .setLngLat(marker.geometry.coordinates)
  114.             .setPopup(
  115.                 new mapboxgl.Popup({ offset: 25 }) // add popups
  116.                     .setHTML(
  117.                         '<h3>' +
  118.                         marker.properties.title +
  119.                         '</h3><p>' +
  120.                         marker.properties.description +
  121.                         '</p>'
  122.                     )
  123.             )
  124.             .addTo(map);
  125.     });
  127.     var nav = new mapboxgl.NavigationControl();
  128.     map.addControl(nav, 'top-left');
  129. </script>