1-Copy the form.mini.phtml from (app/design/frontend/your_Namespace/your_theme/template/catalogsearch/form.mini.phtml) make some changes and create a new file form.mini_popup.phtml inside the same directory as follow:


<div class="search">

<form id="search_mini_form_sidebar" action="<?php echo $catalogSearchHelper->getResultUrl() ?>" method="get">

<div class="form-search_sidebar">

<input id="search_sidebar" type="text" name="<?php echo $catalogSearchHelper->getQueryParamName() ?>" value="<?php echo $catalogSearchHelper->getEscapedQueryText() ?>" class="input-text search_sidebar" maxlength="<?php echo $catalogSearchHelper->getMaxQueryLength();?>" />

<button type="submit" title="<?php echo $this->__('Search') ?>" class="button srch_btn"><span><span><i class="fa fa-search_sidebar"></i></span></span></button>

<i id="searchRemove" title="Close" class="fa fa-times"></i>

<div id="search_autocomplete_sidebar" class="search-autocomplete"></div>

<script type="text/javascript">

//<!&#91;CDATA&#91;

var searchForm = new Varien.searchForm('search_mini_form_sidebar', 'search', '<?php echo $this->__('Search entire store here') ?>');

searchForm.initAutocomplete('<?php echo $catalogSearchHelper->getSuggestUrl() ?>', 'search_autocomplete_sidebar');

//&#93;&#93;>

</script>

</div>

</form>

</div>

<script type="text/javascript">

jQuery(window).load(function(){

jQuery(function() {

jQuery('.popup-tool .search').hover(function(){

jQuery('.popup-tool #search_sidebar').animate({

width : '800px'

}, 300 );

jQuery('.popup-tool #search_sidebar').animate({

'marginLeft' : "-=285px" //moves left

});

}, function() {

jQuery('.popup-tool #search_sidebar').animate({width:'580px'}, 300);

jQuery('.popup-tool #search_sidebar').animate({

'marginLeft' : "+=285px" //moves left

});

});

});

});

</script>

2-write down following code in catalogsearch.xml

app/design/frontend/nextlevel/default/layout/catalogsearch.xml


<block type="core/template" name="top.search_sidebar" as="Search_sidebar" template="catalogsearch/form.mini_popup.phtml"/>

3-call it on header.phtml as follow


getChildHtml('Search_sidebar')?>

An Example of It Looks:

Shopping Cart 2015-02-24 15-39-46

Categories: Magento

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *