27.июл.2024
Список адресов с картой, карта меняется по клику на адрес
Компонент news.list, в свойства создать поле Карта Яндекс:
Далее в шаблоне, в template.php вставляем данный код:
<div class="contact_address_list container">
<div class="address_list">
<? foreach ($arResult["ITEMS"] as $arItem): ?>
<div class="block_left__address_list" id="<?= $this->GetEditAreaId($arItem['ID']); ?>">
<p class="title"<<? echo $arItem["NAME"] ?></p>
<p class="address"<<?= $arItem["PROPERTIES"]["ATTR_ADDRESS"]["VALUE"] ?></p>
<a href="tel:<?= $arItem["PROPERTIES"]["ATTR_PHONE"]["VALUE"] ?>" class="phone">
<?= $arItem["PROPERTIES"]["ATTR_PHONE"]["VALUE"] ?>
</a>
<p class="time_work"<<?= $arItem["PROPERTIES"]["ATTR_TIME_WORK"]["VALUE"] ?></p>
</div>
<? endforeach; ?>
</div>
<div class="maps_list"<
<? foreach ($arResult["ITEMS"] as $arItem): ?>
<div class="block_right__maps" id="<?= $this->GetEditAreaId($arItem['ID']); ?>">
<? foreach ($arItem["DISPLAY_PROPERTIES"] as $pid => $arProperty): ?>
<? if ($pid == "ATTR_MAPS"): ?>
<?= $arProperty["DISPLAY_VALUE"]; ?>
<? endif; ?>
<? endforeach; ?>
</div>
<? endforeach; ?>
</div>
</div>
Создаем в шаблоне файл script.js с содержимым:
const btnAddress = document.querySelectorAll(".block_left__address_list");
const maps = document.querySelectorAll(".block_right__maps");
btnAddress.forEach(elem => {
elem.addEventListener('click', () => {
const btnIdAddress = elem.id;
displayMap(btnIdAddress)
});
});
const displayMap = (btnIdAddress) => {
maps.forEach(map => {
const mapId = map.getAttribute('id');
if(mapId === btnIdAddress){
map.style.display = "block"
}else{
map.style.display = "none";
}
});
}
© LazarovStudio 2017 - 2022
Есть что-то, что не любит ограждений ©