Replace theme Fury search box

  • Resolved Balagur

    (@honoren)


    4 years 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 4 years ago by Balagur.
    • This topic was modified 4 years ago by Balagur.
    • This topic was modified 4 years 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)

    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)

    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.