JavaScript Hooks

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>