Anpassungen in den Templates für das Feature

Transkript

1 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg Anpassungen in den Templates für das Feature Zimmerdetails in der Buchung auf- und zuklappen Name Date Signature Responsible for Michail Sazonov specification Delivering committed Peter Quensell Page 1 of 7

2 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg Document log: Document description: Name: Anpassungen in den Templates für die neuen Features Project: CM Studio.iBooking /.QuickBooking /.HOTEL Document type: Anleitung Document state: Version: 1.0 Status: Store: Name of document: Path: Change log: Name Date Version Change description Oleg Schildt Initial version Page 2 of 7

3 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg 1 Allgemeines Das Aussehen und die Positionierung der einzelnen Elemente im Buchungsprozess kann individuell für jedes Design-Template angepasst werden. Das Aussehen wird mit Hilfe von folgenden Templates gesteuert, die im Unterverzeichnis modules liegen. Hierzu öffnen Sie bítte den Ressourcen- Manager, wählen aus der Drop-Downliste den Bereich Templates aus und klicken dann mit einem Doppelklick in das passende Template-Verzeichnis. Dort finden Sie dann das Unterverzeichnis modules : booking_process.tpl calender_view.tpl ext_booking.tpl voucher_shop.tpl voucher_shop_steps.tpl pricelist.tpl special_offer.tpl Jedes Template kann sprachenabhängig spezifiziert werden. Zum Beispiel: booking_process_de.tpl calender_view_de.tpl Page 3 of 7

4 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg 2 Zimmerdetails in der Buchungsanzeige auf- und zuklappen Wenn die Anzahl der Zimmerkategorien mehr als 6 oder 7 Kategorien umfasst und gleichzeitig die Infotexte zu jeder Zimmerkategorie sehr umfangreich sind, kann es vorkommen, dass die Auswahlliste innerhalb des Buchungsprozesses zu lang wird. Die Idee ist, den Infotext zur Zimmerkategorie per Default nicht anzuzeigen und lediglich bei Bedarf über einen + -Button zu öffnen (Klapp-Effekt). Das kann man komplett innerhalb des Design-Templates lösen, ohne zusätzliche Softwarefunktionen in Anspruch zu nehmen. Zuerst müssen folgende Anpassungen im Template ext_booking.tpl vorgenommen werden. Alter Code: <td class="thumb"> <div>{room_image</div> <div class="description">{room_description</div> <strong>inklusive:</strong> <div class="additional_services"> {mandatory_services </div> <!-- partners:begin --> <br> <b>{word:partnerhotels</b><br><br> {partners <!-- partners:end --> </td> Neuer Code: <td class="thumb"> <div>{room_image</div> {word:moreinfo <input type="button" value="..." onclick="toggle_more_info('more_info_{room_i_name')"> <div id="more_info_{room_i_name" style="display:none"> <div class="description">{room_description</div> <strong>inklusive:</strong> <div class="additional_services"> {mandatory_services </div> </div> <!-- partners:begin --> <br> <b>{word:partnerhotels</b><br><br> {partners <!-- partners:end --> </td> Page 4 of 7

5 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg Dieser Code umfasst den Infotext in einer gesonderten DIV-Klasse um per Default nicht dargestellt zu werden. Die DIV-Klasse erzeugt einen Button ( + ) Symbol, der diesen Infotext per Mausklick durch den Gast einblendet. Die zugehörige Java-Script-Funktion toggle_more_info, die an dem Button hängt, muss in user.js (siehe Designvorlagen) implementiert werden: function toggle_more_info(id) { var elm = document.getelementbyid(id); if(!elm) return; if(elm.style.display == 'none') elm.style.display = 'block'; else elm.style.display = 'none'; Zur Bearbeitung der Java-Script Einstellungen in user.js, wechseln Sie über das Hauptmenu in den Bereich Designvorlagen. Wählen Sie dann die von CM Studio.iBooking verwendete Designvorlage aus, öffnen diese und klicken dann mit der Maus auf den Aktenreiter JavaScript. Fügen Sie den oben angezeigten Code am Ende der user.js Datei ein. Page 5 of 7

6 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg Bei einigen Template-Anpassungen sind darüber hinaus bzw. ergänzend Änderungen in den Stylesheetdateien notwendig, insbesondere in der Datei user.css Zur Bearbeitung der user.css Einstellungen, wechseln Sie über das Hauptmenu in den Bereich Designvorlagen. Wählen Sie dann die von CM Studio.iBooking verwendete Designvorlage aus, öffnen diese und klicken dann mit der Maus auf den Aktenreiter CSS. Suchen Sie dann die unter alter Code stehenden Codezeilen und ersetzen diese durch die Codezeilen in der rechten Spalte unter neuer Code! user.css Alter Code:.booking.prices_wrapper.price_adult background:url('images/prices/man.png').booking.prices_wrapper.price_adult2 background:url('images/prices/man2.png').booking.prices_wrapper.price_adult3 background:url('images/prices/man3.png') Neuer Code:.booking.prices_wrapper.price_adult background:url('images/prices/man.png').booking.prices_wrapper.price_adult.apartment_fixed background:url('images/prices/home.png').booking.prices_wrapper.price_adult.room_fixed background:url('images/prices/room.png').booking.prices_wrapper.price_adult2 background:url('images/prices/man2.png').booking.prices_wrapper.price_adult3 background:url('images/prices/man3.png') Page 6 of 7

7 W.O. Ismajlowskij Pr. 22 "A" St. Petersburg Die Dateien room.png home.png müssen über den Ressourcen-Manager im Bereich Templates in das Unterverzeichnis images innerhalb des Template-Verzeichnisses von CM Studio.iBooking eingespielt werden, zum Beispiel von einem anderen Template kopieren. Hierzu öffnen Sie bitte den Ressourcen-Manager, wählen aus der Drop- Downliste den Bereich Templates aus und klicken dann mit einem Doppelklick in das passende Template-Verzeichnis von CM Studio.iBooking. Dort finden Sie dann das Unterverzeichnis images, dass Sie mit einem Doppelklick mit Ihrer Maus öffnen. Die beiden Symboldateien room.png und home.png entnehmen Sie bitte der auf unserem Support-Server verlinkten ZIP-Datei symbol.zip. Page 7 of 7