// PHP Action
function highlight_text($text, $keyword) {
return preg_replace('/(' . preg_quote($keyword, '/') . ')/i', '<strong>$1</strong>', $text);
}
add_action('wp_ajax_rst_ajax_search', 'rst_ajax_search_action');
add_action('wp_ajax_nopriv_rst_ajax_search', 'rst_ajax_search_action');
function rst_ajax_search_action() {
global $wp_query;
$s = isset($_POST['s']) ? sanitize_text_field($_POST['s']) : '';
if ($s) {
$args = array(
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => 10,
's' => $s,
);
$the_query = new WP_Query($args);
$wp_query = $the_query;
$i = 0;
if ($the_query->have_posts()) :
?>
<div class="rst-search-result-product">
<span class="result-head">PRODUCTS<span>(<?php echo esc_html($the_query->found_posts); ?>)</span></span>
<div class="rst-list-result-product">
<div class="rst-list-result-product-column">
<?php
while ($the_query->have_posts()) : $the_query->the_post();
$product_id = get_the_ID();
$i++;
$product = wc_get_product($product_id);
$sku = $product->get_sku();
if($i == 6){
echo '</div><div class="rst-list-result-product-column">';
}
?>
<div class="rst-item-result-product">
<div class="rst-item-result-product-thumb">
<?php echo get_the_post_thumbnail($product_id, 'woocommerce_thumbnail'); ?>
</div>
<div class="rst-item-result-product-meta">
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<?php
if($sku){
?>
<span>SKU: <?php echo esc_html($sku); ?></span>
<?php
}
?>
</div>
</div>
<?php
endwhile;
?>
</div>
</div>
<?php
if ($the_query->found_posts > 10) {
?>
<div class="wiew_all_product_wrap">
<a href="<?php echo esc_url(home_url('/?s=' . $s . '&post_type=product')); ?>" class="wiew_all_product">View all products </a>
</div>
<?php
}
?>
</div>
<div class="rst-search-result-meta">
<?php
$args = array(
'taxonomy' => 'product_cat',
'number' => 2,
'orderby' => 'name',
'name__like' => $s,
'hide_empty' => false,
);
$tags = get_terms($args);
$total = count($tags);
//var_dump($tags);
if (!empty($tags) && !is_wp_error($tags)) {
$y = 0;
?>
<div class="rst-search-result-meta-box rst-search-result-meta-box-product-cat">
<span class="result-head">CATEGORIES<span>(<?php echo $total; ?>)</span></span>
<ul>
<?php
foreach ($tags as $tag) {
$y++;
$tag_link = get_tag_link($tag->term_id);
$term = get_term($tag->term_id);
$thumbnail_id = get_term_meta( $tag->term_id, 'thumbnail_id', true );
$thumbnail_url = wp_get_attachment_url( $thumbnail_id );
$parent_terms = [];
while ($term->parent != 0) {
$term = get_term($term->parent);
if (!is_wp_error($term) && $term) {
$parent_terms[] = $term;
}
}
$in = '';
if (!empty($parent_terms)) {
$in = 'in ';
$reversed_array = array_reverse($parent_terms);
$z = 0;
foreach ($reversed_array as $item) {
$z++;
if($z == 1){
$in = $in . esc_html($item->name);
}else{
$in = $in . ' > ' . esc_html($item->name);
}
}
}
$title_tag = highlight_text($tag->name,$s);
?>
<li><a href="<?php echo esc_url($tag_link); ?>" class="taxonomy-link-meta">
<?php
if ( $thumbnail_url ) {
?>
<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="" />
<?php
}
?>
<div>
<h4><?php echo $title_tag; ?></h4>
<?php
if($in){
?>
<span><?php echo $in; ?></span>
<?php
}
?>
</div>
</a></li>
<?php
//if($y == 2) break;
}
?>
</ul>
</div>
<?php
}
?>
<?php
$args = array(
'taxonomy' => 'post_tag',
'number' => 1,
'name__like' => $s,
'hide_empty' => true,
);
$tags = get_terms($args);
if (!empty($tags) && !is_wp_error($tags)) {
?>
<div class="rst-search-result-meta-box">
<span class="result-head">TAGS</span>
<ul>
<?php
foreach ($tags as $tag) {
$tag_link = get_tag_link($tag->term_id);
$title_tag = highlight_text($tag->name,$s);
?>
<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
<?php
}
?>
</ul>
</div>
<?php
}
?>
<?php
$args_post = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 1,
's' => $s,
);
$the_query_post = new WP_Query($args_post);
if ($the_query_post->have_posts()) :
?>
<div class="rst-search-result-meta-box">
<span class="result-head">POSTS</span>
<ul>
<?php
while ($the_query_post->have_posts()) : $the_query_post->the_post();
$tag_link = get_the_permalink();
$title_tag = highlight_text(get_the_title(),$s);
?>
<li><a href="<?php echo esc_url($tag_link); ?>"><?php echo $title_tag; ?></a></li>
<?php
endwhile;
?>
</ul>
</div>
<?php
endif;
wp_reset_query();
?>
</div>
<?php
else :
echo '<p class="no-result">No results</p>';
endif;
wp_reset_query();
}
exit;
}
//Js Call
jQuery('.rst-search .rst-wcas-search-input').on("input", function(e) {
e.preventDefault();
var dInput = this.value;
if (dInput.length >= 2) {
jQuery('.rst-search-result').addClass('show');
jQuery('.rst-wcas-proccesing').addClass('show');
jQuery('.rst-wcas-close').removeClass('show');
var ajax_url = jQuery('.ajax_url').val();
jQuery.ajax({
type: "POST",
url: ajax_url,
data: {
'action' : 'rst_ajax_search',
's' : dInput,
}
}).done(function(data){
var items = jQuery(data);
jQuery('.rst-wcas-proccesing').removeClass('show');
jQuery('.rst-wcas-close').addClass('show');
jQuery('.rst-search-result-inner').html(items);
});
}
});
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter