Фильтр товаров wordress ( НЕ woo)?

Question

[greencost]

Доброго времени суток. Есть ли какие-то готовые плагины фильтрации записей на wordpress по кастомным полян, но не для woo?

Нужно что-то вроде:


На скриншоте чужой пример. А мне нужны аналогичные возможности, но с фильтрацией по custom fields. Возможно я не понимаю, как правильно задать поисковый запрос, всё что нахожу - всё для woocomerce. У меня же просто чистый wp с атрибутами, заданными через кастомные поля (цены, размеры и пр).

Comments

[yarovikov]

Такого нет

[Антон Литвиненко]

Придётся самому писать, в принципе несложно

[greencost]

Антон Литвиненко, ок, понял. Тогда такой вопрос - если я правильно понял, то через ajax + meta_query можно реализовать мою задачу. Сейчас я гуглю этот вопрос. С другой стороны - я могу сделать такие фильтры на js, навешав атрибуты товаров, например, через data-атрибуты.

Ну т.е. форма с моими чекбоксами + прямо в верстке и перестраивать dom-дерево через js-обработчики.

Вопрос - какой путь будет более правильным, с т.з. wordpress? Какой right way в этой экосистеме?

Answer 1

[Антон Литвиненко]

greencost, Если через ajax + metaquery, то будет как-то так:
Все фильтры завернуты в форму и представляют собой элементы формы: селекты, радиокнопки, чекбоксы. У элементов форм есть name. Обязательно должно быть скрытое поле с названием функции

<form id="filter">
  <div class="search-holder">
    <input type="search" name="s" id="s" class="input-text" placeholder="<?php esc_attr_e( 'Поиск вакансий' ); ?>" value="<?php echo get_search_query(); ?>">

    <?php
    $terms_loaction = get_terms(
      array(
        'taxonomy' => 'location',
        'hide_empty' => false,
      )
    );
    ?>

    <?php
    if ( $terms_loaction ) :
      ?>
      <select name="city" class="select-block mobile-hide">
        <option value=""><?php esc_html_e( 'Город' ); ?></option>
        <?php
        foreach ( $terms_loaction as $location ) :
          ?>
          <option value="<?php echo esc_attr( $location->term_id ); ?>"><?php echo esc_html( $location->name ); ?></option>
        <?php endforeach; ?>
      </select>
    <?php endif; ?>

    <ul class="filter-list mobile-hide">
      <li>
        <label class="checkbox-block">
          <input type="checkbox" name="is_free_live">
          <span><?php esc_html_e( 'Бесплатное проживание' ); ?></span>
        </label>
      </li>
      ...
    </ul>
    <button type="submit" class="ajax-filter-btn btn"><?php esc_html_e( 'Найти вакансию' ); ?></button>
  </div>
  <input type="hidden" name="action" value="filter_vacancy">
</form>

php обработчик будет выглядеть как-то так:

add_action( 'wp_enqueue_scripts', function() {

  $my_args = array(
    'post_type' => 'offers',
    'posts_per_page' => -1,
    'tax_query' => array(
      'relation' => 'AND',
    ),
    'meta_query' => array(
      'relation' => 'AND',
    ),
  );

  $my_query = new WP_Query( $my_args );

  wp_register_script('ajax_js', get_stylesheet_directory_uri() . '/js/ajax.js', array('jquery'), time(), true);

  wp_localize_script( 'ajax_js', 'ajax_obj', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'posts' => json_encode( $my_query->query_vars ),
    'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
    'max_page' => $my_query->max_num_pages,
  ) );

  wp_enqueue_script('ajax_js');
});

// FILTER
function filter_vacancy(){

  $args = array(
    'post_type' => 'offers',
    'posts_per_page' => -1,
    'tax_query' => array(
      'relation' => 'AND',
    ),
    'meta_query' => array(
      'relation' => 'AND',
    ),
  );

  if( !empty( $_POST['city'] ) && $_POST['city'] ) {
    $args['tax_query'][] = array(
      'taxonomy' => 'location',
      'field' => 'id',
      'terms' => $_POST['city'],
    );
  }

  if( isset( $_POST['is_free_equipment'] ) && $_POST['is_free_equipment'] ) {
    array_push($args['meta_query'][] = array(
        'key'         => 'is_free_equipment',
        'value'       => true,
        'compare'     => '=',
      )
    );
  }

  if( !empty( $_POST['s'] ) ) {
    $args['s'] = sanitize_text_field($_POST['s']);
  }

  query_posts( $args );

  global $wp_query;

  if ( have_posts() ) :
    ob_start();

    while ( have_posts() ) :
      the_post();
      get_template_part( 'template-parts/offers/offers', 'list' );
    endwhile;
    $response = ob_get_contents();
    ob_end_clean(); 
  else:
    $response = 'По запросу нет вакансий';
  endif;

  echo json_encode( array(
    'posts'       => json_encode( $wp_query->query_vars ),
    'max_page'    => $wp_query->max_num_pages,
    'found_posts' => $wp_query->found_posts,
    'content'     => $response,
  ) );
  die();
}
add_action('wp_ajax_filter_vacancy', 'filter_vacancy');
add_action('wp_ajax_nopriv_filter_vacancy', 'filter_vacancy');

ajax обработчик в упрощенном виде както так

$('#filter').on('submit', function (e) {
  e.preventDefault();
  var filter = $(this);
  $.ajax({
    type: 'POST',
    url: ajax_obj.ajaxurl,
    data: filter.serialize(),
    dataType : 'json',
    beforeSend: function(xhr){

    },
    success: function (data) {
      $('.offers-list').html(data.content);
      ajax_obj.posts = data.posts;
    },
  });
});