Question

我的页面上有包含div的代码。在此div中，当我单击同一页面上的链接时，我想放置WooCommerce短代码的结果，例如[products category="slug-of-category"]。类别列表（空链接）在div的左侧。当我单击其中的一个时，我想进行Ajax调用，以将div中的原始结果替换为相同的短代码，但替换为选定的类别。

在php文件中，我具有以下内容：

<div id="parentCatSlug-<?= $parentslug ?> > 
<ul class="categoryUL">
    <li id='categoryLI-ic-controller-hot-swap-controller''>
    <a id='ic-controller-hot-swap-controller' href="#">Hot Swap Controller</a></li>
    <li id='categoryLI-ic-controller-pfc-controller''>
    <a id='ic-controller-pfc-controller' href="#">PFC Controller</a></li>
    <li id='categoryLI-ic-controller-pol-controller''>
    <a id='ic-controller-pol-controller' href="#">POL Controller</a></li>
</ul></div>

<div id="productBox"> <p>Select a catagory to the left to display the products here.</br></a>
<?php
  echo "<h3>3x5 Openframe Products:</h3>";
  echo do_shortcode ("[products category='ac-dc-power-supply-3-x-5-openframe']"); ?>
</div>

在functions.php中，我具有以下内容：

$script = 'http://pmbus.staging.wpengine.com/wp-content/themes/PMBus/includes/js/product_shortcode.js';
wp_register_script( 'ajax-script', $script, array ('jquery') ); 
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); 
wp_enqueue_script( 'ajax-script' );

add_action( 'wp_ajax_nopriv_product_shortcode', 'show_product_list' ); 
add_action( 'wp_ajax_product_shortcode', 'show_product_list' );

在/js/product_shortcode.js中，我具有以下内容：

jQuery(document).ready( function() {

jQuery.fn.show_product_list() {
    gciAlert ("in product_shortcode function")
    var post_id = jQuery(this).data('id');
    jQuery.ajax({
        type : "post",
        url : ajax-script.ajaxurl,
        data : {
            action: "do_shortcode ('[products "integrated-devices-microcontroller"]')",
            post_id : post_id
        },
        success: function(response) {
            if(response.type == "success") {
                var subcat_txt = jQuery(e.target).text()
                jQuery("#productBox").html("<h3>"+subcat_txt+"</h3")
                jQuery("#productBox").html(response)
            }
            else {
                alert("The products could not be listed")
            } // end response
        } // end success:function
    }) // end jQuery.ajax    }) //end jQuery    
    die();
} // end function

}) // end document ready

第一个问题是，当我单击其中一个链接时，jQuery.fn.show_product_list（）不会触发。

第二个问题是，即使我对自己想做的事情编码正确，也感到困惑。这是我第一次尝试使用Ajax / jQuery / WordPress，并且整周都在阅读帖子和观看视频，但似乎无法将它们放在一起。

Answer 1

重新整理我的答案，希望能更好地解释并且仍然有帮助。

我也没有解决您关于show_product_list未触发点击的第一个问题。

我在您提供的代码中看不到任何提示点击时触发的东西。

您尝试过吗：

jQuery('a').on('click', function(){

    jQuery(this).show_product_list();

});

对于 product_shortcode.js 和您的AJAX，回到AJAX问题，您传递"do_shortcode ('[products "integrated-devices-microcontroller"]')"的方式由于两种原因而无效：

该字符串已损坏，因为需要对双引号进行转义。
您不能传递这样的函数和参数。

简而言之，在下面的代码中，您将action和post_id发送到 admin-ajax.php ：

data : {
   action: "do_shortcode ('[products "integrated-devices-microcontroller"]')",
   post_id: post_id
},

admin-ajax.php 尝试执行您发送的操作。

来自 admin-ajax.php ：

if(! has_action( 'wp_ajax_' . $_REQUEST['action'] )){....

$ _ REQUEST ['action'] 来自我们最初谈论的(action: "do_shortcode ('[products "integ.....)代码片段。

因此，Wordpress正在寻找类似的动作

'wp_ajax_nopriv_do_shortcode ('[products "integrated-devices-microcontroller"]')' 
'wp_ajax_do_shortcode ('[products "integrated-devices-microcontroller"]')'

如您所见，由于以下几个原因，它无法解决问题。

定义钩子wp_ajax_my_action和wp_ajax_nopriv_my_action时， my_action 是您随AJAX请求发送的操作。

在/js/product_shortcode.js 中：

jQuery(document).ready( function() {

jQuery.fn.show_product_list() {
    gciAlert ("in product_shortcode function")
    var post_id = jQuery(this).data('id');
    jQuery.ajax({
        type : "post",
        url : ajax-script.ajaxurl,
        data : {
            action: "show_product_list", // This is the action you pass
            post_id : post_id, // This goes along with it
            shortcode: "[your shortcode here]" // You can pass the shortcode

        },
        success: function(response) {

            console.log(response); // See the response

            if(response.type == "success") {
                var subcat_txt = jQuery(e.target).text()
                jQuery("#productBox").html("<h3>"+subcat_txt+"</h3")
                jQuery("#productBox").html(response)
            }
            else {
                alert("The products could not be listed")
            } // end response
        } // end success:function
    }) // end jQuery.ajax    }) //end jQuery    
    die();
} // end function

}) // end document ready

在您的functions.php中：

$script = 'http://pmbus.staging.wpengine.com/wp-content/themes/PMBus/includes/js/product_shortcode.js';
wp_register_script( 'ajax-script', $script, array ('jquery') ); 
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); 
wp_enqueue_script( 'ajax-script' );

// When defining the hooks below, I made sure to use show_product_list
// because that is the action we sent.
// Once the action is found, it's executed, and the function show_product_list runs. 
add_action( 'wp_ajax_nopriv_show_product_list', 'show_product_list' ); 
add_action( 'wp_ajax_show_product_list', 'show_product_list' );

function show_product_list(){
    // Here you can get the shortcode you sent like
    $shortcode = $_POST['shortcode'];

    // Then do the shortcode
    echo do_shortcode($shortcode);
}

我希望这更有意义。

Wordpress中的Ajax / jQuery无法运行，但控制台上没有错误

在php文件中，我具有以下内容：

在functions.php中，我具有以下内容：

在/js/product_shortcode.js中，我具有以下内容：

1 个答案: