- This topic has 15 replies, 2 voices, and was last updated 3 years, 8 months ago by Tom.
-
AuthorPosts
-
July 9, 2020 at 8:35 am #1358124nik9
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. π
July 9, 2020 at 2:00 pm #1358400TomLead DeveloperLead DeveloperHi 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 π
July 9, 2020 at 2:41 pm #1358440nik9Hi 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!
July 10, 2020 at 10:05 am #1359366TomLead DeveloperLead DeveloperIs 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 π
July 10, 2020 at 10:14 am #1359374nik9Hi 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. π
July 10, 2020 at 2:30 pm #1359538TomLead DeveloperLead DeveloperAdding 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(); } );
July 12, 2020 at 9:44 am #1361076nik9Hello 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/6yxfPppSo 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
July 12, 2020 at 2:32 pm #1361288TomLead DeveloperLead DeveloperIt’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.
July 13, 2020 at 9:26 am #1362215nik9Hi 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.
July 13, 2020 at 2:15 pm #1362462TomLead DeveloperLead DeveloperYea, 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.
July 18, 2020 at 2:47 am #1367493nik9Hi 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>
July 18, 2020 at 9:48 am #1367922TomLead DeveloperLead DeveloperHmm, 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.July 24, 2020 at 8:02 am #1374914nik9Hi 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
July 24, 2020 at 1:56 pm #1375263TomLead DeveloperLead DeveloperYou can remove the javascript.
To hide the close icon, you can do this:
.search-item.active { opacity: 0; }
July 24, 2020 at 5:15 pm #1375379nik9Thanks for this great support! π
-
AuthorPosts
- You must be logged in to reply to this topic.