使用 AJAX 重新加载 .twig 模板

Question

我正在结合使用 https://github.com/gmrchk/swup 和 Twig/Timber。它工作得很好，但是，我已经意识到，每当我到达一个新页面时，我的 if 子句中的 none 就可以工作，因为 SWUP 无法从我的 twig 文件中读取 if 参数。（动态加载页面的JS库）

例如：

{% if fn('is_single') %}
<div class="progress"></div>
{% endif %}

当我最初在非单一 post 页面上加载页面时根本不会加载。

我的想法是通过 AJAX 调用重新渲染 header.twig（上面提到的 if 子句所在的位置）。

AJAX 调用看起来像这样：

function swupReplaceHeader() {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'spx_replace_header',
        },
        success: function (output) {
            console.log(output);
        }
    });
}

swupReplaceHeader();
document.addEventListener('swup:clickLink', swupReplaceHeader);

它被包裹在一个事件侦听器中，每次我点击 link。

WP 函数看起来像这样：

add_action('wp_ajax_spx_replace_header', 'spx_replace_header');
add_action('wp_ajax_nopriv_spx_replace_header', 'spx_replace_header');
function spx_replace_header()
{
    $context = Timber::get_context();
    Timber::render('templates/header.twig', $context);
    wp_send_json_success(['AJAX is working']);
}

我添加了发送 JSON 消息来测试我的 AJAX 呼叫是否正常。

现在，每当我在没有 Timber 代码的情况下测试 AJAX 调用时，它都在工作，但是当我将两条 Timber 代码行添加到该函数时，没有任何反应 - 甚至 JSON 消息也没有出现.我也尝试了 Timber::compile，但没有任何运气。

希望有人能帮帮我..

最好的，丹尼斯

Answer 1

aj-adl 在 Github 上发布的答案：

Hey Dennis,

You're making a call to wp-admin/admin-ajax.php, so conditionals like is_ajax() will return true but is_single() will definitely not.

Remember that PHP shuts down at the end of each request, discarding state etc, so the call to the admin-ajax.php script is a completely isolated process from the one that's delivered the initial markup for the page, and doesn't know what page it's being called from etc

For this reason, you'd want to pass in any data you'd need for conditionals, probably as a query string parameter.

PHP:

add_action('wp_ajax_nopriv_spx_replace_header', 'spx_replace_header');

function spx_safe_get_string( $key )
{
    if ( ! isset( $_GET[ $key ] ) ) return '';
   return sanitize_text_field( $_GET[ $key ] );
}

function spx_replace_header()
{
    $context = Timber::get_context();
    // Set this in the context, so we can access it in our twig file easily
    $context[ 'type' ] = spx_safe_get( 'my_page_type' );
    Timber::render('templates/header.twig', $context);
}

JS:

window.addEventListener('load', function() {
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'spx_replace_header',
            my_page_type: 'single',
        },
        success: function (data) {
            console.log(data);
        }
    });
})

树枝：

{% embed "objects/header.twig" with {'hamburger': 'hamburger--spring'} %}
{% endembed %}

{% if type == 'single' %}
    <div class="progress"></div>
{% endif %}

{% embed "objects/header.twig" with {'id': '--sticky', 'hamburger': 'hamburger--spring'} %}
{% endembed %}

使用 AJAX 重新加载 .twig 模板

Reload .twig template with AJAX

ajax

wordpress

twig

timber