使用ajax從wordpress數據庫獲取產品

Question

我使用WordPress構建自定義產品頁面（page1.php）。

我在自定義產品頁面（page1.php）上使用Ajax來調用其他頁面，其中包含下面的代碼（page2.php），使用下面的代碼從wordpress數據庫獲取產品。

<?php 
    $args = array(
     'post_type'  => 'product', 
     'posts_per_page' => 10, 
     'product_cat' => 'hoodies' 
    ); 

    $loop = new WP_Query($args); 

    while ($loop->have_posts()) : $loop->the_post(); 
     global $product; 
     echo '<br /><a>' . woocommerce_get_product_thumbnail().' '.get_the_title().'</a>'; 
    endwhile; 

    wp_reset_query(); 
?> 

上述實際代碼工作正常，當我不把它通過AJAX（即直接從www.localhost/WordPress的/使page2.php加載它），但是當我把它通過Ajax的page1.php中，我得到以下錯誤;

致命錯誤：未捕獲的錯誤：\ XAMPP \ htdocs中\ WordPress的，完全定製\可溼性粉劑內容\主題\店面\使page2.php：9堆棧跟蹤：＃0類 'WP_Query' 沒有發現在C {main}拋出第9行C：\ xampp \ htdocs \ wordpress-fully-custom \ wp-content \ themes \ storefront \ test-page2.php

請問我該如何解決這個問題？

感謝

Answer 1

當你直接查看該頁面時，WP_Query類多地得到某種方式進口。由於這不是通過AJAX發生的，您可能希望將其明確包含在該頁面中。可以這樣做：

include_once "path/to/wp-includes/class-wp-query.php"; 

Answer 2

在這裏，我已經嘗試過我的主題，它的工作很好！

希望這會爲你工作。

的AJAX調用代碼素文字：

jQuery('#productDataSubmit').click(wc_load_all_products); 
    function wc_load_all_orders() { 
     jQuery("#wc-products").html(""); 

     jQuery.ajax({ 
      type: "POST", 
      url: ajax_details.ajax_url, 
      data: {action: 'get_wc_products'}, 
      success: function (data) { 
       var products = jQuery.parseJSON(data); 
       jQuery('#wc-products').html(products.product_html); 
      } 
     }); 
     return false; 
    } 

行動AJAX調用函數返回的產品（添加到functions.php的這個）

add_action('wp_ajax_get_refund_data', 'get_wc_products'); 
    add_action('wp_ajax_nopriv_get_refund_data','get_wc_products'); 

功能讓產品（添加到功能這一點。 php）

 /** 
    * AJAX function for products. 
    */ 
    function get_wc_products() { 
    $html=""; 
    $varition_args = array(
      'post_type' => 'product', 
      'posts_per_page' => 10, 
      'product_cat' => 'bags' 
     ); 
     $variation_query = new WP_Query($varition_args); 
    } 


    if ($variation_query->have_posts()) { 
      while ($variation_query->have_posts()) { 
       $variation_query->the_post(); 
       global $product; 
       $html.= '<tr>'; 
       $html.= '<td>'.get_the_ID().'</td>'; 
       $html.= '<td>'.get_the_title().'</td>'; 
       $html.= '<td>'.$product->get_price_html().'</td>'; 
       $html.= '</tr>'; 
      } 
    } 

    //Returns records 
    $data = []; 
    $data['product_html'] = $html; 
    } 

Answer 3

這裏有大量的關於wordpress ajax的教程。這些TUTS你更好看....

Wordpress Official Ajax Tutorial

Sitepoint Ajax Tutorial With Some Good Examples

Code Tuts Tutorial For Frontend Ajax

Smashing Magazine Ajax Tutorial

而現在，讓我們給你在這裏快速AJAX例如：

jQuery(document).ready(function(){ 
    jQuery(".ajax_button_to_click").click(function(event){ 
    // event.preventDefault(); enable this if you want to stop click 
    behavior 
    var ajax_form_input_value = jQuery('#ajax_input_value').val(); 
    var ajax_text = jQuery('#ajax_text_value').text(); 
    jQuery.ajax({ 
     method: "POST", // http request method 
     url: ajaxurl, // indicates wp-ajax.php file which will handle the request 
     data: {'action':'ajax_function_name', //function name which will handle the ajax request inside your plugin or theme's functions.php file 
       'ajax_text_data':ajax_text, //text data to send with the ajax request 
       'ajax_form_value: ajax_form_input_value ' }, //form input data to send with the ajax request 
     success:function(data) { //on ajax request success run all inside this method 
     alert(data); 
    }, 
    error: function(errorThrown){ //if ajax fails then run this method 
     console.log(errorThrown); 
     } 
    }); 
    }); 
}); 

現在，在後端的ajax請求處理部分。

首先添加的js ajaxurl VAR：

add_action('wp_head', 'prefix_ajaxurl'); 

function prefix_ajaxurl() { 
    echo '<script type="text/javascript"> 
     var ajaxurl = "' . admin_url('admin-ajax.php') . '"; 
    </script>'; 
} 

其次加入阿賈克斯行動功能

function ajax_function_name(){ // function name should be same defined in ajax request action var. 
    $text = $_POST['ajax_text_data']; 
    $input_data = $_POST['ajax_form_value']; 
    echo $text; 
    echo $input_data; 
    die(); //you must write die(); to avoid echoing extra 0; 
} 
add_action('wp_ajax_ajax_function_name', 'ajax_function_name'); ?>