INTEGRATION DER FAIRGARAGE-JAVASCRIPT-APPLIKATION IN ANBIETER-WEBSEITEN (V1.1)

Transkript

1 INTEGRATION DER FAIRGARAGE-JAVASCRIPT-APPLIKATION IN ANBIETER-WEBSEITEN (V1.1)

2 #1 Beispiele

3 Integrationsbeispiele: =view&id=41046&itemid=1477 3

4 #2 Technik

5 VORAUSSETZUNGEN Anbieter-Seite Integration über JavaScript-Include: FG verwendet/lädt jquery Bei Konflikten wird die Integration per iframe empfohlen. FairGarage-Seite Der Anbieter muss ein gültiges Anbieterkonto mit aktiven Sortiment haben. FairGarage stellt den benötigten Campaign-Key für die Integration zur Verfügung. Endkunden-Seite Da cross-site-scripting verwendet wird, kann es bei älteren Browsern (z.b. IE 8) zu Problemen kommen, d.h. die JavaScript-App wird nicht geladen. 5

6 ABLAUF DER INTEGRATION FairGarage Campaign-Key Im FairGarage-Backend wird ein Campaign-Key angelegt, der die zugreifende Domain mit dem FairGarage-Anbieter verknüpft. Integration in Anbieter-Webseite White-Label-Integration der FG Anwednung in die Anbieter-Webseite(n) über JavaScript-Include oder als iframe. Konfigurationsoptionen werden im nächsten Kapitel beschrieben. Testing Buchungen, die testweise vorgenommen werden, können jederzeit storniert werden 6

7 #3 Konfiguration

8 BACKEND-EINSTELLUNGEN DURCH FAIRGARAGE Sender- -Adresse Bei einer Buchung auf der Anbieter- Webseite wird durch das FairGarage- Backend eine Buchungsbestätigung an den Endkunden gesendet. Die Absender- -Adresse kann angepasst werden. Voraussetzung ist, dass der Anbieter den Versand von E- Mails mit seiner Domain durch einen externen Mail-Server zulässt. Eigene -Templates WLI Partner kann eigene Templates (Text/HTML) definieren. 8

9 BACKEND-EINSTELLUNGEN DURCH FAIRGARAGE Zulässige Fahrzeugkategorien Einschränkung des Fahrzeugbaums damit z.b. lediglich drei Hersteller ausgewählt werden können. Zulässige Servicekategorien Einschränkung des Servicekatalogs auf gewünschte Servicekategorien, z.b. nur TopServices oder keine Karosserieservices. 9

10 ANPASSEN DER JAVASCRIPT- APP Styles CSS-Styles können inline oder durch das Laden einer eigenen CSS-Datei überschrieben werden. Vorbelegung In der Auswahlmaske können Fahrzeugart, Hersteller, Baureihe, etc. vorbelegt werden - siehe Seite 12. Vorbelegung Filter Für die Ergebnisliste können Filter vorbelegt werden. So kann z.b. die Teilequalität auf OE gesetzt werden, womit keine Angebote mit Markenersatzteil-Qualität erscheinen. 10

11 ANPASSEN DER JAVASCRIPT- APP Eigene Texte Alle Texte von Buttons, Headlines, Copytext und Hinweis- oder Fehlermeldungen können mit eigenen Texten versehen werden. Zukünftig (ab Nov. 2013) Ein- und Ausblenden von Spalten der Ergebnisliste. 11

12 Code-Beispiel Integration der JS-App: <head> </head> <body> <script type="text/javascript" src=" <meta http-equiv="content-type" content="text/html; charset=utf-8"> <div class="smp"> <div class="smpsearchboxwrapper" style="width:50%;"></div> </div>  <script type="text/javascript"> var SMP = SMP {}; Campaign-Key </script> SMP.config = SMP.config {}; SMP.config.CAMPAIGNKEY = 'BIhYGSl JSqwo-AixSV860itZ'; SMP.config.CONTEXT_PATH = '/smp'; SMP.config.PUBLIC_HOST_NAME = ' SMP.config.SECURE_HOST_NAME = ' SMP.config.LOCALE_PATH = 'de_de'; SMP.config.IMG_SERVER_PATH = ' SMP.config.GOOGLE_MAPS = SMP.config.GOOGLE_MAPS {}; // css file reference to overwrite standard styles SMP.config. CUSTOMIZED_CSS_FILE = ' SMP.config.TRACKING = { GOOGLE_ANALYTICS_ACCOUNT : 'UA ' }; SMP.config. s = { support : 'support@fairgarage.de' }; SMP.config.JS_APP_PATH = '/cms/system/modules/com.uv.smp.jsapp.original/resources/de/de/'; SMP.config.PRE_SELECTED_VEHCILES = {DAT_FZA:'1', DAT_HST:'', DAT_HT:'', DAT_UT:'', DAT_AVMO:''}; <script data-main=" src=" Eigenen CSS-Datei Fahrzeugbaum- Vorbelegung <div class="smp"> <div class="offerresultlistcontainer" style="width:100%;"></div> <div class="offerbookingcontainer" style="width:100%;"></div> <div style="float:left"><a href=" border="0" target="_blank" alt="fairgarage" title="powered by FairGarage"><img src=" width="107" height="26" border="0"></a></div> </div> </body> 12

13 Code-Beispiel Fahrzeug-Vorbelegung: FZA: 1 = PKW, SUV, Kleintransporter 2 = Transporter 3 = Kraftrad (geplant) HT, UT, AVMO auf Anfrage SMP.config.PRE_SELECTED_VEHCILES = {DAT_FZA:'1', DAT_HST: 40', DAT_HT:'', DAT_UT:'', DAT_AVMO:''}; Alfa Romeo 40 Hyundai 345 Opel 650 Audi 60 Iveco 365 Peugeot 670 BMW 130 Jaguar 380 Porsche 710 Chevrolet 160 Kia 425 Renault 720 Chrysler 170 Lada 460 Saab 740 Citroen 190 Lancia 470 Seat 790 Dacia 194 Land Rover 730 Skoda 800 Daewoo 195 MAN 520 Smart 560 Daihatsu 210 Mazda 550 Subaru 820 Dodge 230 Mercedes- Benz 570 Suzuki 830 Fiat 280 MG Rover 70 Toyota 860 Ford 285 Mitsubishi 590 Volkswagen 905 Honda 340 Nissan 225 Volvo

14 Code-Beispiel Standort-Vorbelegung : Region Signature SMP.config.DEFAULT_REGION = { signature: "5ee3d9ef48b3501b50a3e120eef908e0-78fb0cab766bb3ef53de7402fff458ed" }; Den entsprechenden Code erhallten Sie nach Eingabe der gewünschten Region - z.b. Plinganserstaße, München - im Fontend als JSON Response der API /smp/de_de/api/regions/search/plinganserstra%c3%9fe : >> "signature":" e4219f7012d858d52dc0af5-78fb0cab766bb3ef53de7402fff458ed << Vorbelegung Standort 14

15 Code-Beispiel Texte überschreiben : Überschreiben des CTA und der Headline für Fahrzeug- sowie Standort-Auswahl. SMP.config.contentTree = { searchapp: { offersearch: { cta: { v: 'Angebote anzeigen' }, regions: { title: { v: 'Ihr Standort?' } }, vehicles: { title: { v: 'Für welchen Alfa?' } } } } }; 15

16 Code-Beispiel Styles überschreiben : SMP.config.CUSTOMIZED_CSS_FILE = ' Beispielhafter Inhalt Standort-Suchfeld verstecken und CTA Schwarz einfärben.regionstitle { DISPLAY:NONE;}.REGIONSWRAPPER{ DISPLAY:NONE;}.SELECTEDREGION{ DISPLAY:NONE;}.REGIONSSEARCH { DISPLAY:NONE;}.SMP.BTN-BIG { WIDTH: 100%; BACKGROUND-COLOR: #18266E; } 16

17 Weitere CSS Tips & Tricks: 1. Widgets auf Angebotsdetailseite verbergen: SMP.columns.col-3-10 {display:none;} 2. Fahrzeugauswahl - Tabs verbergen:.smp.tabs > ul {display:none;} 3. Fahrzeugauswahl: Fahrzeugtyp und Hersteller verbergen (sinnvoll bei entsprechender Vorbelegung!):.vehicleCategories div.vehicle-select-container:nth-child(1) {display:none;}.vehiclecategories div.vehicle-select-container:nth-child(2) {display:none;} 4. Standortabfrage verbergen (sinnvoll mit Vorbelerung des Standortes).SMP.sesrviceTitleSeperator {display:none;}.regionstitleseperator {display:none;}.regionstitle {display:none;}.regionswrapper {display:none;}.selectedregion {display:none;}.regionssearch {display:none;} 17

18 Code-Beispiel Vorbelegung der Filter auf Ergebnissliste FilterID SMP.config.DEFAULT_FILTER = 667; z:b. Teile-Qualität auf Original-Teile setzen sowie Entfernung auf 10Km Umkreis beschränken. Wählen Sie den entsprechenden Filter im Frontend und lesen Sie die FilterID aus dem entsprechenden API Request Parameter aus, z.b. /smp/de_de/offers/list/<searchkey>/filters?filterconfig=640 18

19 Code-Beispiel eigenes Google Tracking Ihr Adword Konto SMP.config.CUSTOMIZED_TRACKING_CALLBACK = function(type,dataarray){ _gaq.push(['_setaccount', 'UA-xxxxxxxx-x']); _gaq.push(['_setdomainname', 'yourdomainname.xxx']); switch(type){ case 'event' : _gaq.push(dataarray); break; case 'transaction' : for(var i = 0; i < dataarray.length; i++){ _gaq.push(dataarray[i]); } break; default : } }; 19

20 -Versand über eigenen SMTP-Server Sie können Ihren SMTP Server und eigene -Vorlagen nutzen. Dafür benötigen wir von Ihnen: 1. SMTP Server-Name: z.b. smtp.auto-schmidt.de 2. SMTP Port : z.b Absender- -Adresse: z.b. noreply@auto-schmidt.de 4. User-Name und Password für die Anmeldung an Ihren Mailserver (sofern erforderlich) 5. use_ssl: falls sichere Übertragung gewünscht (TLS oder SSL, FairGarage-Standard ist TLS) Eigene Vorlagen konfigurieren Wir benötigen von Ihnen: 1. subject: z.b. Auto Schmit Buchnungsbesätigung 2. text_template wird auf den folgenden Seiten beschrieben Folgende s können auf Ihre Bedürfnisse angepasst werden: - Buchungsbestätigung an Kunden und Betrieb - Stornobestätigung an Kunden und Betrieb - Auftragsänderung an Kunden und Betrieb - Einladungs- um neue User Ihrem FairGarage-Werkstatt-Konto zuzuordnen 20

21 Code-Beispiel -Template FairGarage verwendet FreeMaker-Templates für die ausgehenden s ( Sie können Ihre Vorlagen mit Logikfunktionen versehen und variable Inhalte setzen. Wir integrieren Ihre -Templates dann in das FairGarage-Backend. <#setting locale="de_de"> Guten Tag ${bookedoffer.givenname} ${bookedoffer.surname}, Vielen Dank, Ihre Buchung bei ${location.name} ist hiermit bestätigt. Ihre Buchungsnummer: ${bookedoffer.bookedoffernumber} Datum : ${bookedoffer.bookingdate?date} Termin : ${bookedoffer.dropofffrom?date} bis ${bookedoffer.dropoffto?time} Uhr Adresse : ${location.addresslabel} Kommentar : ${bookedoffer.comment!""} Ihr Fahrzeug : ${vehiclename} Ihre Services : <#list services as service> ${service_index + 1}. ${service} </#list> <#if bookedofferversion?has_content> Teilequalität : ${bookedofferversion.bookedofferdetail.partquality.partqualityname!""} </#if> Gesamtpreis inkl. MwSt.: ${gross?string.currency} Um Details zum Termin einzusehen folgen Sie bitte diesem Link: ${HTTPS_HOST_DE}/#enduser/offerbookedcustom/mail/${bookedOffer.bookedOfferKey} Ihre Auto-Schmit GmbH 21

22 Code-Beispiel iframe-höhe automatisch anpassen :  <script type="text/javascript"> var height = 0; window.setinterval(function() { var messageboxheight = 0; var uiheight = 0; if(jquery('.message-box').length > 0) messageboxheight = parseint(jquery('.message-box').height()) + parseint(jquery('.messagebox').css('top')); </script> }, 100); if(jquery('.ui-menu').length > 0 && jquery('.ui-menu').css('display') == 'block') uiheight = parseint(jquery('.ui-menu').height()) + parseint(jquery('.ui-menu').css('top')); var newheight = Math.max(jQuery('body').height(), messageboxheight, uiheight) + 20; if(height!= newheight) { height = newheight; if(parent) { // name of the iframe to resize has to be "fairgarage" or change it here parent.jquery('iframe[name=fairgarage]').stop().animate({height: height}); } } 22

23 Test-Umgebung: 23

24 Vielen Dank für Ihr Interesse!

25 Copyright This United Vehicle GmbH document is intended for the addressee and/or client only. It remains the property of United Vehicle GmbH until an explicit transfer of the rights of use is authorised. Any adaptation, utilisation, copying and/or distribution of this document for commercial purposes is possible only with the permission of United Vehicles GmbH.