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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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