Question

我确保我正确地采用这种方式，因为WooCommerce有点复杂化。首先，我将解释我在寻找什么。我想要它，所以当管理员点击我在WooCommerce订单页面中创建的自定义按钮时，它会向他们显示特定订单的跟踪编号。我已经完成并运行得很好。现在我还想做的是用他们的用户名打电话给我的api，然后用管理员用户名和他们访问的跟踪号将其发布到我的日志中。然而，我遇到了几个问题，其中一些我尚未遇到过，但感觉好像它们可能是一个问题。所以我在一个函数中有链接，循环每个订单以显示跟踪按钮，而另一个函数中的css / ajax用于发布在head部分中。所以这里有一些问题：

1。）我怎样才能使它只需要一个jQuery实例？我不希望它使用多个实例来泛滥源代码。

2。）我想也许只是在head部分发布一次就可以了，但如果它不在链接按钮功能中那么如果每个订单ID的变量不同，jQuery将如何获得正确的值，因为它将不再使用jQuery循环遍历每个实例？

3.。）如何从其他主机完成此调用，以便我不需要将API上传到每个域？

这是我到目前为止的代码，请告诉我是否有更好的方法来完成这项任务。提前谢谢。

add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
function add_custom_order_actions_button( $order ) {
    // Username
    $user_info = get_userdata($order->user_id);
    // Tracking
    $tracking_number = get_post_meta( $order->get_id(), '_disquy_tracking_number', true );
    if( empty($tracking_number) ) return;
    // Prepare the button data
    $url    = esc_url('https://track.disquy.com/'.$tracking_number.'?');
    $name   = esc_attr( __('Tracking', 'woocommerce' ) );
    $class  = esc_attr( 'tracking' );

    printf( '<a class="button wc-action-button wc-action-button-%s %s" href="%s" title="%s" id="apicall">%s</a>', $class, $class, $url, $name, $name );
}

add_action( 'admin_head', 'add_custom_order_actions_button_css' );
function add_custom_order_actions_button_css() {
    echo '<script type="text/javascript">

            $("#apicall").click(function(event){
            event.preventDefault();
            $.post("adminlog.php", {username : ' . $user_info . ', tracking : ' . $tracking_number . '}, function(response){
                alert(response);
            });
            });

        </script>
        <style>.wc-action-button-tracking::after { font-family: woocommerce !important; content: "\e01a" !important; }</style>
}

Answer 1

实际上，你根本不需要jQuery！自从我使用基于PHP的CMS以来，已经有一段时间了，但这是您可以做的另一个例子。只需检查PHP语法以确保它是正确的。没有jQuery。纯香草JS。使用本机Fetch API来处理AJAX请求。

add_action( 'woocommerce_admin_order_actions_end', 'add_custom_order_actions_button', 100, 1 );
    function add_custom_order_actions_button( $order ) {

        // UserID
        $user_id = get_userdata($order->user_id);

        // Tracking Data
        $tracking_data = get_post_meta($order->get_id(), '_disquy_tracking_number', true );

        if(empty($tracking_data)) return;

        $base_url = 'https://track.disquy.com';
        $url = esc_url(.$base_url.'/'.$tracking_data.'?');
        $name = esc_attr( __('Tracking', 'woocommerce' ) );
        $class = esc_attr( 'tracking' );

        printf('<a class="button wc-action-button wc-action-button- 
            %s %s" href="%s" title="%s" id="apicall">%s</a>', 
            $class, $class, $url, $name, $name );
}
add_action( 'admin_head', 'add_custom_order_actions_button_css' );
    function add_custom_order_actions_button_css() {
    echo '<script type="text/javascript">

    const elem = document.getElementById('#apicall')
    elem.addEventListener('click', postUserTransaction)

    const postUserTransaction = (e) => {
        e.preventDefault();
        const postData (e) => {
            event.preventDefault();
            const tittle = elem.title;
            const body = document.body.value;

        return fetch('adminlog.php', {
            method: 'POST',
            headers : new Headers({
                "username":".$user_id.",
                "tracking":".$tracking_data.'
            })
        })
        .then(res => res.json())
        .then(data => data)
        .then(data => {
            console.log(data)
            alert(data)
            return data
        })
        .catch(err => new Error(err))
      }
}
</script>

<style>.wc-action-button-tracking::after { font-family: woocommerce !important; content: "\e01a" !important; }</style>

}

通过使用addEventListener方法而不是定义内联HTML的onclick方法。您应该能够在单独的文件夹中编写所有JS脚本，然后使用钩子导入它们。但是，它已经有一段时间了。如果您正在寻找DOM变量的动态呈现，那么jQuery将无法工作。它只适用于渲染的DOM。 Vanilla JS可以为您解决这个问题，但是您需要一些aditional配置。老实说，我认为必须使用PHP在更新时注入DOM元素。然后简单地编写eventListeners来更改DOM，然后进行必要的更新。
如前所述，请将您的脚本文件包含在其他地方，然后通过PHP和您的WooCommerce API将它们挂钩到页面中。

干杯！

编辑：

您需要修改获取和承诺链以向您发送PHP脚本，然后编辑包含警报的then块以将响应数据添加到数据库。这是另一个使用fetch使用PHP进行POST的示例。我不知道你必须使用哪些变量和钩子来使用你的Res数据进行最后的数据库更新。这是你应该拥有的东西。

fetch("http://www.example.org/submit.php", {
 method: "POST",
 headers: {
    "Content-Type": "application/x-www-form-urlencoded"
 },
 body: "key=val&key2=val2"
 })
 .then(res => res.json()),
 .then(res => {
     if (res.ok) {
         alert("Perfect! Your settings are saved.");
     } else if (res.status == 401) {
         alert("Oops! You are not authorized.");
     }
 }, (e) => {
     alert("Error submitting form!");
  });

Onclick链接POST到REST

1 个答案: