Ich habe soetwas ähnliches vor einigen Monaten mal gemacht.
Ausgangssituation war, dass Besucher einer Wenseite Produktaktionen nach Aktionszeiträumen filtern können sollten.
Die ganze Arbeit war nur ein Ajax-Test von mir und läuft bei keinem Kunden - ich kann also getrost den Code hier posten (bei für Kunden geschriebenem Code würde ich das aber nicht tun!). Allerdings poste ich auch nur die wichtigsten Schritte und lasse vielen Code weg.
Du baruchst für dieses Unterfangen drei Dateien:
- ein Page-Template (das ist zur Anzeige der Seite ansich und der Filterfunktion da)
- eine javascript-Datei (das ist für die Ajax-Funktion da)
- eine PHP-Datei welche mittels der Ajaxfunktion aufgerufen wird und den gefilterten Inhalt (angepasstes WP_Query) wieder zurück gibt.
Die Technik funktioniert ganz grob so:
1.) wenn ein Besucher auf der Seite einen bestimmten Zeitraum (oder irgend ein anderes beliebiges Attribut) auswählt - wählt es damit einen bestimmten Parameter mit aus.
2.) durch das Auswählen übernimmt die Ajax-Funktion diesen Parameter und sendet ihn mit einem Ajax-Request an die PHP-Datei
3.) innerhalb dieser PHP-Datei wird der Parameter ausgelesen und an WP_Query übergeben -> dadurch wird die Loopausgabe entsprechend angepasst.
4.) als Endergebnis bekommt der Besucher eine angepasste (gefilterte) Loopausgabe präsentiert -> dabei kann nach allen mittel WP_Query definierbaren Parametern gefiltert werden (Kategorien, Erscheinungsdatum, Autor, Customfields etc.)
Nun noch ein paar gekürzte Codes zum besseren Verständnis:
Page-Template:
<div id="eigene-aktionen">
<div id="eigene-aktionen-inner">
<div id="aktions-zeitraum">
<span class="akzr">Aktionszeitraum: </span>
<select id="zeitraum-filter" name="filter-dropdown">
<option value="<?php echo $week_start. '-' .$week_end. '-' .$aktionengruppe; ?>"><?php echo $w1_s; ?> - <?php echo $w1_e; ?></option>
<option value="<?php echo $week_start_next_w. '-' .$week_end_next_w. '-' .$aktionengruppe; ?>"><?php echo $w2_s; ?> - <?php echo $w2_e; ?></option>
<option value="<?php echo $week_start_third_w. '-' .$week_end_third_w. '-' .$aktionengruppe; ?>"><?php echo $w3_s; ?> - <?php echo $w3_e; ?></option>
</select> <!-- #zeitraum-filter -->
</div> <!-- #aktions-zeitraum -->
<div id="aktionen-ajax">
</div> <!-- #aktionen-ajax -->
</div> <!-- #eigene-aktionen-inner -->
</div> <!-- #eigene-aktionen -->
Alles anzeigen
die Ajax-Funktion:
// Load Aktionen with Ajax
$(function () {
$('#zeitraum-filter').on('change',function(){
var $content = $('body.page-template-page-aktionen-php #aktionen-ajax');
var load_aktionen = function(){
$.ajax({
type : "GET",
data : {aktionen:$('#zeitraum-filter option:selected').val()},
dataType : "html",
url : "http://deineseite.de/wp-content/themes/deinchildtheme/aktionen-ajax.php",
beforeSend : function(){
$ajax_content = $('body.page-template-page-aktionen-php #ajax-inner');
$ajax_content.slideUp(500, function(){
$ajax_content.remove();
});
},
success : function(data){
$data = $(data);
$data.hide();
$content.append($data);
$data.slideDown(500);
},
error : function() {
alert('Leider ist ein Fehler aufgetreten - bitte wenden Sie sich an den Webseiten-Administrator!');
}
});
}
load_aktionen();
});
});
Alles anzeigen
die PHP-Datei für den Ajax-Request:
<?php
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// get GET-Value
$value = (isset($_GET['aktionen'])) ? $_GET['aktionen'] : 0;
$val_ar = explode("-",$value);
$w_s = $val_ar[0];
$w_e = $val_ar[1];
$ak = $val_ar[2];
?>
<div id="ajax-inner">
<div>Wochenstart: <?php echo $w_s; ?><br />Wochenende: <?php echo $w_e; ?><br />Gruppe: <?php echo $ak; ?><br /></div>
<?php
$the_akt_query = new WP_Query(array(
'post_type' => 'aktionen_type',
'posts_per_page' => 100,
'post_status' => 'any',
'aktionentax' => $ak,
'meta_key' => 'aktions_art',
'orderby' => 'meta_value_num meta_value',
'order' => 'ASC',
'meta_query' => array(
'relation' => 'AND',
array(
'key' => 'aktions_start',
'value' => $w_e,
'type' => 'numeric',
'compare' => '<='
),
array(
'key' => 'aktions_ende',
'value' => $w_s,
'type' => 'numeric',
'compare' => '>'
)
)
));
while ( $the_akt_query->have_posts() ) : $the_akt_query->the_post(); ?>
/*HIER KOMMT DER AUSZUGEBENDE INHALT DES LOOPS HIN (kann eventuell (je nach wunsch) direkt aus der index.php uebernommen werden)*/
<?php endwhile; ?>
<?php wp_reset_postdata(); // bei einem Ajax-Request nicht zwingend nötig
?>
</div>
Alles anzeigen
Tja, das wars ;-)
LG, pixselig
