How to add search bar to custommenu navigation?

damiende · ‎03-22-2015

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!

theMageComp · ‎03-24-2015

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)

Was my answer helpful? You can accept it as a solution.
175+ Professional Extensions for M1 & M2
Need a developer?Just visit Contact Us Now

damiende · ‎03-25-2015

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.

Theis Corfixen · ‎03-25-2015

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 :-(

_______________
Magento Wizard since 2010, certified since 2012

damiende · ‎03-25-2015

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

damiende · ‎03-25-2015

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,

Theis Corfixen · ‎03-25-2015

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

_______________
Magento Wizard since 2010, certified since 2012

damiende · ‎03-26-2015

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

damiende · ‎03-31-2015

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

damiende · ‎04-04-2015

bump

How to add search bar to custommenu navigation?

How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?

Re: How to add search bar to custommenu navigation?