在提交按钮之前将小部件添加到 WooCommerce 结账订单审核

Question

我正在尝试将 Yotpo Rewards Checkout 小部件添加到 WooCommerce 结账表单中显示交易总额的区域正下方，以获得更好的用户体验。但是，当我将当前使用的脚本添加到functions.php时，它会显示小部件几秒钟，然后消失。

Yotpo 团队似乎对此感到困惑，并表示加载程序脚本未正确渲染，但我每次都看到正确数量的奖励积分，即使我调整了积分，并且我尝试添加加载程序脚本就在小部件代码所在的代码中，它仍然消失了。

我还查看了 DOM，并可以确认加载器脚本包含正确的信息。这是我当前在主题的functions.php 文件中的实现：

function add_yotpo_widget_to_checkout() {
    echo '<div><script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/<our-key>" async></script><div class="yotpo-widget-instance" data-yotpo-instance-id="<our-instance-id>"></div></div>';
}
add_action('woocommerce_review_order_before_submit', 'add_yotpo_widget_to_checkout');

如上所述，小部件确实显示并且工作正常，但几秒钟后消失。

Answer 1

由于订单审核部分是 Ajax 刷新的，因此您需要以不同的方式进行：

// Utility function: Get/Output Yotpo widget html
function get_yotpo_widget_html() {
    $yotpo_key = '<our-key>'; // Define the key
    $yotpo_instance_id = '<our-instance-id>'; // Define the instance ID
    return '<script src="https://cdn-widgetsrepository.yotpo.com/v1/loader/'.$yotpo_key.'" async></script>
    <div class="yotpo-widget-instance" data-yotpo-instance-id="'.$yotpo_instance_id.'"></div>';
}

// Display Yotpo widget on checkout
add_action('woocommerce_review_order_before_submit', 'add_yotpo_widget_to_checkout');
function add_yotpo_widget_to_checkout() {
    echo '<div class="yotpo-widget-container">'.get_yotpo_widget_html().'</div>';
}

// Get refreshed fragments for displayed Yotpo widget on checkout (mandatory)
add_filter( 'woocommerce_update_order_review_fragments', 'update_yotpo_widget_checkout_fragments');
function update_yotpo_widget_checkout_fragments( $fragments ){
    // We add the selector class of our wrapper div as array key
    $fragments['.yotpo-widget-container'] = get_yotpo_widget_html();
    
    return $fragments;
}

代码位于子主题的 function.php 文件中（或插件中）。

它应该适用于经典结账，但不适用于新的结账区块。

相关：在 WooCommerce 更新结帐事件上动态更新自定义内容