WordPress和WooCommerce-使用Ajax传递变量 [英] WordPress and WooCommerce - Passing Variables with Ajax

问题描述

我创建了一个自定义模板，允许用户按颜色进行过滤(下面的 custom-product.php ).我想使用ajax调用将所选html标记的ID传递到有产品( get-fabric.php )的页面.我的问题是所选选项的ID没有在URL中传递.日志记录显示我成功获取了所选选项的ID，但是在加载下一个页面( get-fabric.php )时，它为空.

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.

这是 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>

和 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
        }
        ?>

还有ajax代码:

    <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>

推荐答案

您必须将数据作为键值对传递

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

这篇关于WordPress和WooCommerce-使用Ajax传递变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！