• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: Autocomplete zoeken met jquery ui via XML
PostPosted: Mon Jan 30, 2012 3:47 pm 
Offline
Forum Members
Forum Members

Joined: Tue Nov 30, 2010 12:16 pm
Posts: 61
Voor een php variant van deze tutorial:
viewtopic.php?f=52&t=59303&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:
<__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>


Plaats de tag {Products action="search"} in je template.

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:
<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>


met

Code:
<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>


In de template geef je nu aan waar de jquery autocomplete toegepast moet worden. In de eerste div is de class 'ui-widget' toegevoegd en in de input is een ID toegevoegd.


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:
{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>


Controleer of de feed goed wordt weergegeven zonder fouten: http://www.jouwdomein.nl/uploads/feeds/search.xml

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:
<ul class="ui-autocomplete">
  <li><a>Tekst</a></li>
</ul>


Dit is natuurlijk niet zoals wij het willen. De ouput die ik voor ogen heb is als volgt
Code:
<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>


Nu denken veel van jullie.. 'hey.. een <a> is een inline element en hier mogen geen divs in': Dat weet ik, alleen is die <a> nodig anders komt de gewenste naam niet in je search input.

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:
$(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">&euro; ' + 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:
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!


Last edited by stv on Mon Jan 30, 2012 5:42 pm, edited 1 time in total.

Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Autocomplete zoeken met jquery ui via XML
PostPosted: Mon Jan 30, 2012 4:33 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7526
Location: The Netherlands
Heel erg mooi, stv!!

Bedankt, Rolf :)

_________________
Image

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return! [ Click here ]



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
HostPapa CMS Made Simple hosting