() translation by (you can also view the original English article)
AJAX (Javascript asíncrono y XML) es una forma de conseguir que una página web se comunique con un servidor, actualizando su contenido sin volver a cargar la página. En WooCommerce AJAX nos permite añadir productos directamente al carrito de la compra, personalizar productos sobre la marcha, filtrar listas de productos y mucho más.
En este tutorial vamos a construir un plugin de "búsqueda en tiempo real" de producto, con un filtro de categoría de producto y entrada de palabras clave. Todo, por supuesto, impulsado por AJAX.
Nuestro plugin nos proporcionará un widget personalizado que después se podrá colocar en cualquier lugar de la tienda WooCommerce. Se verá así (la estética cambiará dependiendo del tema de WordPress que estés usando):
1. Crea la carpeta para el plugin
Empieza creando una carpeta llamada "product-search" y el archivo php principal "product-search.php" dentro de ella. Abre el archivo y añade el siguiente comentario de encabezado, cambiando los detalles pertinentes por los tuyos:
1 |
/*
|
2 |
Plugin Name: Woocommerce AJAX product search
|
3 |
Plugin URI: https://www.enovathemes.com
|
4 |
Description: Ajax product search for WooCommerce
|
5 |
Author: Enovathemes
|
6 |
Version: 1.0
|
7 |
Author URI: https://enovathemes.com
|
8 |
*/
|
9 |
|
10 |
if ( ! defined( 'ABSPATH' ) ) { |
11 |
exit; // Exit if accessed directly |
12 |
}
|
Aquí describimos qué es nuestro plugin y lo que hace. No voy a cubrir aquí en detalle el desarrollo de plugins pues esto va más allá del alcance de este tutorial, pero si eres nuevo en el desarrollo de plugins, te recomiendo encarecidamente que eches un vistazo a este curso para principiantes:
2. Planifica el desarrollo de nuestro plugin
Así que aquí está nuestro plan: tendremos un campo de entrada de búsqueda con un elemento de selección para definir la categoría del producto. Todo esto se empaquetará dentro de un widget. Los usuarios podrán buscar una palabra clave dentro de una categoría concreta de producto.
Cada vez que el usuario escriba una palabra clave de producto o un SKU de producto, realizaremos una solicitud AJAX para consultar los productos que coincidan con la categoría (si está definida) y contengan la palabra clave especificada en su título, su contenido o coincidan con el SKU especificado. Al usuario se le presentará una lista de resultados de búsqueda.
Nuestro siguiente paso consiste en poner en cola el estilo del plugin y los archivos de script.
3. Poner en cola archivos de plugin
Añade el siguiente código después de la introducción del plugin:
1 |
function search_plugin_scripts_styles(){ |
2 |
if (class_exists("Woocommerce")) { |
3 |
|
4 |
wp_enqueue_style( 'search-style', plugins_url('/css/style.css', __FILE__ ), array(), '1.0.0' ); |
5 |
wp_register_script( 'search-main', plugins_url('/js/main.js', __FILE__ ), array('jquery'), '', true); |
6 |
wp_localize_script( |
7 |
'search-main', |
8 |
'opt', |
9 |
array( |
10 |
'ajaxUrl' => admin_url('admin-ajax.php'), |
11 |
'noResults' => esc_html__( 'No products found', 'textdomain' ), |
12 |
)
|
13 |
);
|
14 |
}
|
15 |
}
|
16 |
add_action( 'wp_enqueue_scripts', 'search_plugin_scripts_styles' ); |
Asegúrate de crear las carpetas correspondientes para los estilos y los scripts (carpetas css y js) y los archivos correspondientes (style.css y main.js).
Para el archivo main.js tendremos que pasar algunos parámetros con la función wp_localize_script. Estos parámetros nos dan la url de AJAX y el "texto sin resultados" por lo que no tenemos que codificarlos en nuestro script.
4. Obtener la taxonomía de la categoría de producto con jerarquía
A continuación, tendremos que recopilar y almacenar en caché todas las categorías de productos con jerarquía. Esto se utilizará para las opciones de selección de categoría.
Esta tarea consta de 4 pasos:
- Obtener la taxonomía de la categoría de producto con jerarquía
- Enumerar la taxonomía de la categoría de producto con jerarquía como opciones de selección
- Almacenar en caché los resultados de la taxonomía de la categoría de producto
- Eliminar categorías de productos transitorias (caché) en la edición de términos y las entradas almacenadas
Obtener la taxonomía
Aquí he creado una función recursiva que recopila los términos de taxonomía dados con la relación padre-hijo:
1 |
function get_taxonomy_hierarchy( $taxonomy, $parent = 0, $exclude = 0) { |
2 |
$taxonomy = is_array( $taxonomy ) ? array_shift( $taxonomy ) : $taxonomy; |
3 |
$terms = get_terms( $taxonomy, array( 'parent' => $parent, 'hide_empty' => false, 'exclude' => $exclude) ); |
4 |
|
5 |
$children = array(); |
6 |
foreach ( $terms as $term ){ |
7 |
$term->children = get_taxonomy_hierarchy( $taxonomy, $term->term_id, $exclude); |
8 |
$children[ $term->term_id ] = $term; |
9 |
}
|
10 |
return $children; |
11 |
}
|
Listar categorías de productos como opciones de selección
A continuación, tenemos que enumerar los términos recopilados con otra función recursiva. Crea la estructura HTML basada en option y optgroup:
1 |
function list_taxonomy_hierarchy_no_instance( $taxonomies) { |
2 |
?>
|
3 |
<?php foreach ( $taxonomies as $taxonomy ) { ?> |
4 |
<?php $children = $taxonomy->children; ?> |
5 |
<option value="<?php echo $taxonomy->term_id; ?>"><?php echo $taxonomy->name; ?></option> |
6 |
<?php if (is_array($children) && !empty($children)): ?> |
7 |
<optgroup>
|
8 |
<?php list_taxonomy_hierarchy_no_instance($children); ?> |
9 |
</optgroup>
|
10 |
<?php endif ?> |
11 |
<?php } ?> |
12 |
|
13 |
<?php
|
14 |
}
|
Almacenar en caché los resultados de la categoría de producto
Los resultados consultados deben almacenarse en caché para no ralentizar el proceso de renderizado del filtro. Así que aquí tenemos que crear un transitorio para las categorías de productos. No describiré en detalle la API de transitorios, pero si eres nuevo en este tema, te recomiendo encarecidamente que leas estos increíbles tutoriales introductorios:
Desarrollo de temasIntroducción a la API de transitorios de WordPress, Parte 1
PluginsIntroducción a la API de transitorios de WordPress, Parte 2
Por ahora, aquí está la categoría de producto transitoria:
1 |
function get_product_categories_hierarchy() { |
2 |
|
3 |
if ( false === ( $categories = get_transient( 'product-categories-hierarchy' ) ) ) { |
4 |
|
5 |
$categories = get_taxonomy_hierarchy( 'product_cat', 0, 0); |
6 |
|
7 |
// do not set an empty transient - should help catch private or empty accounts.
|
8 |
if ( ! empty( $categories ) ) { |
9 |
$categories = base64_encode( serialize( $categories ) ); |
10 |
set_transient( 'product-categories-hierarchy', $categories, apply_filters( 'null_categories_cache_time', 0 ) ); |
11 |
}
|
12 |
}
|
13 |
|
14 |
if ( ! empty( $categories ) ) { |
15 |
|
16 |
return unserialize( base64_decode( $categories ) ); |
17 |
|
18 |
} else { |
19 |
|
20 |
return new WP_Error( 'no_categories', esc_html__( 'No categories.', 'textdomain' ) ); |
21 |
|
22 |
}
|
23 |
}
|
Eliminar las categorías de productos transitorias (caché) en la edición de términos y entradas almacenadas
Por último, necesitamos eliminar el transitorio cada vez que un usuario actualiza o crea una categoría de producto, o actualiza/crea el producto en sí.
1 |
function edit_product_term($term_id, $tt_id, $taxonomy) { |
2 |
$term = get_term($term_id,$taxonomy); |
3 |
if (!is_wp_error($term) && is_object($term)) { |
4 |
$taxonomy = $term->taxonomy; |
5 |
if ($taxonomy == "product_cat") { |
6 |
delete_transient( 'product-categories-hierarchy' ); |
7 |
}
|
8 |
}
|
9 |
}
|
10 |
|
11 |
function delete_product_term($term_id, $tt_id, $taxonomy, $deleted_term) { |
12 |
if (!is_wp_error($deleted_term) && is_object($deleted_term)) { |
13 |
$taxonomy = $deleted_term->taxonomy; |
14 |
if ($taxonomy == "product_cat") { |
15 |
delete_transient( 'product-categories-hierarchy' ); |
16 |
}
|
17 |
}
|
18 |
}
|
19 |
add_action( 'create_term', 'edit_product_term', 99, 3 ); |
20 |
add_action( 'edit_term', 'edit_product_term', 99, 3 ); |
21 |
add_action( 'delete_term', 'delete_product_term', 99, 4 ); |
22 |
|
23 |
add_action( 'save_post', 'save_post_action', 99, 3); |
24 |
function save_post_action( $post_id ){ |
25 |
|
26 |
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; |
27 |
if (!current_user_can( 'edit_page', $post_id ) ) return; |
28 |
|
29 |
$post_info = get_post($post_id); |
30 |
|
31 |
if (!is_wp_error($post_info) && is_object($post_info)) { |
32 |
$content = $post_info->post_content; |
33 |
$post_type = $post_info->post_type; |
34 |
|
35 |
if ($post_type == "product"){ |
36 |
delete_transient( 'enovathemes-product-categories' ); |
37 |
}
|
38 |
}
|
39 |
|
40 |
}
|
Añadiremos acciones para create_term, edit_term, delete_term y save_post
5. Crear el widget
Ahora es el momento de crear el widget en sí. No describiré en detalle el proceso de creación de widgets, pero si necesitas ponerte al día, recomiendo este tutorial:
Por ahora, añade el siguiente código para crear el widget:
1 |
add_action('widgets_init', 'register_product_search_widget'); |
2 |
function register_product_search_widget(){ |
3 |
register_widget( 'Enovathemes_Addons_WP_Product_Search' ); |
4 |
}
|
5 |
|
6 |
class Enovathemes_Addons_WP_Product_Search extends WP_Widget { |
7 |
|
8 |
public function __construct() { |
9 |
parent::__construct( |
10 |
'product_search_widget', |
11 |
esc_html__('* Product ajax search', 'textdomain'), |
12 |
array( 'description' => esc_html__('Product ajax search', 'textdomain')) |
13 |
);
|
14 |
}
|
15 |
|
16 |
public function widget( $args, $instance) { |
17 |
|
18 |
wp_enqueue_script('search-main'); |
19 |
|
20 |
extract($args); |
21 |
|
22 |
$title = apply_filters( 'widget_title', $instance['title'] ); |
23 |
|
24 |
echo $before_widget; |
25 |
|
26 |
if ( ! empty( $title ) ){echo $before_title . $title . $after_title;} |
27 |
|
28 |
?>
|
29 |
|
30 |
<div class="product-search"> |
31 |
<form name="product-search" method="POST"> |
32 |
<?php $categories = get_product_categories_hierarchy(); ?> |
33 |
<?php if ($categories): ?> |
34 |
<select name="category" class="category"> |
35 |
<option class="default" value=""><?php echo esc_html__( 'Select a category', 'textdomain' ); ?></option> |
36 |
<?php list_taxonomy_hierarchy_no_instance( $categories); ?> |
37 |
</select>
|
38 |
<?php endif ?> |
39 |
<div class="search-wrapper"> |
40 |
<input type="search" name="search" class="search" placeholder="<?php echo esc_html__( 'Search for product...', 'textdomain' ); ?>" value=""> |
41 |
<?php echo file_get_contents(plugins_url( 'images/loading.svg', __FILE__ )); ?> |
42 |
</div>
|
43 |
</form>
|
44 |
<div class="search-results"></div> |
45 |
</div>
|
46 |
|
47 |
<?php echo $after_widget; |
48 |
}
|
49 |
|
50 |
public function form( $instance ) { |
51 |
|
52 |
$defaults = array( |
53 |
'title' => esc_html__('Product search', 'textdomain'), |
54 |
);
|
55 |
|
56 |
$instance = wp_parse_args((array) $instance, $defaults); |
57 |
|
58 |
?>
|
59 |
|
60 |
<div id="<?php echo esc_attr($this->get_field_id( 'widget_id' )); ?>"> |
61 |
|
62 |
<p>
|
63 |
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo esc_html__( 'Title:', 'textdomain' ); ?></label> |
64 |
<input class="widefat <?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $instance['title'] ); ?>" /> |
65 |
</p>
|
66 |
|
67 |
</div>
|
68 |
|
69 |
<?php
|
70 |
}
|
71 |
|
72 |
public function update( $new_instance, $old_instance ) { |
73 |
$instance = $old_instance; |
74 |
$instance['title'] = strip_tags( $new_instance['title'] ); |
75 |
return $instance; |
76 |
}
|
77 |
|
78 |
}
|
Nuestro widget no tiene opciones, pero te permite introducir un título. Es un formulario simple con un campo de búsqueda y un selector de categoría. Y para la selección de la categoría utilizamos la función que creamos anteriormente:
get_product_categories_hierarchy y list_taxonomy_hierarchy_no_instance. Además, necesitaremos un archivo SVG para denotar la carga al realizar la consulta AJAX.
Por ahora, si vas a Apariencia > Widgets verás un nuevo widget disponible, para que puedas añadirlo al área de widget y ver lo siguiente en el front-end:
¡Tiene un aspecto horrible! Vamos a añadir algunos estilos.
6. Añadir algunos estilos
Abre el archivo style.css y añade lo siguiente:
1 |
.product-search { |
2 |
position: relative; |
3 |
padding: 24px; |
4 |
border-radius: 4px; |
5 |
box-shadow:0px 0px 24px 0px rgba(0, 0, 0, 0.08); |
6 |
border:1px solid #e0e0e0; |
7 |
background: #f5f5f5; |
8 |
}
|
9 |
|
10 |
.search-results { |
11 |
display: none; |
12 |
position: absolute; |
13 |
width: 200%; |
14 |
background: #ffffff; |
15 |
padding:12px 24px; |
16 |
border: 1px solid #e0e0e0; |
17 |
z-index: 15; |
18 |
transform: translateY(-1px); |
19 |
}
|
20 |
|
21 |
.search-results.active { |
22 |
display: block; |
23 |
}
|
24 |
|
25 |
.search-results ul { |
26 |
list-style: none; |
27 |
margin:0 !important; |
28 |
padding: 0 !important; |
29 |
}
|
30 |
|
31 |
.search-results ul li { |
32 |
display: block; |
33 |
padding: 12px 0; |
34 |
position: relative; |
35 |
border-bottom: 1px dashed #e0e0e0; |
36 |
}
|
37 |
|
38 |
.search-results ul li:last-child { |
39 |
border-bottom: none; |
40 |
}
|
41 |
|
42 |
.search-results ul li a { |
43 |
display: table; |
44 |
width: 100%; |
45 |
}
|
46 |
|
47 |
.search-results ul li a > * { |
48 |
display: table-cell; |
49 |
vertical-align: top; |
50 |
}
|
51 |
|
52 |
.search-results .product-image { |
53 |
width: 72px; |
54 |
max-width: 72px; |
55 |
}
|
56 |
|
57 |
.product-data { |
58 |
padding-left: 24px; |
59 |
}
|
60 |
|
61 |
.search-results h3 { |
62 |
display: block; |
63 |
}
|
64 |
|
65 |
.product-data div:not(.product-categories) { |
66 |
display: inline-block; |
67 |
vertical-align: middle; |
68 |
}
|
69 |
|
70 |
.product-data .product-price { |
71 |
position: absolute; |
72 |
top: 12px; |
73 |
right: 0; |
74 |
}
|
75 |
|
76 |
.product-data .product-stock { |
77 |
padding: 4px 8px; |
78 |
background: #eeeeee; |
79 |
border-radius: 4px; |
80 |
position: absolute; |
81 |
bottom: 12px; |
82 |
right: 0; |
83 |
}
|
84 |
|
85 |
.product-categories > span { |
86 |
display: inline-block; |
87 |
margin-right: 4px; |
88 |
}
|
89 |
|
90 |
.product-categories > span:after { |
91 |
content: ","; |
92 |
}
|
93 |
|
94 |
.product-categories > span:last-child:after { |
95 |
content: ""; |
96 |
}
|
97 |
|
98 |
.product-categories > span:last-child { |
99 |
margin-right:0; |
100 |
}
|
101 |
|
102 |
.product-search select { |
103 |
width: 100% !important; |
104 |
min-height: 40px !important; |
105 |
margin-bottom: 16px; |
106 |
}
|
107 |
|
108 |
.product-search select, |
109 |
.product-search input { |
110 |
background: #ffffff; |
111 |
border:1px solid #e0e0e0; |
112 |
}
|
113 |
|
114 |
.search-wrapper { |
115 |
position: relative; |
116 |
}
|
117 |
|
118 |
.search-wrapper input { |
119 |
padding-right: 35px !important; |
120 |
}
|
121 |
|
122 |
.search-wrapper svg { |
123 |
position: absolute; |
124 |
top: 10px; |
125 |
right: 10px; |
126 |
width: 20px; |
127 |
height: 20px; |
128 |
fill:#bdbdbd; |
129 |
animation:loading 500ms 0ms infinite normal linear; |
130 |
transform-origin: center; |
131 |
opacity: 0; |
132 |
}
|
133 |
|
134 |
.search-wrapper.loading svg { |
135 |
opacity:1; |
136 |
}
|
137 |
|
138 |
@keyframes loading { |
139 |
from {transform: rotate(0deg);} |
140 |
to {transform: rotate(360deg);} |
141 |
}
|
Ahora actualiza el navegador, (no te olvides de la caché del navegador) y tu widget debería tener mucho mejor aspecto:
Por ahora, no hace nada en absoluto, así que vamos a aplicar algunas funciones.
7. Añadir funciones de búsqueda
Abre el archivo main.js; aquí vamos a crear nuestra funcionalidad de búsqueda principal.
La idea es simple: añadiremos detectores de eventos para buscar la clave de entrada (escribir) y los cambios en el campo de selección. Cada vez que se active cualquiera de estos eventos, realizaremos una solicitud AJAX para enviar la palabra clave, consultar productos basados en la palabra clave y generar los resultados especificados.
Añade el siguiente código al archivo main.js:
1 |
(function($){ |
2 |
|
3 |
"use strict"; |
4 |
$('form[name="product-search"]').each(function(){ |
5 |
|
6 |
var form = $(this), |
7 |
search = form.find('.search'), |
8 |
category = form.find('.category'), |
9 |
currentQuery = '', |
10 |
timeout = false; |
11 |
|
12 |
category.on('change',function(){ |
13 |
currentQuery = ''; |
14 |
var query = search.val(); |
15 |
productSearch(form,query,currentQuery,timeout); |
16 |
});
|
17 |
|
18 |
search.keyup(function(){ |
19 |
var query = $(this).val(); |
20 |
productSearch(form,query,currentQuery,timeout); |
21 |
});
|
22 |
|
23 |
});
|
24 |
|
25 |
})(jQuery); |
Aquí hemos definido algunas variables necesarias y añadido detectores de eventos a la búsqueda seleccionada. Como puedes ver ambos eventos desencadenan la misma función productSearch que tiene varios parámetros:
- form
- query
- currentQuery
- timeout;
Función productSearch
En realidad no tenemos esa función todavía, por tanto la búsqueda no funcionará por ahora, así que vamos a crear esa función. Añade el siguiente código justo antes del anterior.
1 |
function productSearch(form,query,currentQuery,timeout){ |
2 |
|
3 |
var search = form.find('.search'), |
4 |
category = form.find('.category'); |
5 |
|
6 |
form.next('.search-results').html('').removeClass('active'); |
7 |
|
8 |
query = query.trim(); |
9 |
|
10 |
if (query.length >= 3) { |
11 |
|
12 |
if (timeout) { |
13 |
clearTimeout(timeout); |
14 |
}
|
15 |
|
16 |
form.next('.search-results').removeClass('empty'); |
17 |
|
18 |
search.parent().addClass('loading'); |
19 |
if (query != currentQuery) { |
20 |
timeout = setTimeout(function() { |
21 |
|
22 |
$.ajax({ |
23 |
url:opt.ajaxUrl, |
24 |
type: 'post', |
25 |
data: { action: 'search_product', keyword: query, category: category.val() }, |
26 |
success: function(data) { |
27 |
currentQuery = query; |
28 |
search.parent().removeClass('loading'); |
29 |
|
30 |
if (!form.next('.search-results').hasClass('empty')) { |
31 |
|
32 |
if (data.length) { |
33 |
form.next('.search-results').html('<ul>'+data+'</ul>').addClass('active'); |
34 |
} else { |
35 |
form.next('.search-results').html(opt.noResults).addClass('active'); |
36 |
}
|
37 |
|
38 |
}
|
39 |
|
40 |
clearTimeout(timeout); |
41 |
timeout = false; |
42 |
|
43 |
|
44 |
}
|
45 |
});
|
46 |
|
47 |
}, 500); |
48 |
}
|
49 |
} else { |
50 |
|
51 |
search.parent().removeClass('loading'); |
52 |
form.next('.search-results').empty().removeClass('active').addClass('empty'); |
53 |
|
54 |
clearTimeout(timeout); |
55 |
timeout = false; |
56 |
|
57 |
}
|
58 |
}
|
En esta función primero nos aseguramos de que nuestra palabra clave tenga al menos 3 caracteres y no contenga espacios
A continuación, si la longitud de nuestra palabra clave es más o menos igual a 3 caracteres, añadiremos la clase de carga al contenedor primario del campo de búsqueda, esto es necesario para ejecutar la animación CSS mientras realizamos nuestra solicitud AJAX.
Y aquí tendremos que comprobar que la palabra clave introducida no es igual a la palabra clave actual, para evitar solicitudes AJAX duplicadas con la misma palabra clave. A continuación, establecemos el tiempo de espera para 500 ms y realizamos una solicitud AJAX. Con la solicitud pasamos la palabra clave, la categoría y la acción de solicitud AJAX search_product.
Como todavía no tenemos la acción search_product, al ejecutar AJAX obtendremos un error interno del servidor. Así que vamos a crear esa acción ahora.
Acción search_product
Abre el archivo product-search.php principal y en la parte inferior añade el siguiente código:
1 |
function search_product() { |
2 |
|
3 |
global $wpdb, $woocommerce; |
4 |
|
5 |
if (isset($_POST['keyword']) && !empty($_POST['keyword'])) { |
6 |
|
7 |
$keyword = $_POST['keyword']; |
8 |
|
9 |
if (isset($_POST['category']) && !empty($_POST['category'])) { |
10 |
|
11 |
$category = $_POST['category']; |
12 |
|
13 |
$querystr = "SELECT DISTINCT * FROM $wpdb->posts AS p |
14 |
LEFT JOIN $wpdb->term_relationships AS r ON (p.ID = r.object_id) |
15 |
INNER JOIN $wpdb->term_taxonomy AS x ON (r.term_taxonomy_id = x.term_taxonomy_id) |
16 |
INNER JOIN $wpdb->terms AS t ON (r.term_taxonomy_id = t.term_id) |
17 |
WHERE p.post_type IN ('product')
|
18 |
AND p.post_status = 'publish'
|
19 |
AND x.taxonomy = 'product_cat'
|
20 |
AND (
|
21 |
(x.term_id = {$category}) |
22 |
OR
|
23 |
(x.parent = {$category}) |
24 |
)
|
25 |
AND (
|
26 |
(p.ID IN (SELECT post_id FROM $wpdb->postmeta WHERE meta_key = '_sku' AND meta_value LIKE '%{$keyword}%')) |
27 |
OR
|
28 |
(p.post_content LIKE '%{$keyword}%') |
29 |
OR
|
30 |
(p.post_title LIKE '%{$keyword}%') |
31 |
)
|
32 |
ORDER BY t.name ASC, p.post_date DESC;"; |
33 |
|
34 |
} else { |
35 |
$querystr = "SELECT DISTINCT $wpdb->posts.* |
36 |
FROM $wpdb->posts, $wpdb->postmeta |
37 |
WHERE $wpdb->posts.ID = $wpdb->postmeta.post_id |
38 |
AND (
|
39 |
($wpdb->postmeta.meta_key = '_sku' AND $wpdb->postmeta.meta_value LIKE '%{$keyword}%') |
40 |
OR
|
41 |
($wpdb->posts.post_content LIKE '%{$keyword}%') |
42 |
OR
|
43 |
($wpdb->posts.post_title LIKE '%{$keyword}%') |
44 |
)
|
45 |
AND $wpdb->posts.post_status = 'publish' |
46 |
AND $wpdb->posts.post_type = 'product' |
47 |
ORDER BY $wpdb->posts.post_date DESC"; |
48 |
}
|
49 |
|
50 |
$query_results = $wpdb->get_results($querystr); |
51 |
|
52 |
if (!empty($query_results)) { |
53 |
|
54 |
$output = ''; |
55 |
|
56 |
foreach ($query_results as $result) { |
57 |
|
58 |
$price = get_post_meta($result->ID,'_regular_price'); |
59 |
$price_sale = get_post_meta($result->ID,'_sale_price'); |
60 |
$currency = get_woocommerce_currency_symbol(); |
61 |
|
62 |
$sku = get_post_meta($result->ID,'_sku'); |
63 |
$stock = get_post_meta($result->ID,'_stock_status'); |
64 |
|
65 |
$categories = wp_get_post_terms($result->ID, 'product_cat'); |
66 |
|
67 |
$output .= '<li>'; |
68 |
$output .= '<a href="'.get_post_permalink($result->ID).'">'; |
69 |
$output .= '<div class="product-image">'; |
70 |
$output .= '<img src="'.esc_url(get_the_post_thumbnail_url($result->ID,'thumbnail')).'">'; |
71 |
$output .= '</div>'; |
72 |
$output .= '<div class="product-data">'; |
73 |
$output .= '<h3>'.$result->post_title.'</h3>'; |
74 |
if (!empty($price)) { |
75 |
$output .= '<div class="product-price">'; |
76 |
$output .= '<span class="regular-price">'.$price[0].'</span>'; |
77 |
if (!empty($price_sale)) { |
78 |
$output .= '<span class="sale-price">'.$price_sale[0].'</span>'; |
79 |
}
|
80 |
$output .= $currency; |
81 |
$output .= '</div>'; |
82 |
}
|
83 |
if (!empty($categories)) { |
84 |
$output .= '<div class="product-categories">'; |
85 |
foreach ($categories as $category) { |
86 |
if ($category->parent) { |
87 |
$parent = get_term_by('id',$category->parent,'product_cat'); |
88 |
$output .= '<span>'.$parent->name.'</span>'; |
89 |
}
|
90 |
$output .= '<span>'.$category->name.'</span>'; |
91 |
}
|
92 |
$output .= '</div>'; |
93 |
}
|
94 |
if (!empty($sku)) { |
95 |
$output .= '<div class="product-sku">'.esc_html__( 'SKU:', 'textdomain' ).' '.$sku[0].'</div>'; |
96 |
}
|
97 |
|
98 |
if (!empty($stock)) { |
99 |
$output .= '<div class="product-stock">'.$stock[0].'</div>'; |
100 |
}
|
101 |
|
102 |
$output .= '</div>'; |
103 |
$output .= '</a>'; |
104 |
$output .= '</li>'; |
105 |
}
|
106 |
|
107 |
if (!empty($output)) { |
108 |
echo $output; |
109 |
}
|
110 |
}
|
111 |
}
|
112 |
|
113 |
die(); |
114 |
}
|
115 |
add_action( 'wp_ajax_search_product', 'search_product' ); |
116 |
add_action( 'wp_ajax_nopriv_search_product', 'search_product' ); |
Por ahora, presta atención a la parte add_action del código. ¿Ves los nombres de acción, con los prefijos wp_ajax_ y wp_ajax_nopriv_? Debemos usar los mismos nombres de acción que especificamos en el archivo main.js, search_product.
Ahora el núcleo de acción
Aquí estamos usando el método de consulta $wpdb para acelerar el proceso de consulta. No soy un gurú de MySQL, así que supongo que los profesionales pueden optimizarlo más, pero para nuestra tarea es lo suficientemente bueno y funciona como se esperaba.
Aquí primero comprobamos si se especificó alguna categoría y, a continuación, consultamos los resultados en esa categoría específica. Si no se especifica ninguna categoría, realizamos una consulta estándar de producto que contenga la palabra clave en el título, o el contenido, o coincida con el SKU. Y si tenemos los resultados creamos la salida basada en los resultados consultados.
Ahora volvamos a main.js. Si nuestra solicitud AJAX ha tenido éxito, devolvemos los datos de salida en la lista y se anexan al div vacío de resultados de búsqueda. Todo lo que queda es eliminar el tiempo de espera.
¡Eso es todo! Una eficaz y potente búsqueda AJAX de producto. Ahora, si vas al front-end, vuelve a cargar la página (no te olvides del almacenamiento en caché del navegador) puedes buscar productos y ver el widget en acción.
Conclusión
Eres libre de utilizar este plugin en tus proyectos, tanto comerciales como no comerciales. Espero que te guste y si tienes alguna idea puedes escribir tu opinión libremente en la siguente sección de comentarios. Puedes descargar el plugin desde GitHub. Y aquí está la demostración del plugin. ¡Gracias por leer!
