Replace theme Fury search box

Resolved Balagur
(@honoren)

5 years, 3 months ago
Hello. Can’t integrate your search with the Fury theme properly. I tried all your suggested options in the documentation, only this code helped:
```
add_filter( 'aws_js_seamless_selectors', 'my_aws_js_seamless_selectors' );
function my_aws_js_seamless_selectors( $selectors ) {
    $selectors[] = 'header .search-visible';
    return $selectors;
}
```
But it completely replaces the entire search form. And when you click on the Search button (which opens the search bar), you cannot close the search pop-up window, since when you change the form to yours, the clear and close buttons are removed.

If you replace the class Forms> Input, then the buttons remain, but your search is displayed crookedly and does not work.

Help solve the problem.
[Signature links removed by moderator per forum guidelines.]
- This topic was modified 5 years, 3 months ago by Balagur.
- This topic was modified 5 years, 3 months ago by Balagur.
- This topic was modified 5 years, 3 months ago by James Huff. Reason: signature links removed
The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

ILLID

(@mihail-barinov)

5 years, 3 months ago

Hello,

Please use following code

add_filter( 'aws_js_seamless_selectors', 'my_aws_js_seamless_selectors' );
function my_aws_js_seamless_selectors( $selectors ) {
    $selectors[] = 'header .site-search';
    return $selectors;
}

add_filter( 'aws_searchbox_markup', 'my_aws_searchbox_markup' );
function my_aws_searchbox_markup( $markup ) {
    global $wp_current_filter;
    if ( in_array( 'wp_head', $wp_current_filter ) ) {
        $search_tools = '<div class="search-tools">
            <button type="button" class="clear-search">' . esc_html( "Clear", "fury" ) . '</button>
            <button type="button" class="close-search" aria-label="' . esc_attr( "Close search", "fury" ) . '"><i class="icon-cross"></i></button>
        </div>';
        $markup = str_replace( 'aws-container', 'aws-container aws-fury-navbar', $markup );
        $markup = str_replace( 'aws-search-form', 'aws-search-form site-search', $markup );
        $markup = str_replace( '<div class="aws-search-clear">', $search_tools . '<div class="aws-search-clear">', $markup );
    }
    return $markup;
}

add_action( 'wp_head', 'fury_wp_head' );
function fury_wp_head() { ?>
    <style>
        .aws-fury-navbar.aws-container,
        .aws-fury-navbar.aws-container form {
            height: 100%;
            position: absolute;
            width: 100%;
        }
        .aws-fury-navbar.aws-container .aws-search-form.aws-show-clear.aws-form-active .aws-search-clear {
            display: none !important;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            if ( typeof jQuery !== 'undefined' ) {

                jQuery(document).on( 'click', '.aws-fury-navbar .clear-search', function () {
                    jQuery('.aws-fury-navbar input').val('');
                    jQuery('.aws-search-result').hide();
                    jQuery('.aws-fury-navbar .aws-search-form').removeClass('aws-form-active');
                } );

                jQuery(document).on( 'click', '.aws-fury-navbar .close-search', function () {
                    jQuery('.aws-fury-navbar .aws-search-form').removeClass('search-visible');
                    jQuery('.aws-fury-navbar input').val('');
                    jQuery('.aws-search-result').hide();
                    jQuery('.aws-fury-navbar .aws-search-form').removeClass('aws-form-active');
                } );

            }
        }, false);
    </script>
<?php }

Regards

Thread Starter

Balagur

(@honoren)

5 years, 3 months ago

Great, this code helped, thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Replace theme Fury search box’ is closed to new replies.