http://forum.cmsmadesimple.org/viewtopi ... 3&p=271612
Op verzoek van Rolf:
Veel van jullie zullen het wellicht wel eens tegenkomen. Een zoekveld met autocomplete (http://jqueryui.com/demos/autocomplete/
en
http://www.imdb.com/.
Dit is een leuke optie voor je website, maar bovenal erg gebruiksvriendelijk voor je bezoekers. Deze tutorial laat je zien hoe je dit met cmsms kan realiseren via XML. Je kan dit combineren met vrijwel elke module. In deze tutorial gaan we een variant maken van de autocomplete die imdb.com momenteel gebruikt. Voor deze tutorial maak ik gebruik van de module Products.
Wat heb je nodig voor deze tutorial?
CMSMS
- Module Products
* Met een velddefinitie (voor afbeeldingen) genaamd afbeelding1
- CGFeedmaker
Javascript/jQuery
- Laatste versie van jQuery (http://jquery.com/)
- Laatste versie van jQuery ui (http://jqueryui.com/download)
Download de pack met --> core, widget en position (onder UI Core) samen met autocomplete (onder widget). Selecteer onder 'theme' no theme.
----------------------------------------
Stap 1. Voorbereiding
Plaats de jquery files in je template samen met een leeg bestand genaamd functions.js (deze gebruiken we later):
Code: Select all
<__script__ src="js/jquery-1.7.1.js"></__script>
<__script__ src="js/jquery-ui-1.8.17.min.js"></__script>
<__script__ src="js/functions.js"></__script>Maak in de Productmodule een velddefinitie aan voor een afbeelding. Onder naam 'afbeelding1' en onder promp 'Hoofdafbeelding'. Kies type 'afbeelding' en zorg dat het vinkje voor publiek veld geselecteerd is.
Stap 2. Searchtemplate aanpassen
Om jquery autocomplete werkend te krijgen dienen we de search template aan te passen:
Vervang
Code: Select all
<div class="row">
<p class="row_prompt">{$mod->Lang('search_name')}:</p>
<p class="row_input">
<input type="text" name="{$actionid}cd_prodname" size="40" maxlength="255"/>
</p>
</div>Code: Select all
<div class="row ui-widget">
<p class="row_prompt">{$mod->Lang('search_name')}</p>
<p class="row_input">
<input type="text" id="zoek_veld" name="{$actionid}cd_prodname" size="40" maxlength="255" />
</p>
</div>Stap 3. Voorbereiding XML bestand
De gegevens die worden weergegeven in de autocomplete zoekresultaten worden gehaald uit een xml bestand. In het geval van imdb.com zal dit zijn
- een afbeelding,
- een titel,
- een onderschrift.
Aangezien we met Products werken, zal ik het onderschrift vervangen voor de prijs. Zorg er voor dat je in de instelling van de Products Module onder 'instellingen afbeelding afhandeling' automatisch een miniatuur afbeelding maakt. Ik heb hier 60 ingevuld.
Stap 4. XML bestand opbouwen
Via CGFeedmaker gaan we een xml bestand maken waar alle producten in komen te staan met de velden die genoemd zijn in stap 3.
- Maak een nieuwe feed aan in CGFeedmaker.
- Onder naam: search
- Feed extensie: xml
- Overige kan je leeg laten.
Onder het tabblad 'Sjabloon' plak je:
Code: Select all
{capture assign='producten_lijst'}{Products pagelimit="9999999"}{/capture}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<items>
{foreach from=$items item='entry'}
<item>
<naam>{$entry->product_name|cms_html_entity_decode}</naam>
<img>{assign var='field' value=$entry->fields}{$entry->file_location}/{$field.afbeelding1->thumbnail}</img>
<prijs>{$entry->price}</prijs>
<link>{$entry->detail_url}</link>
</item>
{/foreach}
</items> Stap 5. functions.js instellen met gewenste html
Standaard ondersteunt jQuery UI autocomplete geen afbeeldingen in de zoekresultaten lijst. De standaard html die gegenereerd wordt door jQuery UI is als volgt:
Code: Select all
<ul class="ui-autocomplete">
<li><a>Tekst</a></li>
</ul>Code: Select all
<ul class="ui-autocomplete">
<li>
<a>
<div class="zoek-item-wrapper">
<div class="zoek-item-img"><img src="http://voorbeeld.nl/uploads/product_1/afbeelding.jpg" /></div>
<div class="zoek-item-tekst">
<div class="zoek-item-naam">Productnaam XX</div>
<div class="zoek-item-prijs">€ 25</div>
</div>
</div>
<div class="clear"></div>
</a>
</li>
</ul>Vervolgens moet er nog wat jquery in de functions.js worden gestopt om de boel werkend te krijgen. Om de output te krijgen die ik voor ogen heb, heb ik de standaard jquery aangepast. Plak het volgende in de functions.js
Code: Select all
$(function() {
$.ajax({
url: "../uploads/feeds/search.xml", //dit is het pad naar de feed. Let op: alle js bestanden staan in de map js (vandaar de ../)
dataType: "xml",
success: function( xmlResponse ) {
var data = $("item", xmlResponse ).map(function() {
return {
value: $("naam", this).text(),
image: $("img", this).text(),
price: $("prijs", this).text(),
url: $("link", this).text()
};
}).get();
$( "#zoek_veld" ).autocomplete({ //ID die is gevoegd aan de input in je search template van Products
source: data,
minLength: 1, //Na 1 karakter begint jQuery met het weergeven van resultaten
select: function (event, ui) { //Als er geklikt wordt op een item uit de lijst, dan ga je naar de detailpagina van het product
var bestemming = ui.item.url
window.location = bestemming
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
var inner_html = '<a><div class="zoek-item-wrapper"><div class="zoek-item-img"><img src="' + item.image + '"></div><div class="zoek-item-tekst"><div class="zoek-item-naam">' + item.value + '</div><div class="zoek-item-prijs">€ ' + item.price + '</div></div><div class="clear"></div></div></a>';
return $( '<li></li>' )
.data( "item.autocomplete", item )
.append(inner_html)
.appendTo( ul );
};
}
});
});Stap 6. Css opmaak
Plak het volgende in je ccs:
Code: Select all
ul.ui-autocomplete {list-style:none; background:#fff; width:350px; /*height:400px; overflow:hidden*/}
ul.ui-autocomplete li { border-bottom:1px solid #e8e8e8}
ul.ui-autocomplete li a {border:1px solid #fff; color:#999; display:block; cursor:pointer !important}
ul.ui-autocomplete li a:hover {background:#f1f1f1; border:1px solid #db9300}
.zoek-item-wrapper {padding:5px}
.zoek-item-img {float:left; padding:0 10px 0 0}
.zoek-item-tekst {float:left}
.zoek-item-naam {font-size:14px; font-weight:bold; padding:0 0 3px 0}
.zoek-item-prijs {font-size:12px}
.clear {clear:both}
Als je bovenstaande goed gevolgd hebt, dan moet alles nu werken! If not, ask!
Succes!
