Перемещаем поиск из верхнего правого угла в отдельный блок (под корзину)

Мне не нравится поиск в верхнем правом углу, там привычнее смотрится телефон, график работы и обратная связь ( в этом уроке мы только переделаем поиск, но вскоре доберёмся и до всего остального Улыбка )

До:                                                       После:

15

Откроем index.tpl и найдём в нём этот код:

<div class=»div3″>
<div style=»text-align: left; color: #999; margin-bottom: 4px;»>
{if $smarty.const.CONF_GOOGLE_TR eq 0}      {include file=»language.tpl.html»}{/if}&nbsp;
<span class=»light»>Валюта:</span>

{literal}
<script type=»text/javascript» language=»JavaScript»>
function _changeCurrency(){
document.ChangeCurrency.submit();
}
</script>
{/literal}

<form name=»ChangeCurrency» method=»post»>

<select onchange=»_changeCurrency()» name=»current_currency»>

{foreach from=$current_all item=curr}
<option {if $smarty.const.CURRENCY_ID==$curr.CID} SELECTED {/if}  value=»{$curr.CID}»>
{$curr.Name}
</option>
{/foreach}
</select>
</form>
</div>
<div id=»module_search»>
<form action=»index.php» method=»get»>
<input type=»text» name=»searchstring» id=»mod_search_searchword» value=»{if $searchstring ne «»}{$searchstring|replace:'»‘:’&quot;’|replace:»\'»:»‘»|default:»»}{else}{$smarty.const.STRING_SEARCH}{/if}» onblur=»if(this.value==») this.value=’search…’;» onfocus=»if(this.value=='{$smarty.const.STRING_SEARCH}’) this.value=»;» onclick=»this.value = »» />
<a onclick=»moduleSearch();» class=»button»><span>{$smarty.const.STRING_GO_SEARCH}</span></a>
</form>
<a href=»./search_expanded/»>{$smarty.const.ADVANCED_SEARCH_LINK}</a>
</div>
</div>

Он отображает панель выбора языка, валюты и поиск:

Без этого кода страница должна выглядеть так:

3

Вставим наш код в правую панель под блок корзины ( блок корзины мы изучили в прошлом уроке Подмигивающая рожица ):

Вот что получилось:

4

Оформим в блок:

Берём блок корзины и оставляем только код отвечающий за внешний вид блока :

<div id=»module_cart» class=»box»>
<div class=»top»><img src=»./images/icon_bas.png» alt=»{$smarty.const.CART_TITLE}» />Корзина</div>
<div class=»middle»>

*тут нужно вставить код поиска и тд *

</div>
<div class=»bottom»>&nbsp;</div>
</div>

Выглядит не айс, но мы это исправим.

Вырезаем лишнее ( и добавим пару <br/> ) и переименуем блок:

<div id=»module_cart» class=»box»>
<div class=»top»><img src=»./images/icon_bas.png» alt=»{$smarty.const.CART_TITLE}» />Поиск</div>
<div class=»middle»>
{if $smarty.const.CONF_GOOGLE_TR eq 0}      {include file=»language.tpl.html»}{/if}&nbsp;
<br/>
<span class=»light»>Валюта:</span>
{literal}<script type=»text/javascript» language=»JavaScript»>function _changeCurrency(){    document.ChangeCurrency.submit();}</script>{/literal}
<form name=»ChangeCurrency» method=»post»>
<select onchange=»_changeCurrency()» name=»current_currency»>
{foreach from=$current_all item=curr}
<option {if $smarty.const.CURRENCY_ID==$curr.CID} SELECTED {/if}  value=»{$curr.CID}»>
{$curr.Name}
</option>
{/foreach}
</select>
</form>
<div id=»module_search»>
<form action=»index.php» method=»get»>
<input type=»text» name=»searchstring» id=»mod_search_searchword» value=»{if $searchstring ne «»}{$searchstring|replace:'»‘:’&quot;’|replace:»\'»:»‘»|default:»»}{else}{$smarty.const.STRING_SEARCH}{/if}» onblur=»if(this.value==») this.value=’search…’;» onfocus=»if(this.value=='{$smarty.const.STRING_SEARCH}’) this.value=»;» onclick=»this.value = »» />
<a onclick=»moduleSearch();» class=»button»><span>{$smarty.const.STRING_GO_SEARCH}</span></a>
</form>
<br/>
<a href=»./search_expanded/»>{$smarty.const.ADVANCED_SEARCH_LINK}</a>
</div>
</div>
<div class=»bottom»>&nbsp;</div>
</div>

Результат:

5

Вот и всё ( в следующем уроке мы изменим картинку блока поиск, вырежем выбор языка и валюты ) Улыбка