Tutorial: Suchfeld ins Top-Menü verschieben
Aus Wiki | modified eCommerce Shopsoftware
Zur Navigation springenZur Suche springenvon Tomcraft, 07.2010
Eine einfache Anleitung um das Suchfeld ins Menü zu verschieben:
Suche in "/templates/xtc5/index.html":
<div id="header">
<div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
<div id="search">{$box_SEARCH}</div>
</div>
<div id="topmenuwrap">
<ul id="topmenu">
<li><a href="{php}echo xtc_href_link(FILENAME_DEFAULT);{/php}">Home</a></li>
<li><a href="{$cart}">{#link_cart#}</a></li>
{if $account}
<li><a href="{$account}">{#link_account#}</a></li>
{/if}
{php}if ($_SESSION['customers_status']['customers_status_id'] == 1) { {/php}
<li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
{php}}{/php}
<li><a href="{$checkout}">{#link_checkout#}</a></li>
{php} if (isset($_SESSION['customer_id'])) { {/php}
<li><a href="{$logoff}">{#link_logoff#}</a></li>
{php} } {/php}
</ul>
<div id="languages">{$box_LANGUAGES}</div>
</div>
und ersetze gegen:
<div id="header">
<div id="logo"><img src="{$tpl_path}img/spacer.gif" width="400" alt="{$store_name}" /></div>
</div>
<div id="topmenuwrap">
<ul id="topmenu">
<li><a href="{$index}">{#link_index#}</a></li>
<li><a href="{$cart}">{#link_cart#}</a></li>
{if $account}
<li><a href="{$account}">{#link_account#}</a></li>
{/if}
{if $smarty.session.customers_status.customers_status_id == '1'}
<li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
{/if}
<li><a href="{$checkout}">{#link_checkout#}</a></li>
{if $smarty.session.customer_id}
<li><a href="{$logoff}">{#link_logoff#}</a></li>
{else}
<li><a href="{$login}">{#link_login#}</a></li>
{/if}
</ul>
<div id="languages">{$box_LANGUAGES}</div>
<div id="search">{$box_SEARCH}</div>
</div>
Suche in "/templates/xtc5/boxes/search.html":
{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><strong>{#heading_search#}:</strong></td>
</tr>
<tr>
<td>{$INPUT_SEARCH}</td>
<td>{$BUTTON_SUBMIT}</td>
</tr>
<tr>
<td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
</tr>
</table>
{$FORM_END}
und ersetze mit:
{config_load file="$language/lang_$language.conf" section="boxes"}
{$FORM_ACTION}
<table border="0" class="search_header" cellspacing="0" cellpadding="0">
<!--
<tr>
<td colspan="2"><strong>{#heading_search#}:</strong></td>
</tr>
//-->
<tr>
<td><strong>{#heading_search#}:</strong></td>
<td>{$INPUT_SEARCH}</td>
<td>{$BUTTON_SUBMIT}</td>
</tr>
<!--
<tr>
<td colspan="2"><a href="{$LINK_ADVANCED}">{#text_advanced_search#}</a></td>
</tr>
//-->
</table>
<div id="intelliSearchResult"></div>
{$FORM_END}
Suche in "/templates/xtc5/stylesheet.css":
#header #search {
width: 230px;
height:75px;
float:right;
color:#fff;
padding:30px 0px 0px 60px
}
#header #search a {
color:#fff;
font-size:11px;
}
und ersetze mit:
/*
#header #search {
width: 230px;
height:75px;
float:right;
color:#fff;
padding:30px 0px 0px 60px
}
#header #search a {
color:#fff;
font-size:11px;
}
*/
Suche in "/templates/xtc5/stylesheet.css":
#topmenuwrap {
background: #333 url(img/bg_topmenu.gif) repeat-x;
}
und ersetze mit:
#topmenuwrap {
background: #333 url(img/bg_topmenu.gif) repeat-x;
height: 36px;
position:relative;
zoom:1;
}
Suche in "/templates/xtc5/stylesheet.css":
#topmenuwrap {
background: #333 url(img/bg_topmenu.gif) repeat-x;
height: 36px;
position:relative;
zoom:1;
}
und füge danach ein:
#topmenuwrap #search {
text-align:right;
height:26px;
color: white;
font-size:13px;
padding: 6px 10px 4px 0px;
margin:0;
float: right;
}
Suche in "/templates/xtc5/stylesheet.css":
#languages {
text-align:right;
height:26px;
font-size:13px;
background: url(img/bg_topmenu.gif) repeat-x;
padding: 10px 10px 0px 0px;
margin:0;
}
und ersetze mit:
#languages {
text-align:right;
height:26px;
font-size:13px;
background: url(img/bg_topmenu.gif) repeat-x;
padding: 10px 10px 0px 0px;
margin:0;
float: right;
}
So könnte es nach dem Umbau aussehen: