-
AuthorPosts
-
October 8, 2014 at 5:37 pm #332578
What is the best way to add a custom search box to the main navigation? I tried adding the code below to the main menu in Appearance > Menus without any luck.
<input type="text" class="search" id="txtSearch" name="txtSearch" maxlength="150" onkeydown="javascript:return IsEnterPressed(event, 'SearchKeyword');" />
I inserted the code into the Navigation Label box hoping it would work.
I also want to add 2 menu options to the right of it. This is the current layout, and this is what we would like to append to the end.
.October 9, 2014 at 6:09 am #332940Hey LSpicer!
Thank you for using Enfold.
Add a custom link on Appearance > Menus. Add the search or input code as Navigation Label.
Cheers!
IsmaelOctober 9, 2014 at 6:26 pm #333386Thanks! I was able to get the search box to appear in the navigation, but it isn’t recognizing when the enter button is pressed. Below is what I placed inside the Navigation Label. Any ideas?
<input type="text" class="search" id="txtSearch" name="txtSearch" maxlength="150" onkeydown="javascript:return IsEnterPressed(event, document.getElementById('txtSearch').value, document);" />
The website is now live if you would like to see how the searchbox is currently functioning.
October 11, 2014 at 4:36 pm #334337Hey!
A quick view in my browser console shows that
IsEnterPressed
is not defined.Did you write the function IsEnterPressed anywhere?
Regards,
ArvishOctober 13, 2014 at 4:43 pm #335019Thanks for the catch! A team member commented out the function from the JS file and didn’t let me know.
New issue: The search box now recognizes the enter button press and sends the viewer to the shop site to view the results, but it isn’t sending the search terms through with it causing a 404 error. However, if I click back and then press enter again the search terms are sent through and the results populate. I don’t have that issue if I remove the search box from the main navigation and place it within a page. The only difference I see in the code is an anchor tag is placed around the search box when it is placed within the menu structure, and it isn’t there when the search box is placed within a page. Any ideas on why the text in the search box isn’t being sent on the first try? Could I be calling the JS file from the wrong area or is there a “preferred” area to call it from?
Image of the URL on first and second enter press: https://www.dropbox.com/s/gemlhczumus43xn/search-terms.jpg?dl=0
October 14, 2014 at 8:28 am #335419Hey!
I’m sorry but we don’t provide support for third party scripts as stated on our support policy. Please visit Envato Studio or Werkpress to further investigate the issue.
Best regards,
IsmaelOctober 14, 2014 at 5:04 pm #335662Hi Ismael,
I only asked because I was directed to place the code within the menu structure in a previous response. If there is a way I can place the search box after “Paintball FAQs” and before “Cart” that would be fine too. Even inserting code that strips the anchor tag from the search box would be helpful. If this still conflicts with the support policy, that’s fine as well.
October 18, 2014 at 4:39 am #337580Hey!
Have you tried using the
wp_nav_menu_items
filter? we use that to insert the default Enfold search field:add_filter( 'wp_nav_menu_items', 'avia_append_search_nav', 10, 2 ); add_filter( 'avf_fallback_menu_items', 'avia_append_search_nav', 10, 2 ); function avia_append_search_nav ( $items, $args ) { if(avia_get_option('header_searchicon','header_searchicon') != "header_searchicon") return $items; if(avia_get_option('header_position', 'header_top') != "header_top") return $items; if ((is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu")) { global $avia_config; ob_start(); get_search_form(); $form = htmlspecialchars(ob_get_clean()) ; $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown"> <a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a> </li>'; } return $items; }
Cheers!
JosueOctober 20, 2014 at 6:48 pm #338542No I haven’t tried wp_nav_menu_items yet. Thank you for bringing it to my attention! Would the functions file be the best location to place the filter’s code?
October 20, 2014 at 7:31 pm #338564Hey!
Yes, the child theme functions.php would be the best location.
Regards,
JosueOctober 20, 2014 at 11:37 pm #338749Thanks again for all of your help. 2 things:
- The search box now appears at the end of the main navigation. Is there a way to make it appear between “Paintball FAQs” and “Cart” from within the function? Or do I have to place the code for “Cart” and “My Account” with the search box function? I would like to keep as much as possible within the menu layout.
- I placed the code below into functions.php, but it no longer recognizes when the enter button is pressed. Any ideas? Could I be calling the JS file from the wrong place? It is being called from the header right before
<?php wp_head(); ?>
. I checked the source code, and the path to the JS file is correct.
/* * Add search box to main menu */ add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2); function add_search_box_to_menu ( $items, $args ) { if( $args->theme_location == 'avia' ) return $items."<li style='margin:9px 0 0 !important;'><input type='text' class='search' id='txtSearch' name='txtSearch' maxlength='150' onkeydown='javascript:return IsEnterPressed(event, document.getElementById('txtSearch').value, document);' /></li>"; return $items; }
October 28, 2014 at 8:16 am #342065Hi,
Try adding this at the very end of your theme / child theme functions.php file:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { $("li#menu-item-4014").before($("li.searchBox")); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Regards,
JosueOctober 28, 2014 at 9:24 am #342087Hey!
To move the search box before the Cart icon add the following at the bottom of your functions.php file:
function move_searchbox_script(){ ?> <script> (function($){ $(window).load(function() { var $el = $('li#menu-item-search'); $el.insertAfter($el.siblings(':eq(5)')); //$("li#menu-item-4014").before($("li.searchBox")); }); })(jQuery); </script> <?php } add_action('wp_footer', 'move_searchbox_script');
Cheers!
ArvishNovember 3, 2014 at 10:10 pm #345555Thanks for the reply Jose. That placed 2 search boxes in the navigation (screen cap.), but they were in the correct location. Any ideas why it placed 2 of them in the navigation?
Thank you too Arvish, but that function didn’t move the search box.
November 5, 2014 at 2:21 pm #346508Hi!
Now I only see one search box. Glad you could fix it!
If you have any more questions don’t hesitate to ask us. We are happy to assist.Regards,
AndyNovember 6, 2014 at 12:30 am #346879Hi Andy,
I didn’t fix it. I removed the code because I couldn’t leave it like that on our live site.
November 8, 2014 at 2:50 am #348039Hi!
I’m sorry but as I have said on my previous post, this particular customization is beyond the scope of support. Please hire a freelance developer or find a plugin that works with the theme. For further modifications, please visit Envato Studio or Werkpress.
Regards,
IsmaelApril 23, 2020 at 11:41 pm #1206711search box ????????
April 26, 2020 at 6:10 am #1207174 -
AuthorPosts
- You must be logged in to reply to this topic.