Cum să trimiteți corect un formular de căutare și să afișați rezultatul pe o pagină independentă
Am o funcție de căutare pe site-ul meu WordPress care folosește selectoare dependente dinamice.
Totuși, acum am următoarea problemă:
Dacă selectez doar prima casetă, sau primele două casete și apăs butonul Căutare
, aceasta redirecționează cu succes către pagina de rezultate.
Totuși, dacă selectez continuu a treia casetă, aceasta redirecționează către o pagină cu același URL ca pagina de rezultate dar cu conținutul paginii de start.
Am verificat în Chrome Console și am văzut această eroare:
Failed to load resource: the server responded with a status of 404 (Not Found)
Am inclus mai jos tot codul relevant.
1. partea front-end a selectoarelor:
<form class="select-boxes" action="<?php echo site_url("/part-search-result/"); ?>" method="POST" target="_blank">
<?php include(__DIR__.'/inc/part-search.php'); ?>
</form>
2. part-search.php
<?php
include( __DIR__.'/db-config.php' );
$query = $db->query("SELECT * FROM ps_manufact WHERE status = 1 ORDER BY manufact_name ASC");
$rowCount = $query->num_rows;
?>
<select name="manufacturer" id="manufact" onchange="manufactText(this)">
<option value="">Selectează Producător</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['manufact_id'].'">'.$row['manufact_name'].'</option>';
}
}else{
echo '<option value="">Producător Indisponibil</option>';
}
?>
</select>
<input id="manufacturer_text" type="hidden" name="manufacturer_text" value=""/>
<script type="text/javascript">
function manufactText(ddl) {
document.getElementById('manufacturer_text').value = ddl.options[ddl.selectedIndex].text;
}
</script>
<select name="type" id="type" onchange="typeText(this)">
<option value="">Selectează mai întâi Producător</option>
</select>
<input id="type_text" type="hidden" name="type_text" value=""/>
<script type="text/javascript">
function typeText(ddl) {
document.getElementById('type_text').value = ddl.options[ddl.selectedIndex].text;
}
</script>
<select name="year" id="year" onchange="yearText(this)">
<option value="">Selectează mai întâi Tip</option>
</select>
<input id="year_text" type="hidden" name="year_text" value=""/>
<script type="text/javascript">
function yearText(ddl) {
document.getElementById('year_text').value = ddl.options[ddl.selectedIndex].text;
}
</script>
<select name="model" id="model" onchange="modelText(this)">
<option value="">Selectează mai întâi An</option>
</select>
<input id="model_text" type="hidden" name="model_text" value=""/>
<script type="text/javascript">
function modelText(ddl) {
document.getElementById('model_text').value = ddl.options[ddl.selectedIndex].text;
}
</script>
<input type="submit" name="search" id="search" value="Căutare">
<script type="text/javascript">
jQuery(function($) {
$('#manufact').on('change',function(){
var manufactID = $(this).val();
if(manufactID){
$.ajax({
type:'POST',
url:'<?php echo home_url('wp-content/themes/myTheme/inc/ajax-data.php') ?>',
data:'manufact_id='+manufactID,
success:function(html){
$('#type').html(html);
$('#year').html('<option value="">Selectează mai întâi Tip</option>');
}
});
}else{
$('#type').html('<option value="">Selectează mai întâi Producător</option>');
$('#year').html('<option value="">Selectează mai întâi Tip</option>');
}
});
$('#type').on('change',function(){
var typeID = $(this).val();
if(typeID){
$.ajax({
type:'POST',
url:'<?php echo home_url('wp-content/themes/myTheme/inc/ajax-data.php') ?>',
data:'type_id='+typeID,
success:function(html){
$('#year').html(html);
$('#model').html('<option value="">Selectează mai întâi An</option>');
}
});
}else{
$('#year').html('<option value="">Selectează mai întâi Tip</option>');
$('#model').html('<option value="">Selectează mai întâi An</option>');
}
});
$('#year').on('change',function(){
var yearID = $(this).val();
if(yearID){
$.ajax({
type:'POST',
url:'<?php echo home_url('wp-content/themes/myTheme/inc/ajax-data.php') ?>',
data:'year_id='+yearID,
success:function(html){
$('#model').html(html);
}
});
}else{
$('#model').html('<option value="">Selectează mai întâi An</option>');
}
});
});
</script>
3. ajax-data.php
<?php
include( __DIR__.'/db-config.php' );
if(isset($_POST["manufact_id"]) && !empty($_POST["manufact_id"])){
$query = $db->query("SELECT * FROM ps_type WHERE manufact_id = ".$_POST['manufact_id']." AND status = 1 ORDER BY type_name ASC");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Selectează Tip</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['type_id'].'">'.$row['type_name'].'</option>';
}
}else{
echo '<option value="">Tip Indisponibil</option>';
}
}
if(isset($_POST["type_id"]) && !empty($_POST["type_id"])){
$query = $db->query("SELECT * FROM ps_year WHERE type_id = ".$_POST['type_id']." AND status = 1 ORDER BY year_name ASC");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Selectează An</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['year_id'].'">'.$row['year_name'].'</option>';
}
}else{
echo '<option value="">An Indisponibil</option>';
}
}
if(isset($_POST["year_id"]) && !empty($_POST["year_id"])){
$query = $db->query("SELECT * FROM ps_model WHERE year_id = ".$_POST['year_id']." AND status = 1 ORDER BY model_name ASC");
$rowCount = $query->num_rows;
if($rowCount > 0){
echo '<option value="">Selectează Model</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['model_id'].'">'.$row['model_name'].'</option>';
}
}else{
echo '<option value="">Model Indisponibil</option>';
}
}
?>
4. part-search-result.php
<?php
if (isset($_POST['search'])) {
$clauses = array();
if (isset($_POST['manufacturer_text']) && !empty($_POST['manufacturer_text'])) {
$clauses[] = "`manufacturer` = '{$_POST['manufacturer_text']}'";
}
if (isset($_POST['type_text']) && !empty($_POST['type_text'])) {
$clauses[] = "`type` = '{$_POST['type_text']}'";
}
if (isset($_POST['year_text']) && !empty($_POST['year_text'])) {
$clauses[] = "`year` = '{$_POST['year_text']}'";
}
if (isset($_POST['model_text']) && !empty($_POST['model_text'])) {
$clauses[] = "`model` = '{$_POST['model_text']}'";
}
$where = !empty( $clauses ) ? ' where '.implode(' and ',$clauses ) : '';
$sql = "SELECT * FROM `wp_products` ". $where;
$result = filterTable($sql);
} else {
$sql = "SELECT * FROM `wp_products` WHERE `manufacturer`=''";
$result = filterTable($sql);
}
function filterTable($sql) {
$con = mysqli_connect("localhost", "root", "root", "i2235990_wp2");
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
$filter_Result = mysqli_query($con, $sql);
return $filter_Result;
}
?>
<?php get_header(); ?>
<div class="container">
<div id="products" class="row list-group">
<?php while ( $rows = mysqli_fetch_array($result) ): ?>
<div class="item col-xs-12 col-sm-4 col-md-4 col-lg-4">
<div class="thumbnail">
<?php
echo '<img name="product-image" class="group list-group-image hvr-bob" src=' . $rows['image_url'] . ' width="400px" height="250px" alt="" />';
?>
<div class="caption">
<h4 class="group inner list-group-item-heading">
<?php
echo "Producător:\t".$rows['manufacturer'].'<br>';
echo "Tip:\t".$rows['type'].'<br>';
echo "An:\t".$rows['year'].'<br>';
echo "Model:\t".$rows['model'].'<br>';
echo '<br>';
echo "Descriere:\t".$rows['description'].'<br>';
?>
</h4>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
Am crezut că problema ar putea fi legată de utilizarea incorectă a POST în WordPress, am găsit un tutorial: Gestionarea cererilor POST în modul WordPress
Totuși, deja am folosit action
pentru a redirecționa către pagina de rezultate, nu am idee cum să rezolv problema mea.
Pentru a crea propria funcționalitate independentă de căutare, urmați acești pași.
1- Aveți nevoie de un formular pentru a trimite datele. Acesta este un formular simplu care poate face acest lucru pentru dumneavoastră:
<form method="post" name="car-select" action="<?php echo site_url('/my-page/'); ?>">
<select name="make">
<option value="benz">Benz</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select name="type">
<option value="sedan">Sedan</option>
<option value="coupe">Coupe</option>
</select>
<input type="submit" value="Găsește mașina visurilor mele!"/>
</form>
Unde /my-page/
este slug-ul paginii pe care o vom crea mai târziu.
2- O funcție pentru a gestiona rezultatele căutării. Uitați-vă la această funcție de bază care caută mașinile în funcție de valorile introduse:
function my_custom_search() {
$car_make = $_POST['make'];
$car_type = $_POST['type'];
$car_query = new WP_Query ( array (
'post_type' => 'post',
'tax_query' => array(
'relation' => 'AND',
array (
'taxonomy' => 'car_make',
'field' => 'slug',
'terms' => $car_make,
),
array (
'taxonomy' => 'car_type',
'field' => 'slug',
'terms' => $car_type,
),
),
));
if ($car_query->have_posts) {
while($car_query->have_posts()){
$car_query->the_post();
get_template_part('ORICE ȘABLON DORIȚI SĂ FOLOSIȚI');
}
}
// Paginarea va fi aici
}
3- O pagină pentru a afișa rezultatele căutării. Vă amintiți de slug-ul din primul pas? Creați o pagină în directorul șablonului dumneavoastră și denumiți-o ca page-my-search-template.php
. Apoi includeți această funcție în noul șablon de pagină, oriunde doriți:
my_custom_search();
Apoi ar trebui să creați o pagină cu slug-ul my-page
(cel din acțiunea formularului), folosind șablonul pe care tocmai l-ați creat.
Acum, fiecare trimitere a formularului va declanșa o interogare de căutare și va afișa rezultatele în propriul dumneavoastră șablon de căutare!
STAI !! Vreau și paginarea !!
Puteți implementa propria paginare în funcția de căutare, dar recomand să folosiți WP-PageNavi pentru cei care nu au suficientă experiență pentru a scrie un script de paginare. Instalați plugin-ul și setați interogarea astfel:
wp_pagenavi(array( 'query' => $car_query ));
Astfel veți avea o paginare pentru pagina personalizată de căutare, simplu și ușor.

Nu ai nevoie de nicio interogare mySQL. Căutarea implicită din WordPress trimite parametrul "s" prin URL. Poți realiza acest lucru cu un simplu formular cu câmpuri ascunse.
<form role="search" method="get" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
<input type="hidden" name="action" value="careers_search">
<input type="text" name="search-career" value="Caută...">
<input type="submit" class="form-submit" value="Trimite">
</form>
Acest formular se va trimite pe același URL. După trimitere, acesta este comportamentul așteptat:
<?php
if( isset( $_GET['careers_search'] ) ) {
// Codul tău va fi aici...
}
?>
