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

Open in your IDE?
  1. {% extends '@SyliusShop/layout-large.html.twig' %}
  3. {%- block title -%}
  4.     {% if page.title is not empty %}
  5.         {{ page.title }}
  6.     {% else %}
  7.         {{ parent() }}
  8.     {% endif %}
  9. {%- endblock -%}
  11. {% block head %}
  12.     {{ parent() }}
  14.     {% block stylesheets %}
  15.         {{ parent() }}
  17.         <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
  18.     {% endblock %}
  20.     {% block metatags %}
  21.         {{ parent() }}
  23.         <meta name="keywords" content="{{ page.metaKeywords }}"/>
  24.         <meta name="description" content="{{ page.metaDescription }}"/>
  25.     {% endblock %}
  26. {% endblock %}
  29. {% block content %}
  30.     <div class="store-details">
  31.         <div class="container">
  32.             {% include 'common/_breadcrumb-store.html.twig' %}
  34.             <div class="store-details__columns">
  35.                 {% if store.image is not empty %}
  36.                     <img class="store-details__image" src="{{ store.image.path }}" alt="{{ store.title|e('html_attr') }}" data-aos="fade-right">
  37.                 {% endif %}
  38.                 <div class="store-details__content" data-aos="fade-left">
  39.                     <h1 class="page__title">
  40.                         <span class="page__tagline">{{ store.location }}</span>
  41.                         {{ store.name }}
  42.                     </h1>
  43.                     <div class="store-details__text">
  44.                         {{ store.content|raw }}
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.         <div class="bg-dark store-details__deco">
  50.             <div class="container">
  51.                 <div class="store-details__infos">
  52.                     <div class="store-details__infos-left" data-aos="fade-right">
  53.                         <h3 class="c-red bold h4 store-details__infos-title">{{ store.name }}</h3><br>
  54.                         <div class="store-details__infos-section">
  55.                             {% if store.address != "" and store.address is not null %}
  56.                                 <div class="store-details__icon-block">
  57.                                     <i class="fas fa-map-marker-alt"></i>
  58.                                     <div>
  59.                                         {{ store.address }}<br>
  60.                                         <a href="https://www.google.com/maps/place/{{ store.address|format_for_gmaps }}/@{{ store.gpsLat }},{{ store.gpsLng }},17z" title="{{ 'sylius.structures.link.see_on_gmaps'|trans }}" target="_blank">{{ 'sylius.stores.access_map'|trans }}</a>
  61.                                     </div>
  62.                                 </div>
  63.                             {% endif %}
  64.                             {% if store.email != "" and store.email is not null %}
  65.                                 <div class="store-details__icon-block">
  66.                                     <i class="fas fa-envelope"></i>
  67.                                     <div><a href="mailto:{{ store.email }}" title="{{ 'sylius.stores.write_to_the_store'|trans|e('html_attr') }}">{{ store.email }}</a></div>
  68.                                 </div>
  69.                             {% endif %}
  70.                             {% if store.phone != "" and store.phone is not null %}
  71.                                 <div class="store-details__icon-block">
  72.                                     <i class="fas fa-phone"></i>
  73.                                     <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>
  74.                                 </div>
  75.                             {% endif %}
  76.                             {% if store.fax != "" and store.fax is not null %}
  77.                                 <div class="store-details__icon-block">
  78.                                     <i class="fas fa-fax"></i>
  79.                                     <div>{{ 'sylius.stores.fax'|trans }} {{ store.fax }}</div>
  80.                                 </div>
  81.                             {% endif %}
  82.                         </div>
  83.                         <div class="store-details__infos-section">
  84.                             {% if store.openingTimes != "" and store.openingTimes is not null %}
  85.                                 <div class="store-details__icon-block">
  86.                                     <i class="fas fa-clock"></i>
  87.                                     <div>
  88.                                         <strong>{{ 'sylius.stores.opening_times'|trans }}</strong>
  89.                                         <br>
  90.                                         {{ store.openingTimes|raw }}
  91.                                     </div>
  92.                                 </div>
  93.                             {% endif %}
  94.                             <br>
  95.                             <br>
  96.                             {% if store.googleBusinessUrl is not null %}
  97.                                 <a href="{{ store.googleBusinessUrl }}" class="button button--medium button--outline-red button--outline-thin" target="_blank" title="{{ 'sylius.stores.leave_a_comment'|trans|e('html_attr') }}"><i class="fas fa-comments"></i>{{ 'sylius.stores.leave_a_comment'|trans }}</a>
  98.                             {% endif %}
  99.                         </div>
  100.                     </div>
  101.                     <div class="store-details__infos-right" data-aos="fade-left">
  102.                         <div class="store-details__infos-map">
  103.                             <div id="map"></div>
  104.                         </div>
  105.                         <a href="{{ path('app_shop_store_index') }}" class="button button--outline button--medium button--outline-thin" title="{{ 'sylius.stores.back_to_the_list'|trans|e('html_attr') }}">{{ 'sylius.stores.back_to_the_list'|trans }}</a>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.         <div class="citation" data-aos="fade-up">
  111.             <div class="container">
  112.                 <p>{{ 'sylius.stores.order_online'|trans|raw }}</p>
  113.                 <a class="button button--secondary button--medium" href="{{ bitbag_cms_get_link_for_code('contact') }}" title="{{ 'sylius.stores.info_request'|trans|e('html_attr') }}">{{ 'sylius.stores.info_request'|trans }}</a>
  114.             </div>
  115.         </div>
  116.     </div>
  117. {% endblock %}
  120. {% block javascripts %}
  121.     {{ parent() }}
  123.     <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
  124.     <script type="text/javascript">
  125.         // Display the map
  126.         mapboxgl.accessToken = '{{ mapbox_key }}';
  128.         var map = new mapboxgl.Map({
  129.             container: 'map',
  130.             style: 'mapbox://styles/mapbox/light-v10',
  131.             center: [{{ store.gpsLng }}, {{ store.gpsLat }}],
  132.             zoom: 13
  133.         });
  135.         var marker = new mapboxgl.Marker({
  136.             color: '#883412'
  137.         })
  138.             .setLngLat([{{ store.gpsLng }}, {{ store.gpsLat }}])
  139.             .addTo(map);
  141.         var nav = new mapboxgl.NavigationControl();
  142.         map.addControl(nav, 'top-left');
  143.     </script>
  144. {% endblock %}