OpenCart: How to move search field to top menu (content_top.tpl)

Date: 2011-10-31

Please read this article to learn how to easy move search field to another part of your page. In my case I will move it to my custom menu. First you need to copy the code for the search form from: /catalog/view/theme/-yourtheme-/template/common/header.tpl

Paste these lines into the file /catalog/controller/common/content_top.php
under public function index(). Just paste it below the line 10 or 11.

Copy now language variable for the input search text to the right language file. Copy variable $_['text_search'] = 'Search'; from /language/-yourlangugage-/common/header.php to /language/-yourlangugage-/yourlanguage.php

The last thing we need to make is to copy js function that will post our search. Your search field is for sure not placed in the #header at this time so we need to copy function from /catalog/view/javascript/common.js and rename it.

Copy and paste this function into the same js file and don't forget to rename #header according to your div's/container's ID (#example) or class (.example).