Merrill Mayer - Developing a Single Page WooCommerce Website

Merrill Mayer is the owner and web developer at Kool Kat Web Designs. She works with designers to create custom solutions for small to medium sized business and non-profits. Merrill began her career studying for a master’s degree in French at the University of Michigan. There she worked on computerizing French demographic data and got hooked on technology.

Developing A Single Page WooCommerce Website

What are the issues involved in setting up a single page website for WooCommerce? In this talk aimed at developers who are interested in these features but still learning their way around WooCommerce, you’ll learn:

1. Getting the single product template via AJAX
2. Handling product variations
3. Actions and filters used
4. Custom templates

Transcript

1. MAYER MERRILL 02:30 KOOL KAT WEB DESIGNS W HOTEL GREAT ROOM NEXT WOOCONF2016 DEVELOPING A SINGLE PAGE WOOCOMMERCE WEBSITE DEVELOPER TRACK
2. Single Page WooCommerce Website
3. • Merrill M. Mayer • Kool Kat Web Designs • http://www.koolkatwebdesigns.com/ • merrill@koolkatwebdesigns.com • @koolkatweb
4. Overview • Layout • Getting the list of products • Using AJAX to retrieve the single product • Handling Variations • Add to Cart Button • Redirection The example site is http://flatbike.net/
5. The Spec
6. Layout • Remove Tabs woocommerce_product_tabs filter • Move Description after “Add to Cart” button woocommerce_after_add_to_cart_form • Show custom fields woocommerce_after_single_product_summary • Custom template for product image and thumbnails
7. Getting the List of Products • Thumbnails created with recent_products shortcode. • Call remove_action on items we do not wish to display: remove_action( 'woocommerce_after_shop_loop_ite m', 'woocommerce_template_loop_add_to_cart', 10 ); remove_action( 'woocommerce_shop_loop_item_titl e', 'woocommerce_template_loop_product_title', 10 ); remove_action( 'woocommerce_after_shop_loop_ite m_title', 'woocommerce_template_loop_price', 10 );
8. Setting Up AJAX $.ajax({ url: flatbikeurls.ajax_url, cache: false, type: "POST", headers : { "cache-control": "no-cache" }, data: { 'action': 'get_product_detail', 'product_id': $productID}, success:function(returned) { $( '#flatbike-product- detail__container' ).html(returned);
9. Enqueue Scripts function flatbike_scripts() { wp_enqueue_script( 'flatbike-js', get_template_directory_uri() . '/js/build/ flatbike-production.min.js', array('jquery'), 'false', true ); wp_localize_script( 'flatbike-js', 'flatbikeurls', array( 'ajax_url' => admin_url( 'admin- ajax.php' ) )); } add_action( 'wp_enqueue_scripts', 'flatbike_scripts' );
10. WordPress Actions add_action('wp_ajax_get_product_detail', 'flatbike_get_product_detail'); add_action('wp_ajax_nopriv_get_product_detail', 'flatbike_get_product_detail');
11. Getting the Single Product function flatbike_get_product_detail() { $product_id = $_POST['product_id']; $args = array( 'post_type' => 'product', 'p' => $product_id, ); $query = new WP_Query( $args ); … wc_get_template_part( 'content', 'single-product' ); … wp_reset_query(); wp_die(); }
12. Bike Chart
14. Solution • Enqueue add-to-cart-variation.min.js • After the success callback for AJAX add: $form = $( '#flatbike-product- detail').find( '.variations_form' ); if ($form) { $form.wc_variation_form(); } • Prevent the form from submitting until a variation was selected
15. Redirection • Redirect shop page redirect to the main page • Redirect single product page to the main page and select the product
16. Thank You