0

Пытаюсь сделать фильтр пользовательских таксономий по полям ACF. Без Ajax фильтр работает как нужно, но как сделать, чтобы страница не перезагружалась и всё это было динамически? Инфу беру из wp-kama, там статья по настройке ajax в wordpress в целом.

Итак у меня есть следующий код в functions.php:

add_action('wp_enqueue_scripts', 'include_jquery');

function include_jquery() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}

add_action('wp_footer', 'app_footer_scripts');
function app_footer_scripts() {
    wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array() );
    /**
     * AJAX
     */
    wp_localize_script( 'main', 'ajax',
        array(
            'url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-nonce')
        )
    );
}

if( wp_doing_ajax() ) {
    add_action( 'wp_ajax_request', 'get_filter' );
    add_action( 'wp_ajax_nopriv_request', 'get_filter' );
}

function get_filter() {
    $min_price = $_POST['min_price'];
    
    echo $min_price;

    wp_die();
}

Далее есть код, самого фильтра не в functions.php, а в файле catalog.php в верхней части, перед html кодом самого вывода объектов. Данный код фильтрует по минимальной и максимальной цене (для нашего примера с ajax возьмем условие только для фильтрации по минимальной цене):

$objects = get_terms(
    array(
        'taxonomy' => 'objects',
    )
);

if ( (!empty($_POST['min_price'])) && (empty($_POST['max_price'])) ) {
    $objects = get_terms(
        array(
            'taxonomy' => 'objects',
            'meta_query' => array(
                array(
                    'key' => 'object_price_object_price_value',
                    'value' => array($_POST['min_price'], 999999999999999999999999),
                    'compare' => 'BETWEEN',
                    'type'    => 'NUMERIC'
                )
            )
        )
    );
}

И код самого ajax в файле main.js:

jQuery(document).ready(function($) {
    $( "#minPrice" ).change(function() {
            $.ajax({
                type: 'POST',
                url: ajax.url,
                data: {
                    action: 'request',
                    min_price: $("#minPrice").val(),
                },
                success: function(response) {
                    console.log(response)
                }
            })
    });
});

Мне необходимо, чтобы после введения значения в поле с id minPrice передавалась переменная в php и фильтр срабатывал. Если в success пишу, например $('#filter').submit(), то всё ок, на страница перезагружается. Никак не могу как правильно передать эту переменную, еще подозреваю, что функция get_filter , которая у меня в functions.php должна быть как-то связана с фильтром в основном файле, иначе $min_price изначально Undefinded. Буду признателен за помощь.

HTML-фильтра

<?php
$currency = get_field_object('currency', 'catalog_settings')['value']['label'];

$objects = get_terms(
    array(
        'taxonomy' => 'objects',
    )
);



if ( (!empty($_POST['min_price'])) && (empty($_POST['max_price'])) ) {
    $objects = get_terms(
        array(
            'taxonomy' => 'objects',
            'meta_query' => array(
                array(
                    'key' => 'object_price_object_price_value',
                    'value' => array($_POST['min_price'], 999999999999999999999999),
                    'compare' => 'BETWEEN',
                    'type'    => 'NUMERIC'
                )
            )
        )
    );
} elseif ( (empty($_POST['min_price'])) && (!empty($_POST['max_price'])) ) {
    $objects = get_terms(
        array(
            'taxonomy' => 'objects',
            'meta_query' => array(
                array(
                    'key' => 'object_price_object_price_value',
                    'value' => array(0, $_POST['max_price']),
                    'compare' => 'BETWEEN',
                    'type'    => 'NUMERIC'
                )
            )
        )
   );
} elseif ( (!empty($_POST['min_price'])) && (!empty($_POST['max_price'])) ) {
    $objects = get_terms(
        array(
            'taxonomy' => 'objects',
            'meta_query' => array(
                array(
                    'key' => 'object_price_object_price_value',
                    'value' => array($_POST['min_price'], $_POST['max_price']),
                    'compare' => 'BETWEEN',
                    'type'    => 'NUMERIC'
                )
            )
        )
   );
}






?>

<div class="objects py-5">
    <div class="container">
        <form class="objects-filter relative mb-5" method="post" id="filter">
            <div class="grid grid-cols-12 bg-white  border border-gray-300 rounded-md   min-h-[60px]">
                <div class="xl:col-span-4 md:col-span-6 col-span-12 border-r border-gray-300 objects-filter__price">
                    <div class="flex items-center h-full px-3">
                        <div class="text-sm font-medium">Стоимость:</div>
                        <div class="flex ml-3 flex-1">
                            <div class="flex border border-gray-300 rounded-sm h-8 w-1/2">
                                <input class="h-full pl-3 outline-none text-sm w-full" type="number" name="min_price" placeholder="от" id="minPrice">
                                <span class="px-3 flex justify-center items-center text-gray-300"><?php echo $currency; ?></span>
                            </div>
                            <div class="flex ml-2 border border-gray-300 rounded-sm h-8 w-1/2">
                                <input class="h-full pl-3 outline-none text-sm w-full" type="number" name="max_price" placeholder="до" id="maxPrice">
                                <span class="px-3 flex justify-center items-center text-gray-300"><?php echo $currency; ?></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-2 border-r border-gray-300 objects-filter__features">
                    <div class="cursor-pointer flex items-center justify-between h-full px-3">
                        <div class="text-sm font-medium">Особенности</div>
                        <div class="ml-4 mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-2 border-r border-gray-300 objects-filter__chars">
                    <div class="cursor-pointer flex items-center justify-between h-full px-3">
                        <div class="text-sm font-medium">Характеристики</div>
                        <div class="ml-4 mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="xl:col-span-2 border-r border-gray-300 objects-filter__class">
                    <div class="cursor-pointer flex items-center justify-between h-full px-3">
                        <div class="text-sm font-medium">Класс жилья</div>
                        <div class="ml-4 mt-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                            </svg>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="action" value="request">
                <div class="xl:col-span-2 objects-filter__submit">
                    <div class="flex justify-center items-center h-full">
                        <button class="w-full h-full bg-indigo-600 text-white px-1 rounded-tr-md rounded-br-md" type="submit">Отфильтровать</button>
                    </div>
                </div>
            </div>
            
        </form>
        <div class="objects__heading">
            <h2 class="objects__title text-3xl font-bold pb-5">Объекты недвижимости</h2>
        </div>
        <?php if($objects): ?>
        <div class="objects__list grid grid-cols-1 gap-y-12">
            <?php foreach ($objects as $object): ?>
                <?php
                    $object_images = get_field('object_gallery', $object);
                    $object_terms = get_field('object_terms', $object);
                    $object_price = get_field('object_price', $object);
                    $object_feautres = get_field('object_features', $object);
                    $object_floors = get_field('object_floors', $object);
                    $object_class = get_field_object('object_class', $object);
                    $object_variants = get_field('object_variants', $object);                  
                ?>
                <div class="objects__item col-span-1 shadow-md grid lg:grid-cols-2 grid-cols-1 lg:gap-x-5 border border-gray-300 rounded-xl hover:border-gray-100 transition duration-500 ease-in-out" href="<?php echo get_term_link($object -> term_id); ?>">
                    <div class="overflow-hidden group relative xl:col-span-1 lg:col-span-1 rounded-tl-xl lg:rounded-bl-xl lg:rounded-tr-none rounded-tr-xl bg-no-repeat bg-cover bg-center lg:h-auto h-[350px]" style="background-image: url('<?php echo $object_images[0]['url']; ?>')">
                        <div class="absolute opacity-0 bg-opacity-80 bg-black w-full h-full top-0 left-0 group-hover:opacity-100 transition-all duration-300 z-20 ">
                            <a href="#" class="w-full h-full flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" class="w-24 h-24 stroke-white group-hover:rotate-180 transition-all duration-300">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                            </a>
                        </div>
                        <?php if ($object_class): ?>
                            <?php if ($object_class['value']['value'] === 'economy'): ?>
                                <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-purple-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
                            
                            <?php elseif ($object_class['value']['value'] === 'comfort'): ?>
                                <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-green-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
                            
                            <?php elseif ($object_class['value']['value'] === 'buisness'): ?>
                                <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-blue-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
                            
                            <?php elseif ($object_class['value']['value'] === 'elite'): ?>
                                <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-orange-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
                            <?php endif; ?>
                        <?php endif; ?>
                    </div>
                    <div class="xl:col-span-1 lg:col-span-1 flex flex-col lg:p-0 lg:py-5 lg:pr-5 p-5">
                        <div>
                            <div class="flex sm:items-center items-start justify-between sm:flex-row flex-col">
                                <span class="sm:w-auto w-full font-bold text-xl"><?php echo $object -> name; ?></span>
                                <a href="#" class="sm:ml-5 sm:w-auto sm:mt-0 mt-1 border-b border-dotted border-gray-400 text-gray-400 text-xs hover:text-black hover:border-black">Посмотреть на карте</a>
                            </div>
                            <?php if ($object -> description): ?>
                            <div class="text-sm mt-2 text-gray-500">
                                <?php echo $object -> description; ?>
                            </div>
                            <?php endif; ?>
                            <div class="flex flex-wrap mt-3">
                                <?php if ($object_floors): ?>
                                <div class="flex sm:w-auto w-full">
                                    <div class="text-sm font-medium">Этажность:</div>
                                    <div class="text-sm ml-2"><?php echo $object_floors; ?></div>
                                </div>
                                <?php endif; ?>
                                <?php if ($object_terms): ?>
                                <div class="flex flex-wrap sm:w-auto sm:mt-0 mt-4 w-full sm:ml-4 ml-0">
                                    <div class="text-sm font-medium sm:w-auto w-full">Срок сдачи объекта:</div>
                                    <div class="text-sm sm:ml-2 sm:mt-0 sm:w-auto w-full mt-1"><?php echo $object_terms; ?></div>
                                </div>
                                <?php endif; ?>
                            </div>
                            <div class="flex flex-col mt-4">
                                <div class="text-sm font-medium">Варианты апартаментов:</div>
                                <div class="flex flex-wrap mt-2 text-sm items-center">
                                    <?php if ($object_variants): ?>
                                        <?php foreach($object_variants as $object_variant): ?>
                                            <div class="py-[2px] px-2 border bg-gray-100 border-gray-200 rounded-md mr-3"><?php echo $object_variant['label']; ?></div>
                                        <?php endforeach; ?>
                                    <?php endif; ?>
                                    <a href="#" class="text-blue-600 underline text-xs hover:text-blue-800 sm:w-auto sm:mt-0 w-full mt-2">Посмотреть апартаменты и планировки</a>
                                </div>
                            </div>
                            
                        </div>  
                        <div class="mt-12">
                            <?php if ($object_price): ?>
                                <div>
                                    <?php if ($object_price['object_price_mode']['value'] === 'from'): ?>
                                        <div class="text-2xl flex font-bold">
                                            <span class="lowercase mr-2">
                                                <?php echo $object_price['object_price_mode']['label']; ?>
                                            </span>
                                            <span class="price__from_value">
                                                <?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
                                            </span>
                                            <span class="ml-2">
                                                <?php echo $currency; ?>
                                            </span>
                                            
                                        </div>
                                    <?php elseif($object_price['object_price_mode']['value'] === 'range'): ?>
                                        <div class="text-2xl flex font-bold flex-wrap">
                                            <div class="flex sm:w-auto w-full">
                                                <span class="mr-2">
                                                    от
                                                </span>
                                                <span class="price__from_value mr-1">
                                                    <?php echo number_format($object_price['object_price_value_from'], 0, '.', ' '); ?>
                                                </span>
                                            </div>
                                            
                                            <div class="flex sm:ml-4 sm:w-auto w-full">
                                            <span class="mr-2">
                                                до
                                            </span>
                                            <span class="price__to_value">
                                                <?php echo number_format($object_price['object_price_value_to'], 0, '.', ' '); ?>
                                            </span>
                                            <span class="ml-2">
                                                <?php echo $currency; ?>
                                            </span>
                                            </div>
                                        </div>
                                    <?php elseif($object_price['object_price_mode']['value'] === 'fix'): ?>
                                        <div class="text-2xl flex font-bold">
                                            <span class="price__fix_value">
                                                <?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
                                            </span>
                                            <span class="ml-2">
                                                <?php echo $currency; ?>
                                            </span>
                                        </div>
                                    <?php elseif($object_price['object_price_mode']['value'] === 'stock'): ?>
                                        <div class="flex items-end flex-wrap">
                                            <div class="price__new text-2xl font-bold sm:w-auto w-full sm:order-1 order-2">
                                                <?php if ($object_price['object_price_value_stock_from']): ?>
                                                    <span>от</span>
                                                <?php endif; ?>
                                                <span class="price__new-value">
                                                    <?php echo number_format($object_price['object_price_value_new'], 0, '.', ' '); ?>
                                                </span>
                                                <span>
                                                    <?php echo $currency; ?>
                                                </span>
                                            </div>
                                            <div class="price__old text-base text-gray-400 line-through sm:ml-3 font-medium sm:w-auto w-full sm:order-2 order-1">
                                                <span class="price__old-value">
                                                    <?php echo number_format($object_price['object_price_value_old'], 0, '.', ' '); ?>
                                                </span>
                                                <span>
                                                    <?php echo $currency; ?>
                                                </span>
                                            </div>
                                        </div>
                                        <?php if ($object_price['object_price_value_stock_text']): ?>
                                            <div class="text-xs text-red-500 mt-1 mb-4">
                                                <?php echo $object_price['object_price_value_stock_text']; ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                            <?php if ($object_feautres): ?>
                                <div class="flex flex-wrap gap-3 mt-4 py-4 border-t border-b border-gray-200">
                                    <?php foreach ($object_feautres as $object_feautre): ?>
                                        <div class="text-xs py-1 px-2 border border-gray-400 text-gray-400 rounded-md"><?php echo $object_feautre; ?></div>
                                    <?php endforeach ; ?>
                                </div>
                            <?php endif; ?>
                            <div class="flex flex-wrap w-full mt-4 items-center">
                                <a href="#" class="sm:mr-2 mr-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-blue-600 border border-transparent text-white rounded-md hover:border-blue-800 hover:bg-blue-800  transition duration-300 ease-in-out">Подробнее об объекте</a>
                                <a href="#" class="sm:ml-2 sm:mt-0 mt-3 ml-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-white text-gray-600 border border-gray-600 rounded-md hover:bg-gray-600 hover:text-white transition duration-300 ease-in-out">Оставить заявку</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <?php else : ?>
        <div class="text-gray-400 text-sm">
            Объектов по заданным параметрам не найдено.
        </div>
        <?php endif;?>
        
    </div>
</div>

8
  • 1. Какой смысл в include_jquery(), если он уже есть по умолчанию? 2. Подключение скриптов обычно происходит на хук wp_enqueue_scripts, а не wp_footer, тем более что Вы его уже используете выше. 3. По поводу фильтра не совсем понятно, если честно, добавьте html разметку. 4. Для того чтобы на $('#filter').submit() страница не перезагружалась, добавьте в колбек e.preventDefault(). Так как сам фильтр скорее всего форма, то логично что страница при сабмите формы перезагружается, это стандартное поведение.
    – Simon
    12 дек 2022 в 11:18
  • @Simon Без него jQuery не работает, у меня просто чистая тема, можно сказать делаю сам, возможно из-за этого. HTML Фильтра добавил , там вместе с tailwind , поэтому так много стилей. Сейчас попробую добавить. 12 дек 2022 в 12:24
  • @Simon а правильно ли я делаю, что $('#filter').submit() , добавляю в success? Тогда куда добавлять e.preventDeafult()? Если я добавляю $('#filter').submit() перед $.ajax , а точнее кладу $.ajax внутрь данной функции, то и вовсе ничего не работает. 12 дек 2022 в 12:31
  • Просто сделайте wp_enqueue_script('jquery');. Вы бы объединили HTML код фильтра с PHP кодом фильтра и показали бы куда добавляете $('#filter').submit(). Но вообще, сейчас мне становится ясно что Вам все же нужно аяксом возвращать отсортированные записи, а не сабмитить форму с фильтром и делать это наверное нужно когда пользователь нажимает на кнопку "Отфильтровать" (то есть юзер жмет на кнопку, значения из фильтра улетают на бекенд, где на основе этих значений Вы возвращаете отсортированные/отфильтрованные записи).
    – Simon
    12 дек 2022 в 12:59
  • @Simon Я подозреваю, что мне в функцию get_filter, нужно добавить вывод самих условия фильтрации и вывод отфильтрованных объектов, сейчас они выводятся просто через foreach в html коде. Но код получается очень большой , чтобы его добавлять в функцию, там 300 строк, не знаю как быть, сейчас полный код catalog.php добавлю. 12 дек 2022 в 13:23

1 ответ 1

0

Окей, давайте с самого начала. Для начала немножко подправим Ваши подключения скриптов. Убираем функцию с подключением Вашего jQuery и добавляем в зависимости к Вашему скрипту jQuery, таким образом он подключится.

add_action( 'wp_enqueue_scripts', 'app_scripts' );

function app_scripts() {
    wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '', true );
    /**
     * AJAX
     */
    wp_localize_script( 'main', 'ajax',
        array(
            'url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ajax-nonce')
        )
    );
}

Немножко подправим Ваш JS код, так как Вы к примеру создаете тот же nonce, не никак его не используете + переделаем все это на сабмит формы, так как это более логично (если нужно изменить поведение, то дайте знать), добавим так же max price. В success добавим вставку HTML который приходит к нам с бекенда в нужный нам контейнер

jQuery(document).ready(function($) {
    $( "#filter" ).submit(function(e) {
        e.preventDefault(); // Отменяем дефолтное поведение при сабмите формы
        $.ajax({
            type: 'POST',
            url: ajax.url,
            data: {
                action: 'request',
                ajax_nonce: ajax.nonce,
                min_price: $("#minPrice").val(),
                max_price: $("#maxPrice").val(),
            },
            success: function(response) {
                $('.objects__list').html(response);
            }
        })
    });
});

Теперь подправим get_filter(). При помощи функции check_ajax_referrer() проверим nonce, затем используя функцию filter_input() примем и отфильтруем данные из $_POST и на основе имеющихся или не имеющихся min и max price сформируем аргументы для get_terms(). При отсутствии какого-либо из прайсов, сразу установим им стандартные значения в виде 0 и максимального, которое Вы используете 999999999999999999999999, таким образом не нужно писать кучу проверок.

if( wp_doing_ajax() ) {
    add_action( 'wp_ajax_request', 'get_filter' );
    add_action( 'wp_ajax_nopriv_request', 'get_filter' );
}

function get_filter() {
    check_ajax_referrer('ajax-nonce', 'ajax_nonce');
    $min_price = filter_input(INPUT_POST, 'min_price', FILTER_VALIDATE_INT) ?: 0;
    $max_price = filter_input(INPUT_POST, 'max_price', FILTER_VALIDATE_INT) ?: 999999999999999999999999;

    $objects = get_terms(
        array(
            'taxonomy' => 'objects',
            'meta_query' => array(
                array(
                    'key' => 'object_price_object_price_value',
                    'value' => array($min_price, $max_price),
                    'compare' => 'BETWEEN',
                    'type'    => 'NUMERIC'
                )
            )
    );

    /**
     * Внутри выносим Ваш HTML код который крутится в цикле, в темплейт парт
     * и третьим параметром передаем туда сам $object.
     * Путь к темплейт парту подправите на основе структуры папок Вашей темы.
     **/
    if ( ! empty( $objects ) ) {
        foreach ( $objects as $object ) {
            get_template_part( 'template-parts/object', 'loop', ['object' => $object] );
        }
    }
    

    wp_die();
}

Теперь перейдем к коду самого template part. С версии WordPress 5.5.0 принимает третий параметр в виде массива, доступ к которому можно получить из массива $args.

<?php
$object = $args['object'] ?? ''; // Получаем $object
$object_images = get_field('object_gallery', $object);
$object_terms = get_field('object_terms', $object);
$object_price = get_field('object_price', $object);
$object_feautres = get_field('object_features', $object);
$object_floors = get_field('object_floors', $object);
$object_class = get_field_object('object_class', $object);
$object_variants = get_field('object_variants', $object);                  
?>
<div class="objects__item col-span-1 shadow-md grid lg:grid-cols-2 grid-cols-1 lg:gap-x-5 border border-gray-300 rounded-xl hover:border-gray-100 transition duration-500 ease-in-out" href="<?php echo get_term_link($object -> term_id); ?>">
    <div class="overflow-hidden group relative xl:col-span-1 lg:col-span-1 rounded-tl-xl lg:rounded-bl-xl lg:rounded-tr-none rounded-tr-xl bg-no-repeat bg-cover bg-center lg:h-auto h-[350px]" style="background-image: url('<?php echo $object_images[0]['url']; ?>')">
        <div class="absolute opacity-0 bg-opacity-80 bg-black w-full h-full top-0 left-0 group-hover:opacity-100 transition-all duration-300 z-20 ">
            <a href="#" class="w-full h-full flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" class="w-24 h-24 stroke-white group-hover:rotate-180 transition-all duration-300">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                         <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                 </svg>
             </a>
         </div>
         <?php if ($object_class): ?>
             <?php if ($object_class['value']['value'] === 'economy'): ?>
                 <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-purple-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
             <?php elseif ($object_class['value']['value'] === 'comfort'): ?>
                 <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-green-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
              <?php elseif ($object_class['value']['value'] === 'buisness'): ?>
                  <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-blue-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
              <?php elseif ($object_class['value']['value'] === 'elite'): ?>
                  <div class="absolute right-2 top-2 text-xs ml-3 py-2 px-3 bg-orange-600 rounded-md text-white z-10"><?php echo $object_class['value']['label']; ?>-класс</div>
              <?php endif; ?>
          <?php endif; ?>
      </div>
      <div class="xl:col-span-1 lg:col-span-1 flex flex-col lg:p-0 lg:py-5 lg:pr-5 p-5">
          <div>
              <div class="flex sm:items-center items-start justify-between sm:flex-row flex-col">
                  <span class="sm:w-auto w-full font-bold text-xl"><?php echo $object -> name; ?></span>
                      <a href="#" class="sm:ml-5 sm:w-auto sm:mt-0 mt-1 border-b border-dotted border-gray-400 text-gray-400 text-xs hover:text-black hover:border-black">Посмотреть на карте</a>
              </div>
              <?php if ($object -> description): ?>
                  <div class="text-sm mt-2 text-gray-500">
                      <?php echo $object -> description; ?>
                  </div>
              <?php endif; ?>
              <div class="flex flex-wrap mt-3">
                  <?php if ($object_floors): ?>
                      <div class="flex sm:w-auto w-full">
                          <div class="text-sm font-medium">Этажность:</div>
                          <div class="text-sm ml-2"><?php echo $object_floors; ?></div>
                      </div>
                  <?php endif; ?>
                  <?php if ($object_terms): ?>
                      <div class="flex flex-wrap sm:w-auto sm:mt-0 mt-4 w-full sm:ml-4 ml-0">
                          <div class="text-sm font-medium sm:w-auto w-full">Срок сдачи объекта:</div>
                          <div class="text-sm sm:ml-2 sm:mt-0 sm:w-auto w-full mt-1"><?php echo $object_terms; ?></div>
                      </div>
                   <?php endif; ?>
               </div>
               <div class="flex flex-col mt-4">
                   <div class="text-sm font-medium">Варианты апартаментов:</div>
                   <div class="flex flex-wrap mt-2 text-sm items-center">
                       <?php if ($object_variants): ?>
                           <?php foreach($object_variants as $object_variant): ?>
                               <div class="py-[2px] px-2 border bg-gray-100 border-gray-200 rounded-md mr-3"><?php echo $object_variant['label']; ?></div>
                           <?php endforeach; ?>
                       <?php endif; ?>
                       <a href="#" class="text-blue-600 underline text-xs hover:text-blue-800 sm:w-auto sm:mt-0 w-full mt-2">Посмотреть апартаменты и планировки</a>
                   </div>
               </div>
           </div>  
           <div class="mt-12">
               <?php if ($object_price): ?>
                   <div>
                       <?php if ($object_price['object_price_mode']['value'] === 'from'): ?>
                           <div class="text-2xl flex font-bold">
                               <span class="lowercase mr-2">
                                   <?php echo $object_price['object_price_mode']['label']; ?>
                               </span>
                               <span class="price__from_value">
                                   <?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
                               </span>
                               <span class="ml-2">
                                   <?php echo $currency; ?>
                               </span>
                           </div>
                       <?php elseif($object_price['object_price_mode']['value'] === 'range'): ?>
                           <div class="text-2xl flex font-bold flex-wrap">
                               <div class="flex sm:w-auto w-full">
                                   <span class="mr-2">
                                       от
                                   </span>
                                   <span class="price__from_value mr-1">
                                       <?php echo number_format($object_price['object_price_value_from'], 0, '.', ' '); ?>
                                   </span>
                               </div>
                               <div class="flex sm:ml-4 sm:w-auto w-full">
                                    <span class="mr-2">
                                        до
                                    </span>
                                    <span class="price__to_value">
                                        <?php echo number_format($object_price['object_price_value_to'], 0, '.', ' '); ?>
                                    </span>
                                    <span class="ml-2">
                                        <?php echo $currency; ?>
                                    </span>
                                </div>
                             </div>
                             <?php elseif($object_price['object_price_mode']['value'] === 'fix'): ?>
                             <div class="text-2xl flex font-bold">
                                 <span class="price__fix_value">
                                     <?php echo number_format($object_price['object_price_value'], 0, '.', ' '); ?>
                                 </span>
                                 <span class="ml-2">
                                     <?php echo $currency; ?>
                                 </span>
                             </div>
                             <?php elseif($object_price['object_price_mode']['value'] === 'stock'): ?>
                             <div class="flex items-end flex-wrap">
                                 <div class="price__new text-2xl font-bold sm:w-auto w-full sm:order-1 order-2">
                                     <?php if ($object_price['object_price_value_stock_from']): ?>
                                         <span>от</span>
                                     <?php endif; ?>
                                     <span class="price__new-value">
                                         <?php echo number_format($object_price['object_price_value_new'], 0, '.', ' '); ?>
                                     </span>
                                     <span>
                                         <?php echo $currency; ?>
                                     </span>
                                 </div>
                                 <div class="price__old text-base text-gray-400 line-through sm:ml-3 font-medium sm:w-auto w-full sm:order-2 order-1">
                                     <span class="price__old-value">
                                         <?php echo number_format($object_price['object_price_value_old'], 0, '.', ' '); ?>
                                     </span>
                                     <span>
                                         <?php echo $currency; ?>
                                     </span>
                                  </div>
                               </div>
                               <?php if ($object_price['object_price_value_stock_text']): ?>
                                            <div class="text-xs text-red-500 mt-1 mb-4">
                                                <?php echo $object_price['object_price_value_stock_text']; ?>
                                            </div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>
                            <?php if ($object_feautres): ?>
                                <div class="flex flex-wrap gap-3 mt-4 py-4 border-t border-b border-gray-200">
                                    <?php foreach ($object_feautres as $object_feautre): ?>
                                        <div class="text-xs py-1 px-2 border border-gray-400 text-gray-400 rounded-md"><?php echo $object_feautre; ?></div>
                                    <?php endforeach ; ?>
                                </div>
                            <?php endif; ?>
                            <div class="flex flex-wrap w-full mt-4 items-center">
                                <a href="#" class="sm:mr-2 mr-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-blue-600 border border-transparent text-white rounded-md hover:border-blue-800 hover:bg-blue-800  transition duration-300 ease-in-out">Подробнее об объекте</a>
                                <a href="#" class="sm:ml-2 sm:mt-0 mt-3 ml-0 sm:w-auto w-full text-xs sm:py-2 py-3 px-3 sm:text-left text-center bg-white text-gray-600 border border-gray-600 rounded-md hover:bg-gray-600 hover:text-white transition duration-300 ease-in-out">Оставить заявку</a>
                            </div>
                        </div>
                    </div>
                </div>

И после этого в принципе можете так же отрефакторить Ваш изначальный вывод. Весь код копировать не буду, потому что на форматирование потратил уже кучу времени.

<div class="objects__heading">
    <h2 class="objects__title text-3xl font-bold pb-5">Объекты недвижимости</h2>
</div>
<?php if($objects) : ?>
    <div class="objects__list grid grid-cols-1 gap-y-12">
        <?php foreach ($objects as $object): ?>
            <?php get_template_part( 'template-parts/object', 'loop', ['object' => $object] ); ?>
        <?php endforeach; ?>
    </div>
<?php endif; ?>
2
  • Спасибо большое, сейчас будут пробовать) 14 дек 2022 в 15:11
  • 1
    Спасибо, всё заработало, узнал много нового, что вот так можно передавать переменные в частях шаблона) 15 дек 2022 в 7:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.