Forum

Thread tagged as: Question, Runway

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>
Will Moody

Will Moody 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

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.

<perch:form id="search" method="get" action="/your-search-result-page">
    <perch:label for="q">Search</perch:label>
    <perch:input type="search" id="q" />
    <perch:input type="submit" value="Go" />
</perch:form>

Update the action attribute to point to your SRP.
Will Moody

Will Moody 0 points

5 years ago

Thanks

That worked a treat.

Will
Chris Zobac

Chris Zobac 0 points

5 years ago

I'm looking to similarly place the search form in the navigation bar. I have my navigation set up like this.

    perch_pages_navigation(array(
                 'template' => array('level1.html', 'level2.html'),
      'hide-extensions' => true, 
    ));

When I try adding the form into level1.html, it doesn't create a form. Instead, this is the code it kicks out.

<perch:form template="/templates/navigation/level1.html" id="search" method="get">
    <div>
        <perch:label for="q">Search</perch:label>
        <perch:input type="search" id="q">
        <perch:input type="submit" value="Go">
    </perch:input></perch:input></div>
</perch:form>

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?