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";
            }
        });
    }


← Назад к списку новостей