cancel
Showing results for 
Search instead for 
Did you mean: 

How to add search bar to custommenu navigation?

How to add search bar to custommenu navigation?

I've been trying to figure out how to add the search bar to inside the horizontal navigation menu;

Heres my phtml code:

<?php
    Mage::helper('custommenu')->saveCurrentCategoryIdToSession();
    $menuData = Mage::helper('custommenu')->getMenuData();
    extract($menuData);
    // ---
    $txtLoading = '';
    $txtMenu = $this->__('Menu');
    $xRtl = $_rtl ? ' rtl' : '';
    $wpInitContent = <<<HTML
    <div id="custommenu-loading" class="$xRtl">  
        <div class="menu">
            <div class="parentMenu menu0">
                <a href="javascript&colon;;">
                    <span>$txtLoading</span>
                </a>  
            </div>
        </div>
        <div class="clearBoth"></div>
    </div>

    <div id="custommenu" class="$xRtl" style="display:none;">
        <div class="menu">
            <div class="parentMenu menu0">

                <a href="javascript&colon;;">
                    <span>$txtLoading</span>
                </a>
            </div>
        </div>
        <div class="clearBoth"></div>
    </div>

    <div id="custommenu-mobile" class="$xRtl" style="display:none;">
        <div id="menu-button" onclick="wpMenuButtonToggle()">
            <a href="javascript&colon;void(0);">
                <span>$txtMenu</span>
            </a>
        </div>
        <div id="menu-content" style="display:none;">
            <div id="menu-mobile-loading" class="menu-mobile level0">
                <div class="parentMenu">
                    <a href="javascript&colon;;">
                        <span>$txtLoading</span>
                    </a>
                </div>
            </div>
            <div class="clearBoth"></div>
        </div>
    </div>
HTML;
?>

<div class="nav-container" id="wp-nav-container"></div>
<script type="text/javascript">
//<![CDATA[
var CUSTOMMENU_POPUP_WIDTH = <?php echo $_popupWidth; ?>;
var CUSTOMMENU_POPUP_TOP_OFFSET = <?php echo $_popupTopOffset; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_DISPLAYING = <?php echo $_popupDelayBeforeDisplaying; ?>;
var CUSTOMMENU_POPUP_DELAY_BEFORE_HIDING = <?php echo $_popupDelayBeforeHiding; ?>;
var CUSTOMMENU_RTL_MODE = <?php echo $_rtl; ?>;
var CUSTOMMENU_MOBILE_MENU_WIDTH_INIT = <?php echo $_mobileMenuWidthInit; ?>;
var wpCustommenuTimerShow = {};
var wpCustommenuTimerHide = {};
var wpActiveMenu = null;
var wpMobileMenuEnabled = <?php echo $_mobileMenuEnabled; ?>;
var wpMenuAjaxUrl = '<?php echo $_menuAjaxUrl; ?>';
var wpMoblieMenuAjaxUrl = '<?php echo $_moblieMenuAjaxUrl; ?>';
var wpPopupMenuContent = '';
var wpMobileMenuContent = '';
if ($('wp-nav-container') != undefined) {
    $('wp-nav-container').update(<?php echo Mage::helper('core')->jsonEncode($wpInitContent); ?>);
}
<?php if (Mage::getStoreConfig('custom_menu/general/ajax_load_content')) : ?>
wpCustomMenuMobileToggle();
Event.observe(window, 'resize', function() {
    wpCustomMenuMobileToggle();
});
<?php endif; ?>
//]]>
</script>


<script type="text/javascript">
//<![CDATA[
Event.observe(document, 'dom:loaded', function(){
    $$('.skip-nav').each(function(element) {
        element.observe('click', function(event) {
            wpMenuButtonToggle();
        });
    });
});
//]]>
</script>

I've tried adding multiple ways of putting the search code direct, or referencing as a get child html code, but it only places it above, or below, not inside.

Any help would be appeciated!

15 REPLIES

Re: How to add search bar to custommenu navigation?

Hi,

This is the standard way of magento to call the block using XML.

Use local.xml or create a new one and add this code:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="catalog.topnav">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
   </default>
</layout>

 

Open your phtml and add <?php echo $this->getChildHtml('topSearch') ?> to the area you want to display.

NOTE: This will work only if your phtml file for navigation is included in system by magento standard way. (using XML)

Found something useful, please give "Kudos" or "Accept as Solution" for Token of Appreciation.
Free Magento Extensions : https://magecomp.com/free-magento-extensions.html

Re: How to add search bar to custommenu navigation?

I'm using a complete customized theme with custom menu.

The file that references the top menu is   top.phtml for me but adding that line does nothing, it puts it below or above the menu.

Then theres WP_Block_Custom_Menu file that controls the contents of the menu, the only thing I can think of is adding it to there.

Re: How to add search bar to custommenu navigation?

Hi @damiende 

 

Based on your previous post it seems there are two functions controlling the actions of your menu.

 

drawCustomMenuMobileItem

 

And 

 

drawCustomMenuItem

 

Within these two you can add the search block. Since this plugin is kinda schechie to begin with I won't feel to bad about not doing this via the layout. But this will limit your opertunities going forward a bit.

 

We still need to use the search block @theMageComp suggested. So within these to methods you need to add:

 

// $html needs to be in the drawCustomMenuMobileItem method and should be replaced with $htmlTop in the drawCustomMenuItem method 

$html[] = $this->getLayout()
    ->createBlock('core/template')
    ->setTemplate('catalogsearch/form.mini.phtml')
    ->toHtml();

 

This should put the search block within your menu navigation.

 

Again this is something I would defendly do via the layout, but since I don't have access to that I can't say tell your actualy how to do that here :-(

 

 

Re: How to add search bar to custommenu navigation?

Heres the local.xml 

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">
    <default>
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="head">
            <action method="addCss">
                <stylesheet>css/color.css</stylesheet>
            </action>
            <action method="addCss">
                <stylesheet>css/skin.css</stylesheet>
            </action>
            <action method="addCss">
                <stylesheet>css/media-small.css</stylesheet>
            </action>
            <action method="addCss">
                <stylesheet>css/media-480.css</stylesheet>
            </action>
            <action method="addCss">
                <stylesheet>css/media-800.css</stylesheet>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/respond.js</name>
                <params />
                <if>lt IE 9</if>
            </action>
        </reference>
        <reference name="right">
            <block type="cms/block" name="cms_right_info_block" before="-">
                <action method="setBlockId">
                    <block_id>right_info_block</block_id>
                </action>
            </block>
           
            /*<block type="cms/block" name="right_info_block2" block_id="right_info_block2" after="-"/>*/
           
<block type="cms/block" name="right_info_block2" after="-">
<action method="setBlockId"><block_id>right_info_block2</block_id></action> 
</block>

            <action method="unsetChild"><alias>cart_sidebar</alias></action>
            <action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
            <action method="unsetChild"><alias>right.reports.product.compared</alias></action>
            <action method="unsetChild"><alias>catalog.compare.sidebar</alias></action>
            <remove name="paypal.partner.right.logo" />
            <remove name="right.permanent.callout" />
            <remove name="left.reports.product.viewed" />
        </reference>

        <reference name="footer">
            <remove name="copyright.blog.footer" />
            <block type="cms/block" name="page_footer_block" before="-">
                <action method="setBlockId">
                    <block_id>page_footer_block</block_id>
                </action>
            </block>
        </reference>
 

        <reference name="left">
            <block type="cms/block" name="cms_left_info_block" after="catalogsearch.leftnav" before="newsletter">
                <action method="setBlockId">
                    <block_id>left_info_block</block_id>
                </action>
            </block>
            <block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
                    <label>Shopping Cart Sidebar Extra Actions</label>
                </block>
            </block>
            <block type="reports/product_viewed" after="cart_sidebar" name="left.reports.product.viewed" template="reports/product_viewed.phtml" />
            <block type="reports/product_compared" after="cart_sidebar" name="left.reports.product.compared" template="reports/product_compared.phtml" />
            <block type="catalog/product_compare_sidebar" after="cart_sidebar" name="left.catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml" />
            <remove name="left.permanent.callout" />
        </reference>
        <reference name="header">
            <block type="directory/currency" name="currency_header" as="currency_header" before="-" template="directory/currency.phtml" />
            <block type="checkout/cart_sidebar" name="header_cart" template="checkout/cart/sidebar_top.phtml" before="-">
                <action method="addItemRender">
                    <type>simple</type>
                    <block>checkout/cart_item_renderer</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
                <action method="addItemRender">
                    <type>grouped</type>
                    <block>checkout/cart_item_renderer_grouped</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
                <action method="addItemRender">
                    <type>configurable</type>
                    <block>checkout/cart_item_renderer_configurable</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
                <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" />
            </block>
            <remove name="top.links" />
            <block type="page/template_links" name="advanced_search_link" as="advanced_search_link" template="page/template/alinks.phtml">
                <action method="addLink" translate="label title" module="catalogsearch">
                    <label>Advanced Search</label>
                    <url helper="catalogsearch/getAdvancedSearchUrl" />
                    <title>Advanced Search</title>
                </action>
            </block>
            <block type="page/template_links" name="top.links.custom" as="topLinksCustom">
                <block type="checkout/links" name="checkout_cart_link">
                    <action method="addCheckoutLink" />
                </block>
            </block>
            <block type="page/template_links" template="page/template/clinks.phtml" id="top.links.cart" name="top.links.cart" as="topLinksCart">
                <block type="wishlist/links" name="wishlist_link" />
                <action method="addLinkBlock">
                    <blockName>wishlist_link</blockName>
                </action>
            </block>
            <block type="cms/block" name="quick_access_links">
                <action method="setBlockId">
                    <block_id>quick_access_links</block_id>
                </action>
            </block>
            <block type="cms/block" name="head_phone_block">
                <action method="setBlockId">
                    <block_id>head_phone_block</block_id>
                </action>
            </block>
            <block type="cms/block" name="top_toolbar">
                <action method="setBlockId">
                    <block_id>top_toolbar</block_id>
                </action>
            </block>
            <block type="cms/block" name="top_toolbar_static">
                <action method="setBlockId">
                    <block_id>top_toolbar_static</block_id>
                </action>
            </block>
            <block type="cms/block" name="submenu_block">
                <action method="setBlockId">
                    <block_id>submenu_block</block_id>
                </action>
            </block>
            <block type="cms/block" name="search_block_content" before="">
                <action method="setBlockId">
                    <block_id>search_block_content</block_id>
                </action>
            </block>
            <block type="newsletter/subscribe" name="header.newsletter" as="header.newsletter" template="newsletter/header_subscribe.phtml" />
            <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml" />
        </reference>
        <reference name="footer">
            <action method="unsetChild">
                <alias>store_switcher</alias>
            </action>
        </reference>
        <!--Begin cart top-bar -->
        <reference name="header">
            <block type="checkout/cart_sidebar" name="cart_topbar" template="checkout/cart/topbar.phtml">
                <action method="addItemRender">
                    <type>simple</type>
                    <block>checkout/cart_item_renderer</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
                <action method="addItemRender">
                    <type>grouped</type>
                    <block>checkout/cart_item_renderer_grouped</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
                <action method="addItemRender">
                    <type>configurable</type>
                    <block>checkout/cart_item_renderer_configurable</block>
                    <template>checkout/cart/sidebar/default.phtml</template>
                </action>
            </block>
        </reference>
        <!--End cart top-bar -->
        <reference name="top.links.custom">
            <action method="addLink" translate="label title" module="customer">
                <label>My Account</label>
                <url helper="customer/getAccountUrl" />
                <title>My Account</title>
                <prepare />
                <urlParams />
                <position>10</position>
            </action>
        </reference>
    </default>
    <catalog_category_default translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <reference name="category.products">
                <reference name="product_list">
                    <action method="setColumnCount">
                        <count>5</count>
                    </action>
                    <action method="setImageSize">
                        <size>135</size>
                    </action>
                </reference>
            </reference>
        </reference>
    </catalog_category_default>
    <catalog_category_layered translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <reference name="category.products">
                <reference name="product_list">
                    <action method="setColumnCount">
                        <count>5</count>
                    </action>
                    <action method="setImageSize">
                        <size>135</size>
                    </action>
                </reference>
            </reference>
        </reference>
    </catalog_category_layered>
    <catalogsearch_result_index translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <reference name="search.result">
                <reference name="search_result_list">
                    <action method="setColumnCount">
                        <count>5</count>
                    </action>
                    <action method="setImageSize">
                        <size>135</size>
                    </action>
                </reference>
            </reference>
        </reference>
    </catalogsearch_result_index>
    <catalogsearch_advanced_index translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <reference name="search.result">
                <reference name="search_result_list">
                    <action method="setColumnCount">
                        <count>5</count>
                    </action>
                    <action method="setImageSize">
                        <size>135</size>
                    </action>
                </reference>
            </reference>
        </reference>
    </catalogsearch_advanced_index>
    <catalogsearch_advanced_result translate="label">
        <update handle="page_two_columns_left" />
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </catalogsearch_advanced_result>
    <contacts_index_index translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </contacts_index_index>
    <review_product_list translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </review_product_list>
    <review_product_view translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </review_product_view>
    <sendfriend_product_send translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </sendfriend_product_send>
    <tag_list_index translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
    </tag_list_index>
    <catalog_product_view translate="label">
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-left.phtml</template>
            </action>
        </reference>
        <reference name="left">
            <block type="catalog/product_list_related" name="catalog.product.related.left" before="-" template="catalog/product/list/related.phtml" />
        </reference>
    </catalog_product_view>
    <customer_logged_in>
        <reference name="top.links.custom">
            <action method="addLink" translate="label title" module="customer">
                <label>Log Out</label>
                <url helper="customer/getLogoutUrl" />
                <title>Log Out</title>
                <prepare />
                <urlParams />
                <position>100</position>
            </action>
        </reference>
    </customer_logged_in>
    <customer_logged_out>
        <reference name="top.links.custom">
            <action method="addLink" translate="label title" module="customer">
                <label>Log In</label>
                <url helper="customer/getLoginUrl" />
                <title>Log In</title>
                <prepare />
                <urlParams />
                <position>100</position>
            </action>
        </reference>
        <remove name="reorder" />
    </customer_logged_out>
    <customer_account>
        <reference name="left">
            <action method="unsetChild">
                <name>customer_account_navigation</name>
            </action>
        </reference>
        <reference name="content">
            <action method="insert">
                <blockName>customer_account_navigation</blockName>
                <after>0</after>
            </action>
        </reference>
    </customer_account>

    <wp_2columns_right>
        <reference name="right">
            <block type="reports/product_viewed" after="catalog.product.related" name="right.reports.product.viewed" template="reports/product_viewed.phtml" />
            <block type="reports/product_compared" after="catalog.product.related" name="right.reports.product.compared" template="reports/product_compared.phtml" />
            <block type="catalog/product_compare_sidebar" after="catalog.product.related" name="right.catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml" />
            <block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" after="catalog.product.related">
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
                    <label>Shopping Cart Sidebar Extra Actions</label>
                </block>
            </block>
        </reference>
        <reference name="root">
            <action method="setTemplate">
                <template>page/2columns-right.phtml</template>
            </action>
        </reference>
    </wp_2columns_right>
    <catalog_product_view>
        <update handle="wp_2columns_right" />
    </catalog_product_view>
    <review_product_list>
        <update handle="wp_2columns_right" />
    </review_product_list>
    <review_product_view>
        <update handle="wp_2columns_right" />
    </review_product_view>

    <cms_index_index>
        <reference name="footer">
            <action method="unsetData"><key>cache_lifetime</key></action>
            <action method="unsetData"><key>cache_tags</key></action>
            <block type="core/template" name="designby_link" as="designby_link" template="page/html/designby.phtml" after="-" />
        </reference>
    </cms_index_index>
</layout>

 I'll try the drawCustomMenuItem way

Re: How to add search bar to custommenu navigation?

This is what I have for the drawCustomMenuItem

 public function drawCustomMenuItem($category, $level = 0, $last = false)
    {
        if (!$category->getIsActive()) return;
        $htmlTop = array();


       $id = $category->getId();

$html[] = $this->getLayout()
    ->createBlock('core/template')
    ->setTemplate('catalogsearch/form.mini.phtml')
    ->toHtml();

        // --- Static Block ---
        $blockId = sprintf(self::CUSTOM_BLOCK_TEMPLATE, $id); // --- static block key
        #Mage::log($blockId);
        $collection = Mage::getModel('cms/block')->getCollection()
            ->addFieldToFilter('identifier', array(array('like' => $blockId . '_w%'), array('eq' => $blockId)))
            ->addFieldToFilter('is_active', 1);
        $blockId = $collection->getFirstItem()->getIdentifier();
        #Mage::log($blockId);
        $blockHtml = Mage::app()->getLayout()->createBlock('cms/block')->setBlockId($blockId)->toHtml();
        // --- Sub Categories ---
        $activeChildren = $this->_getActiveChildren($category, $level);
        // --- class for active category ---
        $active = ''; if ($this->isCategoryActive($category)) $active = ' act';
        // --- Popup functions for show ---
        $drawPopup = ($blockHtml || count($activeChildren));
        if ($drawPopup) {
            $htmlTop[] = '<div id="menu' . $id . '" class="menu' . $active . '" onmouseover="wpShowMenuPopup(this, event, \'popup' . $id . '\');" onmouseout="wpHideMenuPopup(this, event, \'popup' . $id . '\', \'menu' . $id . '\')">';
        } else {
            $htmlTop[] = '<div id="menu' . $id . '" class="menu' . $active . '">';
        }
        // --- Top Menu Item ---
        $htmlTop[] = '<div class="parentMenu">';
        if ($level == 0 && $drawPopup) {
            $htmlTop[] = '<a  class="level' . $level . $active . '" href="javascript&colon;void(0);" rel="'.$this->getCategoryUrl($category).'">';
        } else {
            $htmlTop[] = '<a  class="level' . $level . $active . '" href="'.$this->getCategoryUrl($category).'">';
        }
        $name = $this->escapeHtml($category->getName());
        if (Mage::getStoreConfig('custom_menu/general/non_breaking_space')) {
            $name = str_replace(' ', '&nbsp;', $name);
        }
        $htmlTop[] = '<span>' . $name . '</span>';
        $htmlTop[] = '</a>';
        $htmlTop[] = '</div>';
        $htmlTop[] = '</div>';
        $this->_topMenu[] = implode("\n", $htmlTop);

 

But it seems to not work,

Re: How to add search bar to custommenu navigation?

You should replace $html with $htmlTop as I mentioned in the comment in the previous code example:-)

Re: How to add search bar to custommenu navigation?

Yep,  I tried both, it removes the whole menu from site, so I'm not sure if its in the right spot

Re: How to add search bar to custommenu navigation?

At the moment I'm still stuck on how to accomplish this, seems to have issues!

Re: How to add search bar to custommenu navigation?

bump