使用AJAX向WooCommerce产品循环添加参数

时间：2020-02-22 作者：parvez noor

我正在尝试为我的WooCommerce商店页面制作一个AJAX产品过滤器。之前，我自己创建了查询，没有使用商店页面。然而，我想让我的代码现在更兼容WC。

目前，我可以从查询字符串中设置变量来过滤WooCommerce产品循环。

我使用以下代码执行此操作：

    add_action(\'pre_get_posts\', \'filter_pre_get_posts\' );
    function filter_pre_get_posts( $wp_query ) {
        if(is_shop()){
            $filter_term = $_GET[\'brand\'];
            if (isset($filter_term ) && !empty($filter_term )) {
            $wp_query->set(\'tax_query\', array(
                    \'relation\' => \'OR\',
              array(
                  \'taxonomy\' => \'pa_branding\',
                  \'field\' => \'slug\',
                  \'terms\' => $filter_term ,
                  \'include_children\' => true,
                  \'operator\' => \'IN\'
              ),
              array(
                  \'taxonomy\' => \'product_cat\',
                  \'field\' => \'slug\',
                  \'terms\' => $filter_term ,
                  \'include_children\' => true,
                  \'operator\' => \'IN\'
              ),
              array(
                  \'taxonomy\' => \'product_tag\',
                  \'field\' => \'slug\',
                  \'terms\' => $filter_term ,
                  \'include_children\' => true,
                  \'operator\' => \'IN\'
              )
              ));
          }
        }
    }
现在，我希望在单击复选框时能够执行相同的操作。

单击复选框时，Javascript会将复选框的值添加到具有数组的对象中：

var object = {
 \'tags\' : [],
 \'priceRange\' : [],
};

$(\'.checkbox-tag\').change(function() {
  if($(this).prop("checked") == true){
    object.tags.push($(this).val());
  } else if($(this).prop("checked") == false) {
    var x = object.tags.indexOf($(this).val());
    object.tags.splice(x,1);
  }
  console.log(object);
  var formData = object;
  aJaxFilter(formData);
});
$(\'.checkbox-price\').click(function() {
  if($(this).prop("checked") == true){
    var string = ($(this).val());
    object.priceRange = string.match(/\\d+/g);
  }
  console.log(object);
  var formData = object;
  aJaxFilter(formData);
});
然后我使用Ajax发送这个对象。

function aJaxFilter(formData) {
    $.ajax({
        url: js_variables.ajaxURL,
        type:\'GET\',
        data: {
            \'formData\' : formData,
            \'action\' : \'listFilteredProducts\'
        },
        success:function(data){
          console.log(data);
          $(\'.chd-shop-product-loop .products\').html(data);
        }
    });
}
我现在要做的是更改产品循环，就像我使用第一段代码中的参数对wp\\u query->set（）所做的那样。

我试图在Ajax函数中遵循->

add_action(\'wp_ajax_listFilteredProducts\', \'listFilteredProducts\');
add_action(\'wp_ajax_nopriv_listFilteredProducts\', \'listFilteredProducts\');

function listFilteredProducts($wp_query) {
  if(isset($_GET[\'formData\'])) {
    $value = $_GET[\'formData\'];
  }
  // If no price input, but tags have been input
  if ($value[\'priceRange\'] == 0 && $value[\'tags\'] != 0) {
    $wp_query->set(\'tax_query\', array(
     \'relation\' => \'OR\',
     array(
       \'taxonomy\' => \'product_tag\',
       \'field\' => \'slug\',
       \'terms\' => $value[\'tags\'],
     ),
     array(
       \'taxonomy\' => \'product_cat\',
       \'field\' => \'slug\',
       \'terms\' => $value[\'tags\'],
     ),
     array(
       \'taxonomy\' => \'pa_branding\',
       \'field\' => \'slug\',
       \'terms\' => $value[\'tags\'],
     ),
    ));
  //If price has been input, but no tags have been input
  } else if ($value[\'priceRange\'] != 0 && $value[\'tags\'] == 0) {
    $wp_query->set(\'meta_query\', array(
      array(
          \'key\' => \'_price\',
          \'value\' => array($value["priceRange"][0], $value["priceRange"][1]),
          \'compare\' => \'BETWEEN\',
          \'type\' => \'NUMERIC\'
      )
    ));
  //if neither price or tags input
  } else if ($value[\'priceRange\'] == 0 && $value[\'tags\'] == 0) {
    $wp_query->set(\'post_type\', \'product\');
  // if tags and price input
  } else if($value[\'priceRange\'] && $value[\'tags\']) {
    $wp_query->set(\'tax_query\', array(
      \'relation\' => \'OR\',
      array(
        \'taxonomy\' => \'product_tag\',
        \'field\' => \'slug\',
        \'terms\' => $value[\'tags\'],
      ),
      array(
        \'taxonomy\' => \'product_cat\',
        \'field\' => \'slug\',
        \'terms\' => $value[\'tags\'],
      ),
      array(
        \'taxonomy\' => \'pa_branding\',
        \'field\' => \'slug\',
        \'terms\' => $value[\'tags\'],
      ),
    ));
    $wp_query->set(\'meta_query\', array(
      \'relation\' => \'AND\',
       array(
           \'key\' => \'_price\',
           \'value\' => array($value["priceRange"][0], $value["priceRange"][1]),
           \'compare\' => \'BETWEEN\',
           \'type\' => \'NUMERIC\'
       )
    ));
  }
wp_die();
}

1 个回复
SO网友:parvez noor

现在我明白了。

我没有使用$wp\\u query->set（），而是设置参数，然后运行woocommerce循环。这是我最后使用的代码。

add_action(\'wp_ajax_listFilteredProducts\', \'listFilteredProducts\');
add_action(\'wp_ajax_nopriv_listFilteredProducts\', \'listFilteredProducts\');

function listFilteredProducts($wp_query) {
  if(isset($_GET[\'formData\'])) {
    $value = $_GET[\'formData\'];
  }
  // If no price input, but tags have been input
  if ($value[\'priceRange\'] == 0 && $value[\'tags\'] != 0) {
    $args = array(
       \'post_type\' => \'product\',
        \'posts_per_page\' => -1,
         \'tax_query\' => array(
           \'relation\' => \'OR\',
           array(
             \'taxonomy\' => \'product_tag\',
             \'field\' => \'slug\',
             \'terms\' => $value[\'tags\'],
           ),
           array(
             \'taxonomy\' => \'product_cat\',
             \'field\' => \'slug\',
             \'terms\' => $value[\'tags\'],
           ),
           array(
             \'taxonomy\' => \'pa_branding\',
             \'field\' => \'slug\',
             \'terms\' => $value[\'tags\'],
           ),
          )
        );
  //If price has been input, but no tags have been input
  } else if ($value[\'priceRange\'] != 0 && $value[\'tags\'] == 0) {
    $args = array(
        \'post_status\' => \'publish\',
        \'post_type\' => \'product\',
        \'posts_per_page\' => -1,
        \'meta_query\' => array(
            array(
                \'key\' => \'_price\',
                \'value\' => array($value["priceRange"][0], $value["priceRange"][1]),
                \'compare\' => \'BETWEEN\',
                \'type\' => \'NUMERIC\'
            )
        )
    );
  //if neither price or tags input
  } else if ($value[\'priceRange\'] == 0 && $value[\'tags\'] == 0) {
    if(!$value[\'priceRange\']) {
      $value[\'priceRange\'] = array(0,1000000);
    }

    $args = array(
       \'post_type\' => \'product\',
       \'posts_per_page\' => -1,
        );
  // if tags and price input
  } else if($value[\'priceRange\'] && $value[\'tags\']) {
    $args = array(
       \'post_type\' => \'product\',
        \'posts_per_page\' => -1,
        \'tax_query\' => array(
          \'relation\' => \'OR\',
          array(
            \'taxonomy\' => \'product_tag\',
            \'field\' => \'slug\',
            \'terms\' => $value[\'tags\'],
          ),
          array(
            \'taxonomy\' => \'product_cat\',
            \'field\' => \'slug\',
            \'terms\' => $value[\'tags\'],
          ),
          array(
            \'taxonomy\' => \'pa_branding\',
            \'field\' => \'slug\',
            \'terms\' => $value[\'tags\'],
          ),
        ),
            \'meta_query\' => array(
              \'relation\' => \'AND\',
               array(
                   \'key\' => \'_price\',
                   \'value\' => array($value["priceRange"][0], $value["priceRange"][1]),
                   \'compare\' => \'BETWEEN\',
                   \'type\' => \'NUMERIC\'
               )
             ),
          );

  }
  $ajaxposts = new WP_Query( $args );

  $response = \'\';

  if ( $ajaxposts->posts ){
    while ( $ajaxposts->have_posts() ) {
      $ajaxposts->the_post();
      $response .= wc_get_template_part( \'content\', \'product\' ); // use WooCommerce function to get html
    }
  } else {
    // handle not found by yourself or
    // perhaps do_action( \'woocommerce_no_products_found\' ); could do the trick?
  }

  echo $response;
  exit;
wp_die();
}

标签： wp-query   woocommerce-offtopic   filters   ajax   小码农  

相关推荐

将URL参数的AJAX筛选器从POST更改为GET

我有一个定义良好的AJAX过滤器，分为两部分，一部分用于加载更多按钮，另一部分用于选择下拉过滤器。两者都在AJAX中在前端重新加载属性列表，并协同工作（例如，如果我在下拉列表中选择“最低价格”、“最高价格”和“床位数”，列表将刷新，“加载更多”按钮将正常工作）。然而，我想对此进行增强，以便它也将一个参数推送到URL中，并让AJAX查看该参数。例如，如果我从下拉列表中选择“最低价格：100000，最高价格5000000”和“床位3”，AJax将正常运行，但URL也会更改为：mydomain.com/?min