WordPress and WooCommerce - Passing Variables with

Question

I created a custom template that allows the user to filter by color (custom-product.php, below). I want to use an ajax call to pass the ID of the selected html tag to the page where there is a product (get-fabric.php). My problem is that the ID of the selected option isn't passed in the URL. Logging shows that I get the ID of the selected option successfully, but that it's empty when the subsequent page (get-fabric.php) loads.

Here is custom-product.php:

<div class="col-md-8">
    <label class="filter-label">Filter by:</label>
        <form method = "POST">
            <select name="select_colour" id ="id-select-colour">
                <option>Colour</option>
                <?php    
                    $terms = get_terms( 'pa_fabric_color' );
                    foreach ($terms as $each_term) {
                ?>
                <option value = "<?php echo $each_term->name; ?>"><?php echo $each_term->name; ?></option>
                <?php }?>
           </select>
       </form>
</div>

And get-fabric.php:

        <?php  


        if(!empty($_POST['select_colour']))
        {
        $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 1000,
        'product_cat'    => 'fabric'


        );

        $loop = new WP_Query( $args );


            while ( $loop->have_posts() ) : $loop->the_post();
            global $product;
            $regular_price = $product->get_price_html();

            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'product' );
                echo '  <div class="col-md-3 fabric-active" data-fabcode="32860">
                <div class="fabric-cloth">
                    <div class="fabric-data">
                        <img src="'.$image[0].'" class="img-responsive cursor-on" />
                        <div class="fabric-code">
                            <p>'.$product->post->post_title.'</p>
                            <span>'.$regular_price.'</span>
                        </div>
                    </div>
                </div>
            </div>';
            endwhile;

        wp_reset_query();
        ?>
        <div class="col-md-3 fabric-active" data-fabcode="32860">
                <div class="fabric-cloth">
                    <div class="fabric-data">
                        <img src="'.$image[0].'" class="img-responsive cursor-on" />
                        <div class="fabric-code">
                            <p>'.$product->post->post_title.'</p>
                            <span>'.$regular_price.'</span>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        }
        ?>

And the ajax code:

    <script>
            jQuery(document).ready(function(){
                jQuery("#id-select-colour").change(function(){ 
                var allcoulour =jQuery(this).val();
                var dataString = allcoulour; 


                jQuery.ajax({ 
                    type: "POST", 
                    url: "<?php echo bloginfo('url')?>/wp-content/themes/woocommerce-extension/templates/get-fabric.php", /* PAGE WHERE WE WILL PASS THE DATA */
                    data: dataString,
                    success: function(result){ 
                        jQuery(".fabric-row").html(result); 
                    }


                });

                console.log(dataString);

                });

            });
    </script>

Answer 1

You have to pass your data as key-value pairs

            jQuery.ajax({ 
                type: "POST", 
                url: "<?php echo bloginfo('url')?>/wp-content/themes/woocommerce-extension/templates/get-fabric.php", /* PAGE WHERE WE WILL PASS THE DATA */
                data: {"select_colour":allcoulour}, /*or 
                data: "select_colour="+allcoulour,*/
                success: function(result){ 
                    jQuery(".fabric-row").html(result); 
                }
            });
            console.log(dataString);
            });