Implementując TYPOlightowską wyszukiwarkę często jesteśmy zmuszeni do zabawy z CSS, a bo to nie pasują nam klasy czy rozmieszczenie elementów HTML. Rozbieżność między przygotowanym przez nas szablonem, a szablonem szukajki może nam napsuć sporo krwi.

Częstym trikiem jaką wykonuje (myślę) większość webdeveloperów TYPOlight jest utworzenie modułu kodu HTML, imitującego cmsową wyszukiwarkę. To prosty form, który przesyła słowa kluczowe do wyszukania metodą GET. Oczywiście musi istnieć strona, która z tymi danymi zrobi co trzeba i wyświetli wyniki.

Zacznijmy zatem od utworzenia strony, która będzie zawierać moduł wyświetlający wyniki. Układ > Moduły > Dodaj moduł, uzupełniamy:

Moduł umieścimy na stronie, którą utworzymy według własnych wytycznych - Układ > Struktura stron > Nowa strona. Podczas edycji polecam zaznaczyć opcję:

Co sprawi, że w menu nie pojawi nam się niepotrzebna tam pozycja.

Jak już wcześniej wspomniałem moduł wyszukiwarki nie będzie wygenerowany przez TYPOlight, tylko przez nas. Zatem będziemy zmuszeni podać adres strony, która będzie obsługiwać wyniki. Zamiast wklepywać ten adres "na sztywno", użyjemy insert tagu { { link_url::ID } }. Potrzebne nam ID strony, której alias ma zostać automatycznie wygenerowany:

Nasza strona docelowa ma ID 28. Zapiszmy to sobie gdzieś na boku, bo przyda nam się za chwilę.

Tworzymy teraz nowy moduł wybierając z pozycji Własny kod HTML. Zawartość powinna wyglądać mniej więcej następująco:

<div id="search-block">
<form method="get" action="{ { link_url::28 } }">
	<div class="form-item" id="search-field">
		<input type="text" maxlength="128" name="keywords" 
		id="edit-search" size="15" value="" title="Wpisz czego 
		szukasz." class="form-text"/>
	</div>
	<div class="form-item" id="search-button">
		<input type="submit" name="op" id="edit-submit" 
		value="Szukaj" class="form-submit"/>
	</div>
</form>
</div>

3 elementy kluczowe do działania wyszukiwarki:

• <form method="get" action="{ { link_url::28 } }">
• <input name="keywords" />
• <input type="submit" />

Możemy też dodać trochę smaczku naszej szukajce i do inputa dodać:

onblur="if(this.value=='')this.value='znajdź w serwisie...'" 
onfocus="if(this.value=='znajdź w serwisie...') 
this.value=''" value="znajdź w serwisie..."

UWAGA! Pamiętaj, aby usunąć spację pomiędzy nawiasami { } w insert tagu!