[Resolved] Replace GP Search icon with Ajax Search

Home Forums Support [Resolved] Replace GP Search icon with Ajax Search

Home Forums Support Replace GP Search icon with Ajax Search

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1358124
    nik9

    Hello there..

    I’m working right now on the Ajax search implementation.
    We want to replace the GP search with the Ajax search.

    Means:
    – Search Icon on Desktop to open the search instead of a search box and type to search.
    – Search icon on tablet and mobile and type to search.

    We followed this (https://generatepress.com/forums/topic/woocommerce-product-search-widget/page/2/) support topic and we was able to add the Ajax search to the Header.

    Current Settings:
    – Custom HTML Widget in the Header
    <span class="custom-search-item" title="Search"><a href="#"><span class="screen-reader-text">Search</span></a></span>

    – Add Code in GP Elements to hook in the Ajax search via shortcode
    <span class="custom-search-item" title="Search"><a href="#"><span class="screen-reader-text">Search</span>[wcas-search-form]</a></span>

    Settings here are:
    – Hook: inside_mobile_header
    – Execute Shortcode: ON
    – Execute PHP: OFF
    – Priotity: 10
    – Displayrule: Entire Site

    – Add jQuery via Plugin (Snippets) to add the function

    add_action( 'wp_footer', function () { ?>
    	<script>
    
    jQuery('.custom-search-item').on('click', function(e) {
        jQuery(this).toggleClass("close-search");
        jQuery('.dgwt-wcas-search-wrapp').toggleClass("visible");  
        e.preventDefault();
        });
    
    	</script>
    <?php } );

    – Insert some CSS to style

    .custom-search-item a:before {
        content: "\f002";
        font-family: GeneratePress;
        width: 1.28571429em;
        text-align: center;
        display: inline-block;
        margin-left: 10px;
    }
    
    .custom-search-item.close-search a:before {
        content: "\f00d";
    }
    
    @media (max-width: 768px) {
        #mobile-header>.inside-navigation {
            align-items: center;
        }
        .dgwt-wcas-search-wrapp {
            order: 5;
        }
        .custom-search-item {
            order: 3;
            padding-left: 20px;
            padding-right: 20px;
        }
        
        .dgwt-wcas-search-wrapp {
            max-height: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .dgwt-wcas-search-wrapp.visible {
            max-height: 100%;
            visibility: visible;
            pointer-events: auto;
        } 
    }

    This is our current setup.. we followed the other topic but unfortunately it’s not working properly n our page. πŸ™

    #1358400
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Something like this might be better: https://generatepress.com/forums/topic/replace-gp-search/#post-1272331

    That way you can just filter your custom search into the search div and use our existing JS/CSS.

    Let me know πŸ™‚

    #1358440
    nik9

    Hi Tom,

    Beast! Nice.. this is exactly what i’m looking for!
    If we get this sh*it done, I’ll buy you a beer πŸ™‚

    So i tried to implement the stuff.. it works 80%.. nice…

    Current Settings

    – Add function via Plugin (Snippets)

    add_filter( 'generate_navigation_search_output', function() {
        return sprintf(
            '<div class="navigation-search">%s</div>',
            do_shortcode( '[wcas-search-form]' )
        );
    } );

    – Add Code in GP Elements

    <a href="#" class="custom-search-toggle">
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
        </svg>
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
        </svg>
    </a>

    Settings here are:
    – Hook: inside_navigation
    – Execute Shortcode: OFF
    – Execute PHP: OFF
    – Priotity: 10
    – Displayrule: Entire Site

    – Insert some CSS to style

    .navigation-search {
        top: 100%;
    }
    
    @media (max-width: 768px) {
        .navigation-search.nav-search-active {
            position: relative;
            order: 20;
        }
    }
    
    .navigation-search {
        opacity: 0;
        transition: opacity 500ms ease;
        visibility: unset;
        left: unset;
    }
    
    .search-item.active svg:first-child {
        display: none;
    }
    
    .search-item.active svg:last-child {
        display: block;
    }
    
    .navigation-search {
        text-align: center;
    }
    
    #mobile-header.has-branding .menu-toggle {
        order: -1;
        margin-right: auto;
    }
    #mobile-header {
        position: relative;
    }
    
    .site-logo.mobile-header-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #mobile-header.has-branding .menu-toggle {
        order: -1;
        margin-right: auto;
    }

    On Desktop:
    – The Ajax Search is in a big whit box actually is ok. But the Ajax only take 50% of the space.
    – It’s not possible to klick on the Search icon and type. I have to click again into the search box to search
    – Next to the site logo on the left side, there is a search icon and a X.

    On Mobile / tablet:
    – If I click on the search icon, the search bar will open. But then I have to click again on the search bar. After that click the Ajax search will open and i have to click again to type. Is there a way that I only can click on the search icon and type?

    Thanks & Cheers!

    #1359366
    Tom
    Lead Developer
    Lead Developer

    Is there a reason for the Element and all of the CSS? The standard toggle should work without all of the extra stuff.

    Let me know πŸ™‚

    #1359374
    nik9

    Hi Tom

    Fair question.. I just followed the topic which you mentoined. πŸ™‚
    So for now I removed the element:

    <a href="#" class="custom-search-toggle">
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
        </svg>
        <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
            <path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
        </svg>
    </a>

    The additional Search icon and X are gone. Cool!

    Also I like the position of the Search bar if I click on the search icon in the navigation. So for that I need some CSS. Maybe its to much CSS.

    But the search box still looks strange.. and start typing after a click on the seach icon is not possible. πŸ™

    #1359538
    Tom
    Lead Developer
    Lead Developer

    Adding this may help with the appearance:

    .navigation-search {
        background: transparent;
    }

    As for the focus issue, that’s a bit harder.. You could try jQuery since you’re already loading it:

    jQuery( '.search-item a' ).on( 'click', function() {
        jQuery( '.dgwt-wcas-search-input' ).focus();
    } );
    #1361076
    nik9

    Hello Tom,

    Thanks! The Focus now works and its really cool.

    But I notices some UI issues when it somes to scrolling.

    When the Search Bar and the results are shown, we see no problems.
    But when we scroll up and down, the results box does not move very smooth.
    Also it overlaps the search bar sometimes. Here you can see what we exactly meaning πŸ™‚

    https://ibb.co/GsqsJg4
    https://ibb.co/6yxfPpp

    So is there a way the wen can fix this whit CSS or so?

    Currenty we only us this CSS here:

    .navigation-search {
        top: 100%;
    }
    
    .dgwt-wcas-search-wrapp {
    	max-width: inherit;
    }

    Cheers

    #1361288
    Tom
    Lead Developer
    Lead Developer

    It’s hard to tell since the results close when developer tools are open. It seems like they may be using javascript to calculate the top position. It does actually seem to be working, it’s just a little laggy. I’m not sure if there’s a solution for that – you may need to check with them.

    #1362215
    nik9

    Hi Tom,

    Yes.. but when the developer tools are open and you type in the search box with will open again.

    It’s working i a way yes.. but when I implement the search without replacing the GP Search its is much smoother and I have no display issues.

    #1362462
    Tom
    Lead Developer
    Lead Developer

    Yea, I believe that’s due to how the plugin is calculating the position of the results. I’m not sure there’s a way around it, unfortunately. However, you can ask their developers if they have any ideas.

    #1367493
    nik9

    Hi Tom, thanks! πŸ™‚

    I just noticed that the focus not work as expected. Sometimes it works sometime not.
    Is this something from GP?

    add_action( 'wp_footer', function () { ?>
    	<script>
    
    jQuery( '.search-item a' ).on( 'click', function() {
        jQuery( '.dgwt-wcas-search-input' ).focus();
    } );
    
    	</script>
    #1367922
    Tom
    Lead Developer
    Lead Developer

    Hmm, is it possible to give the custom search input a custom class? It would be great if we could give it the search-field class. Then, GP would focus to it automatically.

    #1374914
    nik9

    Hi Tom

    Thanks for the info. Now I was able to add the “Search-field” class.

    add_filter('dgwt/wcas/form/html', function($html){
        return str_replace('class="dgwt-wcas-search-input"', 'class="dgwt-wcas-search-input search-field"', $html);
    });

    And I also remove your focus code before. Or do I need this?

    add_action( 'wp_footer', function () { ?>
    	<script>
    
    jQuery( '.search-item a' ).on( 'click', function() {
        jQuery( '.dgwt-wcas-search-input' ).focus();
    } );
    
    	</script>
    <?php } );

    Now the focus works! But only one little issue..

    If I open the search bar with the search icon, the icon stays there. Is there a way to hide the search icon when the search bar is open?

    Btw: The Ajax search plugin has her own way to replace the GP search: https://ajaxsearch.pro/docs/integrations/generatepress-theme/

    Cheers

    #1375263
    Tom
    Lead Developer
    Lead Developer

    You can remove the javascript.

    To hide the close icon, you can do this:

    .search-item.active {
        opacity: 0;
    }
    #1375379
    nik9

    Thanks for this great support! πŸ™‚

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.