Ajax search plugins

[tony_spiloes]

I’ve installed, activated and tried multiple AJAX search plugins to improve the search build into Claue. Yet none of them are responsive and only give search results after I press enter in the search bar. No products are shown immediately while typing in search words.

[Rahim]

Hi Tony,

Hope you are fine. 🙂

I am using Ajax Search for WooCommerce on my site.

And it’s working fine.

Have you checked this plugin?

Here is my site: Look.ir

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

@Rahim thank you for share and support us.

@Tony did you try this plugin. Please let us know if you need more help.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Rahim,

that looks really good. I installed the plugin but it doesn’t work.
Look here : https://happinesbox.eu/test

Also, how did you integrate it as the default search replacing the one that’s build into the Claue theme?
When I click on the search icon in the right top of the screen, I get this black overlay page where you can start typing your search words.

Kind regards,
Tony

[tony_spiloes]

Hi,
I hadn’t tried this one before, but now I did and same result. Not doing anything.
BTW, I looked at Look.ir from Rahim. That’s one part of what I would want but how did he do this. My default search from Claue opens this black overlay where I can type.

Kind regards,
Tony

[Rahim]

Hi Tony,

As I see you are using header layout 3 on your site.

The file layout-3.php should be changed for the integration and must be placed in your child-theme.

I recommend you to wait for Harry’s support. 🙂

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

@Rahim, could you upload your layout-3.zip on this topic.

@Tony, please download file after Rahim upload and extract to claue-child > views > header

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Harry,

will this also solve the fact that the search box itself is not showing any results?
If you just look here, you’ll see that whatever you type in the box, it’s not responding with any returned matches.

https://happinesbox.eu/test

bottom of the page is the search box generated by integrating the shortcode that comes with this plugin.

Kind regards,
Tony

[Rahim]

Hi Harry,

As you know I am using the header layout 4 and I have customized by your help via placing the short code of Ajax plugin.

Tony is using header layout 3

Kind regards

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

In plugin description:

HOW TO USE?
Use shorcode [wcas-search-form] in page/post editor or in your Child Theme template files.
Go to the “Widgets Screen” and assign widget “Woo Ajax Search” to one of the widget area.

Regards

Rahim Vaziri
CEO & Founder at Look.ir

[tony_spiloes]

Rahim,

this is how I did it, I used the shortcode [wcas-search-form] in this page. When I type in the search box, nothing happens however. It behaves like a normal (non AJAX) box, not showing any results. Not even when I enter or click the search button.

This is my main problem.
Kind regards,
Tony

[Harry]

Hi Tony,

Please copy file layout-3.php from claue > views > header to claue-child > views > header and replace code from line 99-100

<input class="w__100 jas-ajax-search" type="text" name="s" placeholder="<?php echo esc_html__( 'Search for...', 'claue' ); ?>" />
			<input type="hidden" name="post_type" value="product">

to

<?php echo do_shortcode ('[wcas-search-form]') ?>

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Harry,

I’ve meanwhile activated a child theme successfully and added the file header-3.php to the child theme.
I then deleted the lines 99-100 from the original file
<input class=”w__100 jas-ajax-search” type=”text” name=”s” placeholder=”<?php echo esc_html__( ‘Search for…’, ‘claue’ ); ?>” />
<input type=”hidden” name=”post_type” value=”product”>

and replaced it with this : <?php echo do_shortcode (‘[wcas-search-form]’) ?>

But now I find that when I don’t find any results, I can’t close the black overlay that opens.

Kind regards,
Tony

[tony_spiloes]

Harry,

before I change my header section, I want to be sure if this will also solve the fact that the box is just not responding when you type in words. This is the main problem. I would also want to use this search box in other sections of my website by using the shortcode.

Will this work?

Kind regards,
Tony

[Harry]

Hi Tony,

It now have error js between (olark, happiness, woocommerce bought together) on your site. Please fix conflict js first.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Harry,

I’ve deactivated the plugin Olark and Woocommerce Bought Together. I don’t know what “happiness” was in your list.
The problem however persists. How did you find out about this JS conflict? Can I check that too?

Kind regards,
Tony

[Harry]

Hi Tony,

It now still have Woo Product Slider Pro, Please try deactivate this plugin.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Harry,

this plugin Woo Product Slider Pro is the culprit. I’ve meanwhile reactivated the other plugins and the search still works.
I will now try to do as you suggested to upgrade my search in the header section.

Thanks,
Tony

[tony_spiloes]

Hi Harry,

one more question. Is there a way to have the search box in the header section, instead of the search icon which then leads to the search box?
That’s just more user friendly (less clicks).

Kind regards,
Tony

[Harry]

Hi Tony,

Please change code on layout-3.php line 78-79

<?php if ( cs_get_option( 'header-search-icon' ) ) : ?>
							<a class="sf-open cb chp hidden-xs" href="javascript:void(0);"  title="<?php echo esc_html__( 'Search', 'claue' ); ?>"><i class="pe-7s-search"></i></a>
						<?php endif; ?>

to

<?php echo do_shortcode ('[wcas-search-form]') ?>

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[tony_spiloes]

Hi Harry,

I noticed the WordPress installation doesn’t use a child theme. Could you help me set this up? I guess not having a child theme results in loss of modifications and customizations when a new version of the Claue theme is installed?

Kind regards,
Tony

[Harry]

Hi Tony,

The child theme included in package ypu download from ThemeForest. And when you update main theme your code in child theme still prevent not lose anything.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi Tony,

Sorry for wrong code.

Please change code from line 97 – 103

<form class="header__search w__100 dn pf" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" <?php jas_claue_schema_metadata( array( 'context' => 'search_form' ) ); ?>>
	<div class="pa">
		<input class="w__100 jas-ajax-search" type="text" name="s" placeholder="<?php //echo esc_html__( 'Search for...', 'claue' ); ?>" />
		<input type="hidden" name="post_type" value="product">
	</div>
	<a id="sf-close" class="pa" href="#"><i class="pe-7s-close"></i></a>
</form><!-- #header__search -->

to

<div class="header__search w__100 dn pf">
	<div class="pa">
		<?php echo do_shortcode ('[wcas-search-form]') ?>
	</div>
	<a id="sf-close" class="pa" href="#"><i class="pe-7s-close"></i></a>
</div><!-- #header__search -->

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts