NBTC html wijzigingen juni Verstuurd naar GX: 23 juni 2014 1. Recently viewed Zie Change / Incident 1: Prijzen recently viewed zijn niet correct. Aan de recently viewed items wordt een extra label (met taallabel) toegevoegd. De cost paragraaf wordt vervangen met nieuwe HTML. Oude HTML: <p class="cost"> <span class="prefix">from</span> <span class="currency"> </span> 34 </p> Nieuwe HTML: <div class="pricing"> <p class="pricing--based-on">based on duration of stay:</p> <p class="pricing--prefix">from</p> <p class="pricing--price"> <span>34</span></p> 2. Back-knop search pagina Zie Change / Incident 4: Back-knop boven park-search-results werkt niet. Door middel van de searchbootstrapdata wordt de parkid bepaald. Met de back-knop wordt deze niet meegenomen in het request voor nieuwe data. Maar het blijkt dat deze hard-coded wordt meegeven in de url (zie onder). Hierdoor komen er dus altijd resultaten met park gegevens. Graag het parkid uit de search results url verwijderen. Het volgende staat online: <div class="tab active" id="accommodations" data-autocomplete-url="/web/wcbservlet/com.tocompleteservlet?langid=42" data-search-results-url="/web/search?langid=42&parkid=nl-9514-001" data-availability-calendar-url="/web/availability?sleep=1&langid=42"> dit zou moeten zijn: <div class="tab active" id="accommodations" data-autocomplete-url="/web/wcbservlet/com.tocompleteservlet?langid=42" data-search-results-url="/web/search?langid=42" data-availability-calendar-url="/web/availability?sleep=1&langid=42"> 1
3. Blog Article overview Zie Change / Incident 11: De presentatie FS Blog Article overview toont geen title. Aan het Blog Article overview wordt een titel toegevoegd. Om de lijst en titel komt een div-tag. De class van de lijst is aangepast. Let op! Zowel de Blog Article overview als de Blog list zijn aangepast. 18 juni had ik nagevraagd of deze twee van dezelfde HTML gebruik maken. Dit bleek zo te zijn. 3.1 Blog Article overview Oude HTML: <ul class="blog-list"> Nieuwe HTML. Indien geen titel: h2-tag weg laten, div en classes behouden. <div class="bloglist"> <h2 class="bloglist title">sed do eiusmod tempor incididunt ut labore</h2> <ul class="bloglist list"> 3.2 Blog List Oude HTML: <ul class="blog-list blog-big-list"> Nieuwe HTML. Indien geen titel: h2-tag weg laten, div en classes behouden. <div class="bloglist bloglist--big"> <h2 class="bloglist title">sed do eiusmod tempor incididunt ut labore</h2> <ul class="bloglist list"> 2
4. Static Javascript files Zie Change / Incident 14: JS verplaatsen naar design.zip bestanden. oud pad plaats notes oud /static/design/<design-id>/js/nbtc.js scripts vervangen nieuw /static/design/<design-id>/js/general.js scripts oud /static/fs/js/jwplayer.js scripts vervangen nieuw /static/design/<design-id>/js/vendor/jwplayer/jwplayer.js scripts key <script type="text/javascript">jwplayer.key="1afodcyi=";</script> scripts laten staan! /static/design/<design-id>/js/scripts.js scripts verwijderen /static/nbtcforumpresentation/js/userinteraction.js head verwijderen /static/nbtcforumpresentation/css/forum.css head verwijderen /static/nbtcsearchpresentation/js/fs_facetsearch.js scripts verwijderen /static/design/<design-id>/js/destination-selector.js scripts verwijderen /static/fs/js/jquery-1.4.4.min.js head verwijderen /static/fs/js/jquery-ui-1.8.7.custom.min.js head verwijderen /static/fs/js/jquery.tools.min.js head verwijderen /static/design/<design-id>/js/bookable-offer.js scripts verwijderen 5. Accommodation searchbox Voor de Holland.com new look is een HTML wijziging nodig voor de Accommondation searchbox. Er wordt een div om het form geplaats met de class form_wrapper. Nieuwe HTML: <div class="component booking-standalone-search" data-component="booking-details-search"> <h2>find an accommodation</h2> <p>enter ions to find you the lowest price!</p> <div class="form_wrapper"> <form method="post" action="/" id="68db7d637f"> <ol class="fields"> <li class="field text"> </ol> <p class="button"><input type="submit" value="search"/></p> <div class="tags"> <strong class="title">populaire bestemmingen</strong> <a href="#" class="tag" data-show-max-chars="15">baaaadhoevedorp</a> </form> 3
6. TTD item met recommended class De class voor ttd item en ttd item--recommended zijn beide met twee underscores. Het volgende staat online: <div class="ttd item ttd_item--recommended"> Graag veranderen in: <div class="ttd item ttd item--recommended"> 7. Elementen in de page_footer In de footer staan grofweg 4 elementen: page_footer nav--segmentlist, page_footer nav, gridelement en de page_footer sitemap. De volgorde is onjuist. Dit zou moeten zijn: 1. page_footer nav--segmentlist, 2. gridelement, 3. page_footer nav 4. en de page_footer sitemap Online staat het volgende: <footer> <div class="page_footer nav--segmentlist"> <div class="page_footer nav"> <div class="grid column--1-1"> <!-- menunavigationfixedpagessi: pageid=971173 --> <div class="gridelement" id="elementid971776"> <div class="page_footer sitemap"> </footer> 4
Geliefde aanpassen naar: <footer> <div class="page_footer nav--segmentlist"> <div class="gridelement" id="elementid971776"> <div class="page_footer nav"> <div class="grid column--1-1"> <!-- menunavigationfixedpagessi: pageid=971173 --> <div class="page_footer sitemap"> </footer> 8. Placeholder in de zoekbalk In de page_header zit een zoekbalk, hiervan ontbreekt de placeholder. Voor de placeholder moet een taallabel gebruikt worden. Mocht er voor de zoekbutton (in vb Zoeken ) nog geen taallabel zijn, hier ook een taallabel voor toevoegen. De placeholder wordt aan de input-tag meegegeven: <form action="/be_nl/toerisme/zoeken.htm" method="get" class="search--quick"> <fieldset> <input type="hidden" name="param_nrofitemsperpage" id="param_nrofitemsperpage" value="20" /> <input type="hidden" id="globalsearchautocompleteurl" value="%2fbe_nl%2fhome.htm%3flanguagecode%3dnl_be%26presentationid%3d474840" /> <input name="keyword" value="" type="text" placeholder="search" class="search-- quick input"/> <button type="submit" class="search--quick button"> <span>zoeken</span> </button> </fieldset> </form> 5
9. Video thumbnails in de handpickedbox Afmetingen van de video thumbnails zijn te klein. Hiervoor moet de src van de thumbnail aangepast worden. De 2 op het einde wordt een 0. De url was als volgt http://img.youtube.com/vi/<youtube_id>/2.jpg <ul class="video-thumb"> <a href="http://www.youtube.com/watch?v=gc4s4nmepek" rel="http://www.youtube.com/watch?v=gc4s4nmepek" rev="0" class="video play" data-videoheight="350" data-video-width="560"> <img width="190" height="115" alt="play video" title="play video" src="http://img.youtube.com/vi/gc4s4nmepek/2.jpg"> <span>play video</span> </a> <p> </p> Dit moet worden: http://img.youtube.com/vi/<youtube_id>/0.jpg <ul class="video-thumb"> <a href="http://www.youtube.com/watch?v=gc4s4nmepek" rel="http://www.youtube.com/watch?v=gc4s4nmepek" rev="0" class="video play" data-videoheight="350" data-video-width="560"> <img width="190" height="115" alt="play video" title="play video" src="http://img.youtube.com/vi/gc4s4nmepek/0.jpg"> <span>play video</span> </a> <p> </p> 10. What s nearby Ook de afmetingen van de what s nearby kaarten zijn te klein. In de url moet de size van de afbeelding aangepast worden. Ook de height en width attributen zijn veranderd: <div class="maps whatsnearby"> <h5 class="h3">what's nearby</h5> <a href="#" rel="nofollow" class="map-detail-ankeiler"> <img src="http://maps.googleapis.com/maps/api/staticmap?markers=size:mid color:orange 52.37503 05,4.8838401&zoom=15&size=316x197&hl=NL&sensor=false&key=AIzaSyDOeTqm F5w_Xtf2jmLBfNFeoYGk5rphR-E" height="197" width="316" alt=""> </a> <a href="#" rel="nofollow" class="map-detail-ankeiler more">show on map</a> 6
7