Forum
Add Search to Navigation Bar
Hello
This is my first project with Perch and I am working through is issue as I go, this one has stumped me though. I am struggling to insert a search bar within the navigation area, I am using Foundation 6 as a base. I think the issue is that item.html is an html file and not a php file, if I change item.html to php file nothing appears in the output html. Is there a way to include item.php? or is there a better way of doing this? The code I have so far is:-
item.html:-
<perch:before><section class="navigation" role="navigation"><!-- navigation --></perch:before> <perch:before><div class="top-bar"></perch:before> <perch:before><div class="top-bar-left"></perch:before> <perch:before><ul class="menu"></perch:before> <li><a class="<perch:pages id="pagePath" urlify="true" /><perch:if exists="ancestor_page OR current_page"> selected</perch:if>" href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a><perch:pages id="subitems" encode="false" /></li> <perch:after></ul></perch:after> <perch:after></div></perch:after> <perch:after><div class="top-bar-right"></perch:after> <perch:after><?php perch_search_form(); ?></perch:after> <perch:after></div></perch:after> <perch:after></div></perch:after> <perch:after></section></perch:after>
search_form.php:-
<ul class="menu"> <?php $query = perch_get('q'); perch_content_search($query); ?> <li class="has-form"> <div class="row collapse"> <div class="small-9 columns"> <perch:form id="search" method="get" action="/search_results.php"> <input type="search" id="q" placeholder="Search"> </div> <div class="small-3 columns"> <button class="expanded button" type="submit" value="Go"><span><i class="fa fa-search"></i></span></button> </div> </div> </perch:form> </li> </ul>
The output html:-
<section class="navigation" role="navigation"><!-- navigation -->
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li><a class="ra-6666-d76f selected" href="/">Home</a></li>
<li><a class="about" href="/about">About</a></li>
<li><a class="support" href="/support">Support</a></li>
<li><a class="blog" href="/blog">Blog</a></li>
<li><a class="contact" href="/contact">Contact</a></li>
<li><a class="shop" href="/shop">Shop</a></li>
<li><a class="basket" href="/basket">Basket</a></li>
<li><a class="checkout" href="/checkout">Checkout</a></li>
</ul>
</div>
<div class="top-bar-right">
<?php perch_search_form(); ?>
</div>
</div>
</section>
perch_content_search()
gives you your search results so you don't want that in your navigation bar.Just add a form into
item.html
where you need it.Update the
action
attribute to point to your SRP.Thanks
That worked a treat.
Will
I'm looking to similarly place the search form in the navigation bar. I have my navigation set up like this.
When I try adding the form into level1.html, it doesn't create a form. Instead, this is the code it kicks out.
Why is it associating "/templates/navigation/level1.html" with the form? Are you not able to use forms within the templates of perch_pages_navigation?