templates/widget/point-list/default.html.twig line 1

Open in your IDE?
  1. <div class="site-block points">
  2.     <div class="container">
  3.         <div class="site-heading">{{ title|default|raw }}</div>
  4.     </div>
  6.     <div class="container">
  7.         <div class="points__text content">
  8.             {{ description|default|raw }}
  9.         </div>
  11.         <div class="points__filter">
  12.             <div class="points__filter-city">
  13.                 <div class="form__field">
  15.                     <div class="form__select">
  16.                         <button type="button" class="form__select-button">Все города</button>
  17.                         <svg>
  18.                             <use xlink:href="/images/sprite..svg#arrow-bottom"></use>
  19.                         </svg>
  20.                         <ul class="form__select-dropdown">
  21.                             <li>
  22.                                 <input type="radio" id="l0" name="city" value="" data-type="">
  23.                                 <label for="l0">Все города</label>
  24.                             </li>
  25.                             {% for city in cities %}
  26.                                 <li>
  27.                                     <input type="radio" id="l{{ loop.index }}" name="city" value="{{ city }}" data-type="{{ city }}">
  28.                                     <label for="l{{ loop.index }}">{{ city }}</label>
  29.                                 </li>
  30.                             {% endfor %}
  31.                         </ul>
  32.                     </div>
  34.                     <script>
  35.                         let url = new URL(window.location.href)
  36.                         let selectedCity = url.searchParams.get('city')
  38.                         document.querySelectorAll('[name="city"]').forEach(el => {
  39.                             if(selectedCity && selectedCity === el.value){
  40.                                 el.checked = true
  41.                                 let selectEl = el.closest('.form__select')
  42.                                 selectEl.classList.add('selected')
  43.                                 selectEl.querySelector('button').innerText = selectedCity
  44.                             }
  46.                             el.addEventListener('change', e => {
  47.                                 let value = e.target.value
  48.                                 if(el.id === 'l0') window.location.href = window.location.pathname
  49.                                 else window.location.href = `${window.location.pathname}?city=${value}`
  50.                             })
  51.                         })
  52.                     </script>
  54.                 </div>
  55.             </div>
  56.             <div class="points__filter-buttons">
  57.                 <div class="item selected" data-tab="list">
  58.                     <svg>
  59.                         <use xlink:href="/images/sprite..svg#list" />
  60.                     </svg>
  61.                     <span>Списком</span>
  62.                 </div>
  63.                 <div class="item" data-tab="map">
  64.                     <svg>
  65.                         <use xlink:href="/images/sprite..svg#map" />
  66.                     </svg>
  67.                     <span>На карте</span>
  68.                 </div>
  69.             </div>
  70.         </div>
  72.         <div class="points__tabs">
  73.             <div class="site-tabs__area">
  74.                 <div class="site-tabs__item selected" data-tab="list">
  75.                     <div class="points__list">
  76.                         <div class="points__list-row points__list-headings">
  77.                             <div class="cell">Город</div>
  78.                             <div class="cell">Адрес</div>
  79.                             <div class="cell">Режим работы</div>
  80.                             <div class="cell">Контакты</div>
  81.                         </div>
  83.                         {% for point in points %}
  84.                             <div class="points__list-row item" data-coordinates="{{ point.coordinates|join(',') }}">
  85.                                 <div class="cell">{{point.city}}</div>
  86.                                 <div class="cell">{{point.address}}</div>
  87.                                 <div class="cell">{{point.worktime}}</div>
  88.                                 <div class="cell">
  89.                                     {{ point.contacts }}
  90.                                 </div>
  91.                             </div>
  92.                         {% endfor %}
  93.                     </div>
  94.                 </div>
  96.                 <div class="site-tabs__item" data-tab="map">
  97.                     <div class="points__map">
  98.                         <div id="map"></div>
  99.                     </div>
  100.                 </div>
  101.             </div>
  102.         </div>
  103.     </div>
  104. </div>