1

I'm currently on the Woocommerce archive-product.php template file (say shop page or product category page). On the click of the post (or product), a GET query is added to the title of the same page, changing the page into a slider instead of a post list. I need to change the content of the page using AJAX, instead of refreshing and adding a GET query. I tried including the template part, but it keeps saying that no posts are found.

I keep reading that I might need to load wp-load.php or some other method. What's the most efficient method to do this? I want to learn how to the get_template_part() to return to me what it would return on a specific URL. (I'll need to retrieve the single-product.php later on using a similar method).

Here is my server side script for the AJAX:

// AJAX function to show slider on product archive
function cienna_show_slider_callback() {
  define('WP_USE_THEMES', false);
  require_once($_SERVER['DOCUMENT_ROOT'].'/wp/wp-load.php');
  get_template_part( 'woocommerce/archive', 'product' );
  wp_die();
}
add_action( 'wp_ajax_cienna_show_slider', 'cienna_show_slider_callback' );
add_action( 'wp_ajax_nopriv_cienna_show_slider', 'cienna_show_slider_callback' );

Here is my client side script for the AJAX (I'm not including the extra GET variable to not confuse anyone; I just want the template page to work as naturally as it would if its page was visited):

// JavaScript to be fired on the product archive page
$('ul.products li.product a').on('click', function(event) { // AJAX get content of page
  event.preventDefault();
  $.get( ajax_object.ajax_url, { action: "cienna_show_slider" }, function( data ) {
    console.log(data);
  })
});

Just in case anyone asks, here's the archive-product template:

<?php get_template_part('templates/page', 'header');

    /**
    * woocommerce_before_main_content hook
    *
    * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
    * @hooked woocommerce_breadcrumb - 20
    */
    do_action('woocommerce_before_main_content');

    do_action( 'woocommerce_archive_description' );

    if ( have_posts() ) {

        /**
         * woocommerce_before_shop_loop hook
         *
         * @hooked woocommerce_result_count - 20
         * @hooked woocommerce_catalog_ordering - 30
         */
        do_action( 'woocommerce_before_shop_loop' );

        woocommerce_product_loop_start();

        woocommerce_product_subcategories();

        while ( have_posts() ) {

            the_post();

            get_template_part( 'woocommerce/content', 'product' );

        }

        woocommerce_product_loop_end();

        /**
         * woocommerce_after_shop_loop hook
         *
         * @hooked woocommerce_pagination - 10
         */
        do_action( 'woocommerce_after_shop_loop' );

    } elseif ( ! woocommerce_product_subcategories( array( 'before' => woocommerce_product_loop_start( false ), 'after' => woocommerce_product_loop_end( false ) ) ) ) {

    wc_get_template( 'loop/no-products-found.php' );

    }

  /**
   * woocommerce_after_main_content hook
   *
   * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
   */
  do_action('woocommerce_after_main_content');

?>

UPDATE: So, since I updated the AJAX call from $.ajax to $.get and included wp-load, it runs fine, except that it still keeps saying that no posts are found.

  • 1
    Have a look to github.com/Giuseppe-Mazzapica/ATP ;) – gmazzap Jan 13 '15 at 14:23
  • @G.M. Haha, way ahead of you, but the purpose of that plugin is to load the content after the page, not do what I want to do. Also it's kind of pointless since I'll be using jQuery PJAX. – yaharga Jan 13 '15 at 14:31
  • 1
    I send you there to have a look at plugin code and how there your problem is solved. – gmazzap Jan 13 '15 at 15:37
  • 1
    Ah, good point. I'm not a very smart person. I'll read the plugin code now. Thanks! – yaharga Jan 13 '15 at 15:46
2

your callback function must be like this:

function cienna_show_slider_callback() {
    global $post, $product, $woocommerce; // just in case if your template file need this
    ob_start();
?>

<?php woocommerce_get_template( 'archive-product.php'); ?>

<?php
    $output = ob_get_contents();
    ob_end_clean();
    echo $output;
    die();
}
  • I keep getting no posts found, and the breadcrumb shows as if I'm in the home page. – yaharga Jan 13 '15 at 8:34
  • 1
    you need to set the loop args in your template file – Mohammed Jan 13 '15 at 9:43
  • But there are no loop args in the template file and it loads fine when I go onto the page. How can I make the loop args automatically rendered based on URL? – yaharga Jan 13 '15 at 9:57
  • 4
    An ajax request is a separate, new, independent request to the server. It knows nothing about what page you have loaded, that's why it appears that it's the homepage. You need to pass information along with the ajax request about what you need to load. – Andrew Bartel Jan 13 '15 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.