agroexpert/templates/contacts.php

<?php
/*
Template Name: Шаблон страницы контакты
*/
?>
<?php get_header(); ?>

<div class="content-middle articles-wrapper">
    <?php get_template_part('partials/rubrics-mobile'); ?>
    <div class="section-title border-top">
        <h1 class="section-title__title"><? the_title()?></h1>
    </div>
    <div class="articles-single">
        <div class="contacts__map-container">
            <div class="contacts__map" id="contacts_map"></div>
        </div>

        <div class="contacts__container">
            <div class="contacts__text-block">
                <p class="contacts__block-title subtitle-13">Адрес</p>
                <p class="contacts__block-subtitle text-13"><?=get_field('address', 'option'); ?></p>
            </div>
            <div class="contacts__text-block">
                <p class="contacts__block-title subtitle-13">Телефон</p>
                <p class="contacts__block-subtitle text-13"><?=get_field('phone', 'option'); ?></p>
            </div>
            <div class="contacts__text-block">
                <p class="contacts__block-title subtitle-13">E-mail</p>
                <p class="contacts__block-email text-13"><?=get_field('email', 'option'); ?></p>
            </div>
        </div>
        <? $privacyPolicy = get_field('privacy_policy', 'option'); ?>
        <div class="contacts__container">
            <h2 class="subtitle-18">Написать нам</h2>
            <?= do_shortcode('[contact-form-7 id="e39d3f5" title="Написать нам" html_class="contacts__form" html_id="contact__form"]')?>
            <p class="text-11"><?= $privacyPolicy['output_text']?></p>
        </div>
    </div>
    <a href="<?= home_url() ?>" class="articles-preview__show-next">На главную</a>
    <div class="articles__spacer-container">
        <div class="articles__spacer"></div>
        <div class="articles__spacer"></div>
    </div>
</div>
<script async src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=8f62a900-d60a-4059-887b-83fe5d19d0a5"
        type="text/javascript"></script>

<?php
$params = get_field('yandex_params', 'option');
?>
<script type="text/javascript">

    const handleInit = () => {
        ymaps.ready(init);
        // Функция ymaps.ready() будет вызвана, когда
        // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
        function init() {
            // Создание карты.
            var myMap = new ymaps.Map("contacts_map", {
                // Координаты центра карты.
                // Порядок по умолчанию: «широта, долгота».
                // Чтобы не определять координаты центра карты вручную,
                // воспользуйтесь инструментом Определение координат.
                center: [<?= $params['latitude']?>, <?= $params['longitude']?>],
                // Уровень масштабирования. Допустимые значения:
                // от 0 (весь мир) до 19.
                zoom: 17
            });

            const Place = new ymaps.Placemark([<?= $params['latitude']?>, <?= $params['longitude']?>], {
                hintContent: '<?= $params['name_point']?>',
                balloonContent: '',
                balloonHeader: '',
            }, {
                iconLayout: 'default#image',
                iconImageHref: '<?= $params['image_point']['url']; ?>',
                iconImageSize: [36, 44],
                iconShape: {
                    type: 'Rectangle',
                    coordinates: [
                        [-30, -93],
                        [30, 0]
                    ]
                }
            });
            myMap.geoObjects.add(Place)
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        if (typeof ymaps !== 'undefined') {
            handleInit();
        } else {
            setTimeout(() => {
                handleInit();
            }, 1000)
        }
    } );


</script>
<script>
    function handleSubmit() {

        let wpcfForm = document.querySelector( '.wpcf7' );

        wpcfForm.addEventListener( 'wpcf7submit', function( event ) {
            var inputs = event.detail.inputs;
            for ( var i = 0; i < inputs.length; i++ ) {
                    if(inputs[i].value === '') return;
            }
        }, false );
    }

    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('contact__form')
        form.addEventListener('submit', handleSubmit)
    });

</script>
<?php get_footer(); ?>