templates/front/default/stores.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  3. {% block linkcanonical %}
  4.     <link rel="canonical" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))) }}">
  5. {% endblock %}
  7. {% block cssadicional %}{% endblock %}
  9. {% block classbody %}{% endblock %}
  11. {% block content %}
  12. <section class="banner-general">
  13.     <div class="wancho">
  14.         <div class="general_breadcrumbs">
  15.             <ul>
  16.                 <li><a href="{{ path('home') }}">INICIO</a></li>
  17.                 <li><a href="{{ path('stores') }}" aria-selected="true">LOCALES</a></li>
  18.             </ul>
  19.         </div>
  20.         <div class="main_title_layout">
  21.             <h2>{{ home.mainPrefix }}</h2>
  22.             <h1 class="general_title">{{ home.mainTitle|block_title|raw }}</h1>
  23.         </div>
  24.     </div>
  25. </section>
  26. <div>
  27.     <div class="wancho">
  28.         <ul class="list-locales flex">
  29.             {% for item in stores %}
  30.             <li class="list-locales__item" aria-selected="{{ item.slug == detail.slug ? 'true': 'false'}}"><a href="{{ path('store_detail', {'slug': item.slug}) }}">{{item.title}}</a></li>
  31.             {% endfor %}
  32.         </ul>
  33.     </div>
  34. </div>
  36. {% if detail.type == 'type2' %}
  37.     {% include 'front/default/store_type2.html.twig' %}
  38. {% else %}
  39.     {% include 'front/default/store_type1.html.twig' %}
  40. {% endif %}
  42. {% endblock %} 
  44. {% block jsfinal %}
  46. {% if detail.type == 'type2' %}
  47. <script type="text/javascript">
  48.     setInfo(document.getElementsByClassName('locales__list__item')[0]);
  50.     const listItem = document.getElementsByClassName('locales__list')[0];
  51.     listItem.addEventListener('click', event => {
  52.         if (event.target.className == 'locales__list__item') {
  53.             setInfo(event.target);
  54.             const docs = document.querySelectorAll('.locales__list__item');
  55.             docs.forEach(element => {
  56.                 element.classList.remove('active');
  57.             });
  58.             event.target.classList.add('active');
  59.         }
  60.     });
  62.     function setValue(element, value, mode) {
  63.         if(value) {
  64.             element.css({'display':mode});
  65.         } else {
  66.             element.css({'display':'none'});
  67.         }
  68.     }
  70.     function setInfo(item) {
  71.         const getTaller = item.dataset.taller;
  72.         const getCorreo = item.dataset.correo;
  73.         const getTelefono = item.dataset.telefono;
  74.         const getDir = item.dataset.direccion;
  75.         const getDirurl = item.dataset.direccionurl;
  76.         const getMaps = item.dataset.maps;
  77.         const getWaze = item.dataset.waze;
  78.         const getImg = item.dataset.img;
  80.         document.getElementById('locales__title').innerText = getTaller;
  82.         document.getElementById('locales_mail').innerText = getCorreo;
  83.         document.getElementById('locales_mail').parentElement.setAttribute('href', `mailto:${getCorreo}`);
  85.         document.getElementById('locales_phone').innerText = getTelefono;
  86.         document.getElementById('locales_phone').parentElement.setAttribute('href', `tel:${getTelefono}`);
  88.         document.getElementById('locales_dir').innerText = getDir;
  89.         document.getElementById('locales_dir').parentElement.setAttribute('href', `${getDirurl}`);
  91.         document.getElementById('mapsBtn').setAttribute('href', getMaps);
  92.         document.getElementById('mapsWaze').setAttribute('href', getWaze);
  94.         if( getImg ) {
  95.             document.getElementById('locales_img').setAttribute('src', getImg);
  96.             document.getElementById('locales_img').style.display = 'block';
  97.         } else {
  98.             document.getElementById('locales_img').style.display = 'none';
  99.         }
  101.         setValue($('#mapsBtn'), getMaps, 'flex');
  102.         setValue($('#mapsWaze'), getWaze, 'flex');
  103.         setValue($('#locales_mail').parent(), getCorreo, 'flex');
  104.         setValue($('#locales_phone').parent(), getTelefono, 'flex');
  105.         setValue($('#locales_dir').parent(), getDir, 'flex');
  106.     }
  108.     WidthChange(768, () => {
  109.         const appendSucursales = () => {
  110.             const sucursales = document.querySelectorAll('.locales__list__item');
  111.             sucursales.forEach((sucursal, index) => {
  112.                 const sucursal_info = document.createElement('div');
  113.                 sucursal_info.classList.add('locales__principal__info');
  115.                 sucursal.appendChild(sucursal_info);
  117.                 styleForImg = sucursal.dataset.img ? 'block': 'none' ;
  118.                 styleForImg = sucursal.dataset.img ? 'block': 'none' ;
  119.                 styleForCorreo = sucursal.dataset.correo ? 'flex': 'none' ;
  120.                 styleForTelefono = sucursal.dataset.telefono ? 'flex': 'none' ;
  121.                 styleForDir = sucursal.dataset.direccion ? 'flex': 'none' ;
  122.                 styleForMaps = sucursal.dataset.maps ? 'flex': 'none' ;
  123.                 styleForWaze = sucursal.dataset.waze ? 'flex': 'none' ;
  125.                 sucursal_info.innerHTML = `
  126.     
  127.                     <h4 id="locales__title">${sucursal.dataset.taller}</h4>
  128.                     <a class="locales__icon" href="mailto:${sucursal.dataset.correo}" style="display:${styleForCorreo}"
  129.                         ><i class="icon-mail"></i><span id="locales_mail">${sucursal.dataset.correo}</span
  130.                     ></a>
  131.                     <a class="locales__icon" href="tel:${sucursal.dataset.telefono}" style="display:${styleForTelefono}"
  132.                         ><i class="icon-phone1"></i><span id="locales_phone">${sucursal.dataset.telefono}</span
  133.                     ></a>
  134.                     <a class="locales__icon" target="_blank" href="${sucursal.dataset.direccionurl}" style="display:${styleForDir}"
  135.                         ><i class="icon-placeholder"></i><span id="locales_dir">${sucursal.dataset.direccion}</span
  136.                     ></a>
  137.                     <div class="flex locales__buttons">
  138.                         <a href="${sucursal.dataset.maps}" target="_blank" id="mapsBtn" class="button--gray" style="display:${styleForMaps}"
  139.                             ><img src="{{STATIC_URL}}img/maps.png" alt="" />Google Maps</a
  140.                         >
  141.                         <a href="${sucursal.dataset.waze}" target="_blank" id="mapsWaze" class="button--gray" style="display:${styleForWaze}"
  142.                             ><img src="{{STATIC_URL}}img/waze.png" alt="" />Waze</a
  143.                         >
  144.                     </div>
  145.                     <img src="${sucursal.dataset.img}" style="display:${styleForImg}" alt="foto de sucursal" id="locales_img" />
  146.     
  147.                 `;
  148.             });
  149.         };
  151.         appendSucursales();
  153.         $('.locales__list__item div:first-child').click(function (e) {
  155.             $(this).next('.locales__principal__info').slideToggle(400);
  156.             $(this).toggleClass('activeToggle');
  157.         });
  158.         $('.locales__list__item div:first-child')[0].click();
  159.     });
  161.     function changeLocals(provincia, distrito) {
  162.         if(!provincia && !distrito) {
  163.             $('.locales__list__item').css({'display': 'flex'});
  164.         } else {
  166.             if(provincia && !distrito) {
  167.                 $('.locales__list__item').css({'display': 'none'});
  168.                 $('.locales__list__item[data-provincia="'+ provincia + '"]').css({'display': 'flex'});
  169.             }
  170.             if(distrito && provincia) {
  171.                 $('.locales__list__item').css({'display': 'none'});
  172.                 $('.locales__list__item[data-distrito="'+ distrito + '"][data-provincia="'+ provincia + '"]').css({'display': 'flex'});
  173.             }
  174.             if(distrito && !provincia) {
  175.                 $('.locales__list__item').css({'display': 'none'});
  176.                 $('.locales__list__item[data-distrito="'+ distrito + '"]').css({'display': 'flex'});
  177.             }
  178.         }
  179.     }
  181.     $('#select_provincia').change(function() {
  182.         let provincia = $('#select_provincia').val();
  183.         let distrito = $('#select_distrito').val();
  184.         if(provincia) {
  185.             $('#select_distrito option').css({'display': 'none'});
  186.             $('#select_distrito option[data-provincia='+ provincia+']').css({'display': 'block'});
  187.             $('#select_distrito').val('');
  188.         }
  189.         changeLocals(provincia, distrito);
  190.         
  191.     });
  193.     $('#select_distrito').change(function() {
  194.         let provincia = $('#select_provincia').val();
  195.         let distrito = $('#select_distrito').val();
  196.         changeLocals(provincia, distrito);
  197.     });
  200.     
  202. </script>
  203. {% endif %}
  205. {% endblock %}