How to get_template_part using AJAX?

Question

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.

Answer 1

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();
}