Verwenden von Ajax zum Erstellen eines Filterselektors für WooCommerce-Produkte

Lesezeit: 7 Minuten

Benutzeravatar von Stone
Stein

Ich möchte einen Ajax-Filterselektor für WooCommerce-Produkte ohne Plugins erstellen.

Aber ich weiß nicht, wie ich an dieses Problem herangehen soll.

Ich habe diese Produktliste mit der Dropdown-Liste, um die Art des Filters auszuwählen:

Screenshot der Shopseite

Ich verwende diesen Code, um die Liste anzuzeigen:

<?php wc_get_template_part( 'list', 'product' ); ?>

Ich weiß, dass die <div> Klasse, die ich ersetzen muss, ist '.products'aber ich muss die ändern $post das Attribut durch niedrigen Preis, hohen Preis oder alphabetische Reihenfolge zu ändern, und ich finde keine Lösung.

Dies ist meine Funktion, um das div zu ändern, wenn ich ein Element auswähle, wenn ich die Dropdown-Liste ändere

$('#filter_paradise').change ->
  valor = $('#filter_paradise option:selected').val()
  changepost(valor)
  return

Wenn ich die Dropdown-Liste ändere, rufe ich die changepost-Funktion mit dem ausgewählten Wert auf, diese Funktion ersetzt das div durch den neuen Wert, aber davor rufe ich die filter_product-Funktion auf

changepost = (valor) ->
  value = valor
  request = $.ajax(
    url: ajax_object.ajax_url
    method: 'POST'
    data:
      opc: value
      action: 'filter_product'
      dataType: "json"
    success: (html, data) ->
      #$('.products').replaceWith(html); 
      console.log 'change'
      return
    error: (errorThrown) ->
      console.log errorThrown
      return
  )
  return 

Diese Funktion befindet sich in function.php, in dieser Funktion habe ich dort Werte, das Land, die Kategorie und den Wert, der durch den Filter ausgewählt wird. Ich brauche diese Werte, um die Abfrage zu erstellen und nach niedrigem Preis, hohem Preis oder alphabetisch zu ordnen

function filter_product(){
  $last_uri = explode("https://stackoverflow.com/", $_SERVER['HTTP_REFERER']);
  $country = $last_uri[6];
  $getcategoria = explode('=',$last_uri[7]);
  $categoria = $getcategoria[1];
    $args = null;
  echo json_encode($categoria);
  exit();

}

Vorher $('.products').replaceWith(html); in Changepost-Funktion

Ich muss die $args ändern in:

$wp_query = new WP_Query( $args );

Das Div, das ich ersetzen muss, ist in <?php wc_get_template_part( 'list', 'product' ); ?> dieser Teil ist drin archive-product.php Diese Ansicht ist so.

<?php woocommerce_product_loop_start(); ?>
<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

  <div class="col-xs-12">
    <div class="elementos_lista">
      <ul>
        <li>
          <?php wc_get_template_part( 'list', 'product' ); ?>
        </li>
      </ul>
    </div>
  </div>
  <?php //wc_get_template_part( 'content', 'product' ); ?>
<?php endwhile; // end of the loop. ?>

<div class="map_paradise"></div>

und bevor ich die Schleife ausführen kann, muss ich ein neues $args für die Abfrage mit den neuen Parametern erhalten, sortiert nach Preis oder alphabetisch.

Was mache ich falsch?
Gibt es eine andere Möglichkeit, das zu tun?

Jede Idee, die mich in die richtige Richtung weist, ist willkommen.

Vielen Dank.

  • Deine Frage ist sehr unklar. Die Verwendung von WordPress Ajax beinhaltet verschiedene/getrennte Dinge: 1) Das jQuery-Skript. 2) die Funktion, die wp_enqueue_script() und wp_localize_script() enthält. 3) Die PHP-Ajax-Funktion im Zusammenhang mit add_action(‘wp_ajax_ …) & add_action(‘wp_ajax_nopriv_ …), die die Daten empfangen und Produkte in der Schleife filtern. 4) Der Selektor-HTML/PHP-Code (im Zusammenhang mit jQuery) … Danach bemerke ich in Ihrem Code, dass Sie auch “Kategorien” -Daten über Ajax übergeben, und das ist nicht klar, weil Sie das in Ihrem nicht erwähnen Frage. Auch wo ist der Code Ihrer Schleife? …

    – LoicTheAztec

    12. Juli 2016 um 1:03 Uhr

  • Bitte, Sie brauchen um deine Frage zu bearbeitenund separater Code in 4 Abschnitten mit Erklärungenauch erwähnen die Kategoriendaten, die Sie versuchen, durch Ajax zu übergeben. Wozu dienen diese Kategorien? was willst du mit denen machen?

    – LoicTheAztec

    12. Juli 2016 um 1:05 Uhr


  • Danke @LoicTheAztec Ich bearbeite meine Frage.

    – Stein

    12. Juli 2016 um 13:53 Uhr

  • Ok, versuchen Sie, ein Beispiel zu nehmen dieser Thread (Antwort). Dies ist der richtige Prozess für Ajax … also wo ist Ihre PHP-Hook-Funktion mit add_action('wp_ajax_ …) & add_action('wp_ajax_nopriv_ …)? Könnten Sie auch Ihren Selektor-HTML-Code hinzufügen? … Danach sollte ich in der Lage sein, Ihnen zu helfen …

    – LoicTheAztec

    12. Juli 2016 um 14:01 Uhr


Schließlich erstelle ich einen Filter, das ist meine Lösung

Ich erstelle mein Dropdown

<div class="filter_paradise">
    <div class="col-xs-12">
      <select id="filter_paradise" class="form-control">
        <option value="0">Alphabetical</option>
        <option value="1">High Price</option>
        <option value="2">Low Price</option>
      </select>
    </div>
</div> 

Wenn sich mein Dropdown-Menü ändert, rufe ich diese Funktion auf

$('#filter_paradise').change ->
  valor = $('#filter_paradise option:selected').val()
  changepost(valor)
  return

changepost = (valor) ->
  value = valor
  request = $.ajax(
    url: ajax_object.ajax_url
    method: 'POST'
    data:
      opc: value
      action: 'filter_product'
      dataType: "json"
    success: (html, data) ->
      $('.products').replaceWith(html); 
      console.log 'change'
      return
    error: (errorThrown) ->
      console.log errorThrown
      return
  )
  return 

und schließlich rufe ich eine Funktion auf filter_product in der function.php, um mein div zu ändern

function filter_product(){
  $select_opc = $_POST['opc'];
  $last_uri = explode("https://stackoverflow.com/", $_SERVER['HTTP_REFERER']);
  $country = $last_uri[4];
  $getcategoria = explode('=',$last_uri[5]);
  $categoria = $getcategoria[1];
  // var_dump($last_uri);
  // var_dump($categoria);
  // var_dump($country);
  wp_reset_query();

  if (!empty($categoria)):
    switch ($select_opc) {
      case 0:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'orderby'             => 'title',
        'order'               => 'ASC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      case 1:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'meta_key'            => '_price',
        'orderby'             => 'meta_value_num',
        'order'               => 'DESC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      case 2:
        $args = array( 
        'post_type'           => 'product',
        'post_status'         => 'publish',
        'posts_per_page'      =>  -1,
        'meta_key'            => '_price',
        'orderby'             => 'meta_value_num',
        'order'               => 'ASC',
        'product_cat'         => $categoria,
        'tax_query'           => array(
            array(
            'taxonomy'        => 'pa_country',
            'terms'           => $country,
            'field'           => 'name',
            //'operator'        => 'IN'
            )
          )
        );
        break;
      default:
        # code...
        break;
    }
    else:
      switch ($select_opc) {
        case 0:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'orderby'             => 'title',
          'order'               => 'ASC',
          'product_cat'         => $country
          );
          break;
        case 1:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'meta_key'            => '_price',
          'orderby'             => 'meta_value_num',
          'order'               => 'DESC',
          'product_cat'         => $country
          );
          break;
        case 2:
          $args = array( 
          'post_type'           => 'product',
          'post_status'         => 'publish',
          'posts_per_page'      =>  -1,
          'meta_key'            => '_price',
          'orderby'             => 'meta_value_num',
          'order'               => 'ASC',
          'product_cat'         => $country
          );
          break;
        default:
          # code...
          break;
      }
    endif;
  $the_query = new WP_Query( $args );

  $salida="<ul class="products">";
    $salida .= '<div class="col-xs-12">';
      $salida .= '<div class="elementos_lista">';
        $salida .= '<ul>';
        if ( $the_query->have_posts() ) :
          while ( $the_query->have_posts() ) : $the_query->the_post();
            $salida .= '<li>'; 
            $product_thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail');
            $url = get_permalink();
            $salida .='<a href="'. get_permalink() .'">';
            $salida .= '<div class="row list_product_paradise">';
            if ($product_thumbnail_url):
              $salida .= '<div class="col-xs-2 image_product_thumbnail">';
              $salida .= '<img src="'. $product_thumbnail_url[0] .'" class="img-responsive" alt="'.get_the_title() .'">';
              $salida .= '</div>';
              $salida .= '<div class="product_cat col-xs-7">';
              $salida .= get_the_title();
              $salida .=  '</div>';
            else:
              $salida .= '<div class="product_cat col-xs-9">';
              $salida .= get_the_title();
              $salida .=  '</div>';
            endif;
            $salida .='<div class="total_items col-xs-3">';
            $salida .=  get_post_meta( get_the_ID(), '_regular_price', true);
            $salida .=  '</div>';
            $salida .=  '</div>';
            $salida .=  '</a>';
            $salida .= '</li>'; 
          endwhile;
        endif;
        $salida .=  '</ul>';
      $salida .=  '</div>';
    $salida .=  '</div>';
  $salida .=  '</ul>';
  $salida .= '<div class="map_paradise"></div>';
  echo $salida;
  exit();

}

  add_action( 'wp_ajax_filter_product', 'filter_product' );    // If called from admin panel
  add_action( 'wp_ajax_nopriv_filter_product', 'filter_product' );    // If called from front end

1427510cookie-checkVerwenden von Ajax zum Erstellen eines Filterselektors für WooCommerce-Produkte

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy