Most plugin customization can be made by using the variaty of available php hooks.
But plugin also has several JavaScript actions that can help when php hooks are useless.
aws_results_html filter
html = AwsHooks.apply_filters( 'aws_results_html', html, { response: response, data: d } );
Filter generated HTML output for the Ajax search results block before displaying.
Changelog
- Added in version 2.05
Parameters
- html (string) HTML output
- options.response (object) Array of products and taxonomies that will be shown inside the search results block
- options.data (object) Some search form data like plugin options
Example
Show at the top of search results list text N items found with the number of total products found.
<script>
window.addEventListener('load', function() {
function aws_results_html( html, options ) {
var productsNum = options.response.products.length;
if ( productsNum > 0 ) {
html = html.replace('<div class="aws_results style-inline">', '<div class="aws_results style-inline"><li style="padding: 10px 8px;" class="aws_result_item">'+productsNum+' items found</li>');
}
return html;
}
if ( typeof AwsHooks === 'object' && typeof AwsHooks.add_filter === 'function' ) {
AwsHooks.add_filter( 'aws_results_html', aws_results_html );
}
}, false);
</script>
aws_results_layout filter
styles = AwsHooks.apply_filters( 'aws_results_layout', styles, { resultsBlock: $resultsBlock, form: self } );
Filter styles for search results list before applying.
Changelog
- Added in version 2.10
Parameters
- styles (object) Results box styles:
styles.width,styles.top,styles.left - options.resultsBlock (object) jQuery object of the current results box
- options.form (object) jQuery object of the current search form
Example
Lets change search results box width and make it 1.5 times bigger than search form width.
<script>
window.addEventListener('load', function() {
function aws_results_layout( styles, options ) {
styles.width = styles.width * 1.5;
return styles;
}
if ( typeof AwsHooks === 'object' && typeof AwsHooks.add_filter === 'function' ) {
AwsHooks.add_filter( 'aws_results_layout', aws_results_layout );
}
}, false);
</script>
aws_results_append_to filter
var appendResultsTo = AwsHooks.apply_filters( 'aws_results_append_to', 'body', { form: self, data: d } );
Css selector for container where search results block must be appended.
Changelog
- Added in version 2.16
Parameters
- appendResultsTo (string) Css selector for container. Default =
body - options.form (object) jQuery object of the current search form
- options.data (object) Some search form data like plugin options
Example
Lets append search results block to custom container with class name post-formatting instead of default body.
add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
$script = "
function aws_results_append_to( container, options ) {
return '.post-formatting';
}
AwsHooks.add_filter( 'aws_results_append_to', aws_results_append_to );
";
wp_add_inline_script( 'aws-script', $script);
wp_add_inline_script( 'aws-pro-script', $script);
}
aws_show_modal_layout filter
var show = AwsHooks.apply_filters( 'aws_show_modal_layout', false, { form: self, data: d } );
Show or not full screen search layout. By default this layout will be not available for search forms that are inside fixed css blocks. With this filter it is possible to change this behavior or enable full screen layout only for some of search boxes. Also with this filter it is possible to enable full screen search for desktop devices that is not possible by default.
Changelog
- Added in version 2.17
Parameters
- show (bool) Show or not mobile full screen layout
- options.form (object) jQuery object of the current search form
- options.data (object) Some search form data like plugin options
Example
Lets enable mobile full screen layout for all mobile forms even if they are inside fixed blocks like headers. Note: it is still necessary to enable Mobile full screen option from the plugin settings page.
add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
function aws_wp_enqueue_scripts() {
$script = "
function aws_show_mobile_layout( show, options ) {
return true;
}
AwsHooks.add_filter( 'aws_show_mobile_layout', aws_show_mobile_layout );
";
wp_add_inline_script( 'aws-script', $script);
wp_add_inline_script( 'aws-pro-script', $script);
}
awsShowingResults event
Trigger any time when search form performing the search and shows new search results.
Example
<script>
jQuery(document).on('awsShowingResults', function (){
console.log('awsShowingResults');
});
</script>
awsLoaded event
Triggered when Advanced Woo Search plugin is fully loaded.
Example
Let's add class name .aws-search-form-class to the plugin search form when it is fully loaded.
<script>
jQuery(document).on('awsLoaded', function (e){
e.detail.form.find(".aws-search-form").addClass("aws-search-form-class");
});
</script>
relayout event
Run event to re-calculate search results box position.
Example
<script>
$('.aws-container').each( function() {
$(this).aws_search('relayout');
});
</script>