Zoekformulier
De occasions-module toont standaard een eenvoudig zoekformulier met alle mogelijke opties. Dit formulier is niet geschikt om te gebruiken op een website (het werkt echter wel en kan dus worden gebruikt om het e.e.a. te testen).
Eigen templates
De eigen template voor het zoekformulier kan in de map van de vormgeving (voor de website) worden geplaats. Deze dient de naam car_list.html te hebben.
Indien je meerdere templates wenst te gebruiken op de website (bijv. verschillende voor personenwagens en bedrijfswagens), dan kun je die naar wens aanmaken. De naam van het html-bestand mag vrij gekozen worden. Neem echter wel makkelijk te onthouden namen: je dient de naam namelijk mee te geven in het formulier of in de url.
Voeg bijvoorbeeld een verborgen veld toe aan het formulier met de gewenste naam van de template:
... <input type="hidden" name="template" value="mijn_template" /> ...
In bovenstaande voorbeeld heet het eigen template dus mijn_template.html. De extensie .html hoeft niet te worden opgegeven.
NB: de module gebruikt car_list.html (of de eigen template) altijd voor het zoekformulier én de resultaten. In car_list.html dienen het zoekformulier en de weergave van de resultaten dus gecombineerd te worden. Als nog geen zoekopdracht is gedaan (de gebruiker komt voor het eerst op de pagina), dan toont de module alle voertuigen.
Voor de detailpagina moet de standaard template car_detail.html heten. Een eigen template kan aan de module kenbaar worden gemaakt door een veld met de naam detail_template te gebruiken:
... <input type="hidden" name="detail_template" value="mijn_template" /> ...
De templates kunnen ook direct aan de module worden meegegeven via de url naar het zoekformulier of de detailpagina:
/cgi/occasion.cgi?site=website;template=mijn_template;detail_template=mijn_detail_template -of- /website/occasions/merkx/modely/uitvoeringz/34?detail_template=mooie_template
Het zoekformulier
Om te zoeken in occasions kan het beste gebruik worden gemaakt van dropdowns (HTML select-element). De module biedt lijsten aan van de volgende gegevens:
- carrosserie_soort
- merk
- model
- soort_kenteken
- brandstof
- transmissie
- kleur_basis
- occasion_label
- bouwjaar
- bouwjaar_van en bouwjaar_tot (bevat standaard de lijst met jaren vanaf het huidige jaar - 25 jaar)
Ontbreekt er een lijst van een gewenst gegeven? Vul de naam van het database-veld dan in bij de instellingen van de occasion-module in het veld 'Selectors'. Meerdere velden kunnen worden opgegeven gescheiden met een spatie.
Samengestelde lijsten zijn ook mogelijk: bijvoorbeeld met 'model>uitvoering' krijg je een lijst van alle unieke uitvoeringen alleen voor het opgegeven model (model moet dus in de zoekopdracht meegegeven zijn). Dit is gelijk aan merk_model (zie hieronder).
Met 'model,uitvoering' krijg je een lijst met alle modellen en hun uitvoering (gelijk aan all_merk_model, zie hieronder).
Elke lijst bevat alle unieke kenmerken van de beschikbare voertuigen (de lijst bevat dus alleen kenmerken van daadwerkelijk in de database aanwezige voertuigen). Er zijn bijvoorbeeld 50 automerken, maar als in de database alleen auto's voorkomen van Mercedes-Benz en Volvo, dan bevat merk alleen die 2 merken. Zijn er alleen auto's uit 1999, 2001, en 2004, dan bevat bouwjaar 1999, 2001 en 2004 (terwijl bouwjaar_van en bouwjaar_tot altijd huidig jaar -25 bevatten!).
Naast bovenstaande lijsten zijn er ook twee gecombineerde lijsten:
merk_model: lijst met alle unieke modellen van de beschikbare voertuigen van het door de gebruiker geselecteerde merk (de lijst bevat dus alleen de modellen voor het geselecteerde merk van daadwerkelijk in de database aanwezige voertuigen).
all_merk_model: 'geneste' lijst met alle unieke merken en modellen van de beschikbare voertuigen (de lijst bevat dus alleen de merken/modellen van daadwerkelijk in de database aanwezige voertuigen).
Om een lijst op het zoekformulier of elders in de template te kunnen gebruiken moet achter de naam _options worden toegevoegd. Voor de lijst van modellen gebruik je in de template dus model_options. Voorbeeld:
<label>Modellen</label>
<select name="model">
<option value="">Geen voorkeur</option>
<!-- TMPL_LOOP NAME="model_options" -->
<option value="<!-- TMPL_VAR NAME="id" -->"><!-- TMPL_VAR NAME="label" --></option>
<!-- /TMPL_LOOP -->
</select>
In plaats van een dropdown menu kan natuurlijk ook gewoon een lijst van hyperlinks worden gebruikt:
<h2>Modellen</h2> <ul> <!-- TMPL_LOOP NAME="model_options" --> <li><a href="/<!-- TMPL_VAR NAME="url" -->"><!-- TMPL_VAR NAME="label" --></a></li> <!-- /TMPL_LOOP --> </ul>
Elk element in de lijst bevat vier gegevens:
- id: de unieke identifier voor dit gegeven. Voor een merk is dat bijvoorbeeld de naam, voor een carrosserie_soort een afkorting (SEDA voor Sedan), etc. (Zie Gegevens.)
- head: is 1 als het element een groepsaanduiding is. Label bevat dan de naam van de groep. Dit element komt voor bij de lijst all_merk_model en eigen samengestelde lijsten met een komma (,), bijvoorbeeld 'model,uitvoering'. Een voorbeeld van het toepassen van head:
<label>merk/model:</label> <select name="all_merk_model"> <option value="">Geen voorkeur</option> <!-- TMPL_LOOP NAME="all_merk_model_options" --> <!-- TMPL_IF NAME="head" --> <optgroup label="<!-- TMPL_VAR NAME="label" -->"> <!-- TMPL_ELSE --> <option value="<!-- TMPL_VAR NAME="id" -->"<!-- TMPL_IF NAME="selected" --> selected="selected"<!-- /TMPL_IF -->><!-- TMPL_VAR NAME="label" --></option> <!-- /TMPL_IF NAME="head" --> <!-- /TMPL_LOOP --> </select> - label: de naam van het gegeven zelf dat getoond kan worden aan de gebruiker. Waar id bijv. SEDA bevat voor carrosserie_soort, zal label 'Sedan' bevatten.
- selected: bevat de waarde 1 als het gegeven door de gebruiker geselecteerd is en dus in de zoekopdracht is gebruikt. Door bijv.
<!-- TMPL_IF NAME="selected" -->selected="selected"<!-- /TMPL_IF -->
toe te voegen aan de option-tag kan dat als geselecteerd worden weergegeven. - selected_van en selected_tot: als een gegeven is gebruikt in een _van/_tot constructie, dan zal selected_van/selected_tot de waarde 1 bevatten voor de geselecteerde waarde (zie volgende hoofdstuk).
- url: de zoek-hyperlink voor dit gegeven. Deze url bevat de complete url om op basis van dit gegeven verder te zoeken:
<!-- TMPL_LOOP NAME="model_options" --> <a href="/<!-- TMPL_VAR NAME="url" -->"><!-- TMPL_VAR NAME="label" --></a> <!-- /TMPL_LOOP -->
- count: geeft het aantal gevonden items weer. Als er in de database bijv. 2 Chrysler Crossfires zijn en 3 Vipers, dan zal merk_model_options 2 items bevatten, waarbij count voor Crossfire en Viper resp. 2 en 3 is.
Van-tot
Voor prijzen, treklast, etc. kan het handig zijn om de gebruiker per staffel te laten zoeken. Indien gewenst kan dat eenvoudig worden bewerkstelligd door de naam van het gegeven te laten eindigen op _van of _tot. Voorbeeld:
<label>Bouwjaar van:</label> <select name="bouwjaar_van"> <option value="">Geen voorkeur</option> <!-- TMPL_LOOP NAME="bouwjaar_van_options" --> <option value="<!-- TMPL_VAR NAME="id" -->"<!-- TMPL_IF NAME="selected" --> selected="selected"<!-- /TMPL_IF -->><!-- TMPL_VAR NAME="label" --></option> <!-- /TMPL_LOOP --> </select> <br /> <label>Bouwjaar tot:</label> <select name="bouwjaar_tot"> <option value="">Geen voorkeur</option> <!-- TMPL_LOOP NAME="bouwjaar_tot_options" --> <option value="<!-- TMPL_VAR NAME="id" -->"<!-- TMPL_IF NAME="selected" --> selected="selected"<!-- /TMPL_IF -->><!-- TMPL_VAR NAME="label" --></option> <!-- /TMPL_LOOP --> </select> <br />
Indien alleen de bouwjaren van beschikbare voertuigen getoond moet worden, gebruik dan bouwjaar_van/_tot in combinatie met selected_van en _tot.
BIjvoorbeeld:
<label>Bouwjaar van:</label> <select name="bouwjaar_van"> <option value="">Geen voorkeur</option> <!-- TMPL_LOOP NAME="bouwjaar_options" --> <option value="<!-- TMPL_VAR NAME="id" -->"<!-- TMPL_IF NAME="selected_van" --> selected="selected"<!-- /TMPL_IF -->><!-- TMPL_VAR NAME="label" --></option> <!-- /TMPL_LOOP --> </select> <br /> <label>Bouwjaar tot:</label> <select name="bouwjaar_tot"> <option value="">Geen voorkeur</option> <!-- TMPL_LOOP NAME="bouwjaar_options" --> <option value="<!-- TMPL_VAR NAME="id" -->"<!-- TMPL_IF NAME="selected_tot" --> selected="selected"<!-- /TMPL_IF -->><!-- TMPL_VAR NAME="label" --></option> <!-- /TMPL_LOOP --> </select> <br />
Zelf een dropdown maken voor de verkoopprijs, etc. kan gewoon door zelf de waarden op te geven. Bijvoorbeeld:
<label>Prijs vanaf:</label> <select name="prijs_verkoop_van"> <option value="">Geen voorkeur</option> <option value="0" <!-- TMPL_IF NAME="prijs_verkoop_van" IS="0" -->selected="selected"<!-- /TMPL_IF -->>0</option> <option value="50000" <!-- TMPL_IF NAME="prijs_verkoop_van" IS="50000" -->selected="selected"<!-- /TMPL_IF -->>50.000</option> <option value="100000" <!-- TMPL_IF NAME=" prijs_verkoop_van" IS="100000" -->selected="selected"<!-- /TMPL_IF -->>100.000</option> </select> <label>Prijs tot:</label> <select name="prijs_verkoop_tot"> <option value="">Geen voorkeur</option> <option value="50000" <!-- TMPL_IF NAME="prijs_verkoop_tot" IS="50000" -->selected="selected"<!-- /TMPL_IF -->>50.000</option> <option value="100000" <!-- TMPL_IF NAME="prijs_verkoop_tot" IS="100000" -->selected="selected"<!-- /TMPL_IF -->>100.000</option> <option value="150000" <!-- TMPL_IF NAME=" prijs_verkoop_tot" IS="150000" -->selected="selected"<!-- /TMPL_IF -->>150.000</option> </select>
Filters
Het zoeken naar occasions kan verder worden verfijnd door gebruik te maken van filters. Filters tonen per gegeven alle mogelijke opties incl. het aantal. Op die manier kan een gebruiker snel zien welke criteria er zijn en of ze niet onhandig veel resultaten opleveren. Zie de afbeelding rechts voor een voorbeeld.
Om een filter te kunnen gebruiken moet een template de template-variabele 'filter' bevatten:
<!-- TMPL_VAR NAME="filter" -->
Deze variabele is verder leeg en dient er alleen voor om de occasions-module te vertellen de gegevens om een filter te kunnen maken beschikbaar te stellen.
Van alle gegevens (zie Gegevens) zal de module vervolgens een filter beschikbaar maken:
<naam gegeven>_filter:
Een array om te gebruiken in een TMPL_LOOP met alle waardes voor dat gegeven. Per waarde heb zijn de volgende gegevens beschikbaar:
- label: (vertaalde) waarde (voor bijv. carrossierie_soort wordt COUP dan Coupe)
- count: aantal occasions met deze waarde (= aantal resultaten als deze wordt gekozen)
- id: database waarde
- url: om dit filter te activeren/deactiveren
- counter: volgnummer
<naam gegeven>_done: 1 als het filter is gebruikt/aangeklikt.
<naam gegeven>_show: 1 als het filter getoond kan worden.
Stel dat de filters merk en energielabel gebruikt kunnen worden. Als de bezoeker merk x kiest en daar zijn geen energielabels bij bekend, dan is het filter leeg (show=0) en hoeft dus niet meer getoond te worden.
Op basis van bovenstaande zou een werkend filter voor het gegeven model er bijv. zo uit kunnen zien:
Model:<!-- TMPL_IF NAME="model_done" -->
<!-- als gekozen, toon dan de keuze als link om ongedaan te maken -->
<!-- TMPL_LOOP NAME="model_filter" -->
<!-- TMPL_IF NAME="done" --><a href="/<!-- TMPL_VAR NAME="url" -->"><!-- TMPL_VAR NAME="label" --></a><!-- /TMPL_IF NAME="done" -->
<!-- /TMPL_LOOP -->
<!-- TMPL_ELSE -->
<!-- nog niets gekozen, dus toont complete lijst -->
<ul>
<!-- TMPL_LOOP NAME="model_filter" -->
<!-- de TMPL_UNLESS met RE="^[1-5]$" zorgt er voor dat de eerste 5 zichtbaar zijn en de rest display:none krijgt (zodat je die kunt gaan tonen met een '+ meer...' knopje) -->
<li <!-- TMPL_UNLESS NAME="counter" RE="^[1-5]$" -->style="display:none"<!-- /TMPL_UNLESS -->><a rel="nofollow" href="/<!-- TMPL_VAR NAME="url" -->"><!-- TMPL_VAR NAME="label" --></a> (<!-- TMPL_VAR NAME="count" -->)</li>
<!-- /TMPL_LOOP -->
<li class="more"><a href="#" onclick="javascript:return showAll(this)">+ meer...</a></li>
</ul>
<!-- /TMPL_IF NAME="model_done" -->
Bovenstaande voorbeeld laat de eerste 5 LI's zien. De rest is verborgen. Aan het eind staat een linkje om de overige LI's ook weer te geven (of juist weer te verbergen). Onderstaande javascript regelt dat:
<script type="text/javascript">
function showAll(a) {
var meer = /meer/.test(a.innerText);
var li = xcmsGetParentObject(a, "UL").getElementsByTagName("LI");
for (var i = (meer ? 0 : 5); i < li.length-1; i++) {
li[i].style.display = meer ? "block" : "none";
}
a.innerText = meer ? "- minder..." : "+ meer..."; return false;
}
</script>
Bovenstaande is een voorbeeld waarin een UL met LI's is gebruikt. Maar dat is uiteraard niet vereist. Andere weergaves al dan niet in combinatie met javascript en AJAX zijn ook mogelijk.
Het formulier
Het zoekformulier kan op basis van bovenstaande zelf worden ingericht. Als enige is nog een verborgen veld met de naam van de website vereist en een zoek-knop. Een voorbeeld:
<form action="/cgi/occasions.cgi">
<input type="hidden" name="site" value="<!-- TMPL_VAR NAME="site" -->" />
<label>Carrosserie soort:</label>
<select name="carrosserie_soort">
<option value="">Geen voorkeur</option>
<!-- TMPL_LOOP NAME="carrosserie_soort_options" -->
<option value="<!-- TMPL_VAR NAME="id" -->"><!-- TMPL_VAR NAME="label" --></option>
<!-- /TMPL_LOOP -->
</select>
<br />
...
<input type="submit" value="Zoeken" />
</form>