WordPress AJAX загрузка метаданных поста в модальном окне

Вопрос или проблема

<?php echo get_post_meta($post->ID, 'client_logo', true); ?>

( function( $ ) {
// AJAX загрузка информации о клиенте
    var page = 1;
    var loading = true;
    var load_posts = function(){
            $.ajax({
                type       : "GET",
                data       : {'Что должно быть здесь?'},
                dataType   : "html",
                url        : "ссылка на php файл, который возвращает данные? что должно быть в php файле?",
                success    : function(data){
                    } else {
                    }
                },
                error     : function(jqXHR, textStatus, errorThrown) {
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }
        });
    }

    // Загружать больше постов по клику
    $('a.popup').click(function() {
      loading = true;
      load_posts();
      return false;
    });
    load_posts();
} )( jQuery );

add_action("wp_ajax_clientLogoPopup", "clientLogoPopup");
add_action("wp_ajax_nopriv_clientLogoPopup", "clientLogoPopup");

    function clientLogoPopup()
    {
        $clientID = intval($_REQUEST['client_id']);
        if($clientID > 0){
            echo get_post_meta($clientID , 'client_logo', true);
            // или вы можете также показать другие метаполя здесь.
        }
        die();
    }

Ответ или решение

Вопрос: Как загружать метаданные постов WordPress с помощью AJAX в модальном окне?

В процессе разработки страницы с использованием WordPress, вы можете столкнуться с необходимостью динамически загружать информацию на клиентской стороне, например, при клике на логотип клиента. В данной инструкции мы рассмотрим, как загружать пост-метаданные в модальном окне с помощью AJAX, опираясь на ваш описанный случай.

Шаг 1: Создание метабокса и запоминание данных

Предположим, у вас уже есть метабокс, который вы используете для сохранения данных клиента. Это должно включать два поля: URL логотипа клиента и текстовую область для детальной информации. Вы можете сохранять данные в метаданные поста с помощью следующих функций:

function save_client_meta_box($post_id) {
    if (isset($_POST['client_logo'])) {
        update_post_meta($post_id, 'client_logo', sanitize_text_field($_POST['client_logo']));
    }
    if (isset($_POST['client_details'])) {
        update_post_meta($post_id, 'client_details', sanitize_textarea_field($_POST['client_details']));
    }
}
add_action('save_post', 'save_client_meta_box');

Шаг 2: Подготовка AJAX-обработчика

Добавим AJAX обработчики в файл functions.php вашей темы, чтобы обработать запрос к серверу и вернуть нужные данные:

add_action("wp_ajax_clientLogoPopup", "clientLogoPopup");
add_action("wp_ajax_nopriv_clientLogoPopup", "clientLogoPopup");

function clientLogoPopup() {
    $clientID = intval($_REQUEST['client_id']);
    if ($clientID > 0) {
        $clientDetails = get_post_meta($clientID, 'client_details', true);
        echo $clientDetails; // Вывод информации клиента
    }
    wp_die(); // Завершение выполнения скрипта после отправки данных
}

Шаг 3: Реализация AJAX-запроса на стороне клиента

Теперь перейдем к AJAX-запросу. Вам нужно создать JavaScript, который будет отправлять запрос на сервер по клику на логотип клиента:

(function($) {
    $(document).ready(function() {
        $('a.popup').click(function(e) {
            e.preventDefault();
            var clientID = $(this).data('client-id'); // Получаем ID клиента из атрибута data
            $.ajax({
                type: "GET",
                url: ajaxurl, // Стандартная переменная WordPress для AJAX
                data: {
                    action: 'clientLogoPopup',
                    client_id: clientID
                },
                success: function(data) {
                    $('#modal-content').html(data); // Помещаем данные в модальное окно
                    $('#modal').modal('show'); // Показываем модальное окно
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("Ошибка: " + textStatus + " - " + errorThrown);
                }
            });
        });
    });
})(jQuery);

Шаг 4: Настройка HTML-структуры

Представьте логотипы клиентов и создайте модальное окно в вашей теме, где будут отображаться загружаемые данные:

<div id="client-logos">
    <a href="#" class="popup" data-client-id="1"><img src="path-to-logo1.jpg" alt="Client 1"></a>
    <!-- Повторите для других клиентов, изменяя идентификаторы -->
</div>

<!-- Модальное окно -->
<div id="modal" style="display:none;">
    <div id="modal-content"></div>
</div>

Шаг 5: Стилевые настройки и улучшение пользовательского интерфейса

Не забудьте добавить CSS для отображения модального окна и его содержания. Вы можете использовать Bootstrap или создать собственные стили, чтобы модальное окно выглядело привлекательно.

Заключение

Таким образом, вы сможете динамически загружать метаданные клиентов в модальное окно при клике на логотип. Проверьте, что все ссылки и идентификаторы совпадают, чтобы избежать ошибок. Используя AJAX в WordPress, вы улучшите взаимодействие пользователя с вашим сайтом. Если у вас остались вопросы или потребности в дальнейшей помощи, не стесняйтесь обращаться за поддержкой.