Как получить доступ к пользовательским мета-данным записи из JavaScript

На чтение 4 мин Опубликовано 12.01.2025

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

Я создал пользовательские мета-поля для своих продуктов WooCommerce. Однако плагин, который я использую (Advanced Woo Search), написан на JavaScript, и мне нужно получить доступ к переменным PHP. Я использовал wp_localize_script() для этого. Однако на фронтэнде мои данные не отображаются.

Вот мой PHP код:

    function js_enqueue_scripts() {
    global $post;
    $text2 = get_post_meta( $post->ID, '_load_speed_field', true );
    $text3 = get_post_meta( $post->ID, '_tyre_brand_field', true );
    $text4 = get_post_meta( $post->ID, '_brand_model_field', true );
    $text5 = get_post_meta( $post->ID, '_run_flat_field', true );
    // Поместите ваши переменные в массив
    $arrayname = array(
        'text1' => $text1,
        'text2' => $text2
    );

    // Регистрация скрипта
    wp_register_script( "advanced-woo-search-pro", plugin_dir_url( __FILE__ ) . "/assets/js/common.js" );

    // Загрузка скрипта на фронтэнде
    wp_enqueue_script( "advanced-woo-search-pro" );

    // Локализация скрипта и передача данных
    wp_localize_script( "advanced-woo-search-pro", "prefix", $arrayname );
}

// Функция работает на хуке wp_enqueue_scripts
add_action( "wp_enqueue_scripts", "js_enqueue_scripts" );

И вот мой JavaScript для доступа к данным из плагина:

html += result.title + prefix.text1 + prefix.text2;

Я нашел этот фильтр в документации плагина.

Может ли кто-нибудь помочь мне объединить мои пользовательские поля с результатом поиска по названию?

Спасибо.

Ваш скрипт должен выглядеть так.

function js_enqueue_scripts() {
    global $post;
    $text2 = get_post_meta( $post->ID, '_load_speed_field', true );
    $text3 = get_post_meta( $post->ID, '_tyre_brand_field', true );
    $text4 = get_post_meta( $post->ID, '_brand_model_field', true );
    $text5 = get_post_meta( $post->ID, '_run_flat_field', true );
    // Поместите ваши переменные в массив
    $arrayname = array(
        'text3' => $text3,
        'text2' => $text2
    );
    // Загрузка скрипта на фронтэнде
    wp_enqueue_script( 'aws-script' );

    // Локализация скрипта и передача данных
    wp_localize_script( 'aws-script', "prefix", $arrayname );
}
// Функция работает на хуке wp_enqueue_scripts
add_action( "wp_enqueue_scripts", "js_enqueue_scripts" );

Common.js уже подключен плагином, вам не нужно его повторно регистрировать и подключать.

После добавления этого кода в файл functions.php вашей активированной темы вы можете получить доступ к переменной в любом файле JavaScript следующим образом.

html += result.title + prefix.text3 + prefix.text2;

Пожалуйста, проверьте это решение и дайте знать, если оно работает.

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

Чтобы получить доступ к пользовательским метаданным поста из JavaScript, необходимо использовать функцию wp_localize_script(). Это позволяет передавать PHP-переменные в JavaScript-код. В данном случае, пользователь создаёт собственные метаполя для продуктов WooCommerce и пытается использовать их в плагине Advanced Woo Search, написанном на JavaScript.

Теория:

Функция wp_localize_script() используется для передачи данных из PHP в JavaScript в WordPress. Она принимает три аргумента: идентификатор скрипта, имя JavaScript-объекта и массив данных, которые необходимо передать. Это полезно, когда вам нужно использовать серверные данные в клиентских скриптах, что часто встречается в сценариях, связанных с пользовательскими метаданными или настройками темы.

Пример:

Рассмотрим пример кода, предложенный пользователем:

function js_enqueue_scripts() {
    global $post;
    $text2 = get_post_meta( $post->ID, '_load_speed_field', true );
    $text3 = get_post_meta( $post->ID, '_tyre_brand_field', true );
    $text4 = get_post_meta( $post->ID, '_brand_model_field', true );
    $text5 = get_post_meta( $post->ID, '_run_flat_field', true );

    // Помещаем переменные в массив
    $arrayname = array(
        'text2' => $text2,
        'text3' => $text3,
        // Добавьте другие переменные по мере необходимости
    );

    // Подключаем скрипт к фронтенду
    wp_enqueue_script( 'aws-script' );

    // Локализируем скрипт и передаем данные
    wp_localize_script( 'aws-script', 'prefix', $arrayname );
}

add_action( 'wp_enqueue_scripts', 'js_enqueue_scripts' );

В этом коде данные мета-полей берутся из базы данных и добавляются в массив $arrayname, который затем передаётся в JavaScript через wp_localize_script().

Применение:

При использовании данного подхода вы сможете обращаться к переданным данным напрямую в вашем JavaScript-коде. Например, вы можете обработать данные следующим образом:

html += result.title + prefix.text2 + prefix.text3;

Убедитесь, что скрипт, который пытается получить доступ к локализованным данным, действительно загружается после выполнения wp_localize_script(). Также обратите внимание на корректность имён переменных и отсутствие конфликтов с другими скриптами, так как это может вызвать ошибки или неожиданные поведения.

Пожалуйста, внимательно проверьте функциональность после внесения изменений, чтобы удостовериться, что данные отображаются корректно. Если проблема не решена, проверьте консоль браузера на наличие ошибок, связанных с доступом к объекту prefix.