WooCommerce and SimpleModal - How to list products from a category

Question

I am trying to create an option within WordPress / WooCommerce that will utilize jQuery to launch a modal window using the Simple Modal Window Plugin by Eric Martin: http://www.ericmmartin.com/projects/simplemodal/

I'm able to implement the modal window and pull via ajax a page into the modal window using:

        jQuery('#battery-selector').click(function (e) {
    jQuery('<div ></div>').load('http://vapelife.creativesparkdev.com/wp-content/plugins/woocommerce-vapelife/templates/product-select.php').modal(); // AJAXL
    return false;
});

Now, because I am loading a page outside of the WordPress framework, I'm not able to load a category of products with the a loop. Any ideas how I might be able to do this?

Answer 1

This type of call, http://example.com/wp-content/plugins-themes/whatever/file.php, is not correct. No plugin or theme file is made to work like this (it can be, but on rare and specially coded occasions).

This way works:

jQuery('<div ></div>').load('http://example.com/some-real-page-url/').modal();

Create a page with the desired template (some-real-page-url) and load it in your AJAX call.

But I tested the simple modal with TwentyEleven/Twelve/Thirteen and it did not behave well. Maybe the Page Template will have to be heavily customized, i.e., your own header instead of get_header().