Use AWS in Avada Search on main menu only

  • Resolved summerlightning

    (@summerlightning)


    4 years, 9 months ago

    Hi,
    We use Avada on our website with AWS set to seamless integration and it works fantastically, so firstly, thanks ??

    I now need to use the standard Avada Search Function on our projects page only. I’ve tried adding as a widget, but oviously the seamless integration overrides this.

    I need to either:

    1) Be able to add the Avada search function to projects page, overriding the AWS settings.

    Or

    2) Add AWS only to replace the Search on the Main Menu when the customer clicks on Search Icon.

    I’ve searched extensively across the web and asked Avada, but they have asked me to contact you. I can see your instructions on the plugin page of what to put in, but I can’t for the life of me figure out where to find this and am hoping you can help with an add to functions.php please?

    I’d really appreciate your help.
    Thanks.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    Hello,

    It is possible to integrate AWS search form only inside Avada Main Menu. To do this firstly please disable ‘Seamless integratiin’ option. Than please add following code snippet

    add_action( 'wp_head', 'aws_wp_head' );

function aws_wp_head() { ?>

    <style>

        .fusion-flyout-search .aws-container {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            width: calc(100% - 40px);
            max-width: 600px;
            position: absolute;
            top: 40%;
            left: 20px;
            right: 20px;
        }

    </style>

    <script>

        window.addEventListener('load', function() {
            var awsSearch = document.querySelectorAll(".fusion-menu .fusion-main-menu-search a, .fusion-flyout-menu-icons .fusion-icon-search");
            var awsFormHtml = <?php echo json_encode( str_replace( 'aws-container', 'aws-container aws-js-seamless', aws_get_search_form( false ) ) ); ?>;

            var forms = document.querySelectorAll(".fusion-search-form, .fusion-custom-menu-item-contents form");
            if ( forms ) {
                for ( var i = 0; i < forms.length; i++ ) {
                    if ( forms[i].parentNode.outerHTML.indexOf('aws-container') === -1 ) {
                        forms[i].outerHTML = awsFormHtml;
                    }
                }
                window.setTimeout(function(){
                    jQuery('.aws-js-seamless').each( function() {
                        jQuery(this).aws_search();
                    });
                }, 1000);
            }

            if ( awsSearch ) {
                for (var i = 0; i < awsSearch.length; i++) {
                    awsSearch[i].addEventListener('click', function() {
                        window.setTimeout(function(){
                            document.querySelector(".fusion-menu .fusion-main-menu-search .aws-search-field, .fusion-flyout-search .aws-search-field").focus();
                        }, 100);
                    }, false);
                }
            }

        }, false);

    </script>

<?php }
    Thread Starter summerlightning

    (@summerlightning)

    Thanks for this. The code above causes Avada search to be used on the Homepage when clicking the search icon. Everywhere else, including clicking on the search icon from the menu, on other pages, widgets, project search, is utlising the AWS search.

    I’m testing this on our staging site. Let me know if I can send these details privately at all.

    I don’t think I was clear before. Just to clarify:

    When clicking on the Search icon in the main menu header, the AWS search should be utilised. This AWS search should load from the main header on all devices, regardless of what page the user is on.

    Anywhere else the search function is loaded should utlise Avada search.

    Does that help?
    Thank you for your time.

    Plugin Author ILLID

    (@mihail-barinov)

    Hello,

    Can you please give me the link where I can see this issue?

    Thread Starter summerlightning

    (@summerlightning)

    I’ve emailed.
    Thanks

    Thread Starter summerlightning

    (@summerlightning)

    Huge thanks to the guys over at AWS for their support in figuring this out for me.
    If anyone else needs, this was the final code used in functions.php that worked how I needed it with just Avada Search working from the Projects page and AWS elsewhere.

    //Add AWS Search to top header search only.
add_action( 'wp_head', 'aws_wp_head' );

function aws_wp_head() { ?>

    <style>

        .fusion-flyout-search .aws-container {
            margin: 0 auto;
            padding: 0;
            width: 100%;
            width: calc(100% - 40px);
            max-width: 600px;
            position: absolute;
            top: 40%;
            left: 20px;
            right: 20px;
        }

    </style>

    <script>

        window.addEventListener('load', function() {
            var awsSearch = document.querySelectorAll(".fusion-menu .fusion-main-menu-search a, .fusion-flyout-menu-icons .fusion-icon-search");
            var awsFormHtml = <?php echo json_encode( str_replace( 'aws-container', 'aws-container aws-js-seamless', aws_get_search_form( false ) ) ); ?>;

            var forms = document.querySelectorAll(".fusion-menu form");
            if ( forms ) {
                for ( var i = 0; i < forms.length; i++ ) {
                    if ( forms[i].parentNode.outerHTML.indexOf('aws-container') === -1 ) {
                        forms[i].outerHTML = awsFormHtml;
                    }
                }
                window.setTimeout(function(){
                    jQuery('.aws-js-seamless').each( function() {
                        jQuery(this).aws_search();
                    });
                }, 1000);
            }

            if ( awsSearch ) {
                for (var i = 0; i < awsSearch.length; i++) {
                    awsSearch[i].addEventListener('click', function() {
                        window.setTimeout(function(){
                            document.querySelector(".fusion-menu .fusion-main-menu-search .aws-search-field, .fusion-flyout-search .aws-search-field").focus();
                        }, 100);
                    }, false);
                }
            }

        }, false);

    </script>

<?php }
    Thread Starter summerlightning

    (@summerlightning)

    Change the var forms line to this also to make this solution work on Mobile Search too (I had forgotten about this, but the team were amazing to help)

    var forms = document.querySelectorAll(".fusion-menu form, .fusion-mobile-menu-search form");

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Use AWS in Avada Search on main menu only’ is closed to new replies.