Cómo enviar correctamente un formulario de búsqueda y mostrar el resultado en una página independiente
Tengo una función de búsqueda de piezas en mi sitio WordPress que utiliza select boxes dinámicos dependientes.
Sin embargo, ahora tengo el siguiente problema:
Si solo selecciono el primer cuadro, o selecciono los dos primeros cuadros y hago clic en el botón Buscar
, salta correctamente a la página de resultados.
Pero si selecciono continuamente el tercer cuadro, salta a una página con la misma URL que la página de resultados pero muestra el contenido de la página de inicio.
Al revisar la Consola de Chrome veo este error:
Failed to load resource: the server responded with a status of 404 (Not Found)
Tengo todo el código relativo a continuación.
1. Parte frontal de los select boxes:
<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="">Seleccionar Fabricante</option>
<?php
if($rowCount > 0){
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['manufact_id'].'">'.$row['manufact_name'].'</option>';
}
}else{
echo '<option value="">Fabricante No Disponible</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="">Seleccione Fabricante Primero</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="">Seleccione Tipo Primero</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="">Seleccione Año Primero</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="Buscar">
<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="">Seleccione Tipo Primero</option>');
}
});
}else{
$('#type').html('<option value="">Seleccione Fabricante Primero</option>');
$('#year').html('<option value="">Seleccione Tipo Primero</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="">Seleccione Año Primero</option>');
}
});
}else{
$('#year').html('<option value="">Seleccione Tipo Primero</option>');
$('#model').html('<option value="">Seleccione Año Primero</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="">Seleccione Año Primero</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="">Seleccionar Tipo</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['type_id'].'">'.$row['type_name'].'</option>';
}
}else{
echo '<option value="">Tipo No Disponible</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="">Seleccionar Año</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['year_id'].'">'.$row['year_name'].'</option>';
}
}else{
echo '<option value="">Año No Disponible</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="">Seleccionar Modelo</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['model_id'].'">'.$row['model_name'].'</option>';
}
}else{
echo '<option value="">Modelo No Disponible</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="Imagen del producto" />';
?>
<div class="caption">
<h4 class="group inner list-group-item-heading">
<?php
echo "Fabricante:\t".$rows['manufacturer'].'<br>';
echo "Tipo:\t".$rows['type'].'<br>';
echo "Año:\t".$rows['year'].'<br>';
echo "Modelo:\t".$rows['model'].'<br>';
echo '<br>';
echo "Descripción:\t".$rows['description'].'<br>';
?>
</h4>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php get_footer(); ?>
Pensé que podría haber un problema por no usar POST correctamente en WordPress, encontré un tutorial: Manejo de solicitudes POST en WordPress
Sin embargo, ya usé action
para saltar a la página de resultados, no tengo idea de cómo resolver mi problema.

Para crear tu propia funcionalidad de búsqueda independiente, sigue estos pasos.
1- Necesitas un formulario para enviar los datos. Este es un formulario simple que puede hacerlo por ti:
<form method="post" name="car-select" action="<?php echo site_url('/mi-pagina/'); ?>">
<select name="make">
<option value="benz">Mercedes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select name="type">
<option value="sedan">Sedán</option>
<option value="coupe">Cupé</option>
</select>
<input type="submit" value="¡Encuentra mi coche ideal!"/>
</form>
Donde /mi-pagina/
es el slug de la página que crearemos más adelante.
2- Una función para manejar los resultados de búsqueda. Mira esta función básica que busca los coches según los valores introducidos:
function mi_busqueda_personalizada() {
$marca_coche = $_POST['make'];
$tipo_coche = $_POST['type'];
$consulta_coches = new WP_Query ( array (
'post_type' => 'post',
'tax_query' => array(
'relation' => 'AND',
array (
'taxonomy' => 'car_make',
'field' => 'slug',
'terms' => $marca_coche,
),
array (
'taxonomy' => 'car_type',
'field' => 'slug',
'terms' => $tipo_coche,
),
),
));
if ($consulta_coches->have_posts) {
while($consulta_coches->have_posts()){
$consulta_coches->the_post();
get_template_part('LA PLANTILLA QUE QUIERAS USAR');
}
}
// Aquí iría la paginación
}
3- Una página para mostrar tus resultados de búsqueda. ¿Recuerdas el slug del primer requisito? Crea una página en el directorio de tu plantilla y nómbrala como page-mi-plantilla-busqueda.php
. Luego incluye esta función en tu nueva plantilla de página, donde prefieras:
mi_busqueda_personalizada();
Luego debes crear una página con el slug mi-pagina
(el del action del formulario), usando la plantilla que acabas de hacer.
¡Ahora, cada envío del formulario activará una consulta de búsqueda y mostrará los resultados en tu propia plantilla de búsqueda!
¡ESPERA !! ¡Quiero mi paginación!
Puedes implementar tu propia paginación en la función de búsqueda, sin embargo recomiendo usar WP-PageNavi para quienes no tengan suficiente habilidad para escribir un script de paginación. Instala el plugin y configura la consulta así:
wp_pagenavi(array( 'query' => $consulta_coches ));
De esta manera tendrás una paginación para tu página de búsqueda personalizada, sencilla y fácil.

No necesitas ninguna consulta mySQL. La búsqueda predeterminada de WordPress envía "s" con la URL. Puedes lograrlo con un simple formulario con campos ocultos.
<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="Buscar...">
<input type="submit" class="form-submit" value="Enviar">
</form>
Este formulario se enviará a sí mismo en la misma URL. Después del envío, esto es lo que se supone que debe ocurrir:
<?php
if( isset( $_GET['careers_search'] ) ) {
// Tu código va aquí...
}
?>
