{% extends "Default/layout.html.twig" %}{% set page_title = 'widget.metatitle' | trans %}{% set page_class='page-about' %}{%block page_headjs %} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{ constant('App\\Service\\MapsApi::GMAPSKEY_JSAUTOCOMPLETE') }}"></script>{% endblock%}{% block page_content %} {#<h1>Widget ComparaBUS, afficher les offres de transports sur votre site !</h1>#} <section class="panel"> <h1 class="panel-heading">{{ 'widget.doc.title' | trans }}</h1> <div class="panel-body"> {{ 'widget.doc.body' | trans | raw }} <div class="row"> <div class="col-md-6"> <iframe width="400" scrolling="no" height="300" frameborder="0" vspace="0" hspace="0" marginheight="0" marginwidth="0" src="https://www.comparabus.com/fr/widget/iframe2?bgImgLink=https://cdn.pixabay.com/photo/2019/07/21/15/48/paris-4353012_960_720.jpg&widgetTitle=ParisTourisme.com&headerType=false&buttonColor=ffffff&buttonBgColor=000000&arr=Paris, France&arrLat=48.85661400000001&arrLng=2.3522219000000177"></iframe> <br>fourni par <a href="https://www.comparabus.com/fr/">ComparaBUS</a> </div> <div class="col-md-6"> <iframe width="400" scrolling="no" height="300" frameborder="0" vspace="0" hspace="0" marginheight="0" marginwidth="0" src="https://www.comparabus.com/en/widget/iframe2?bgImgLink=https://cdn.pixabay.com/photo/2017/12/22/11/09/schilthorn-3033448__340.jpg&widgetTitle=AlpesNordSki.com - How to come here&headerType=false&buttonColor=ffffff&buttonBgColor=2ecc71"></iframe> <br>fourni par <a href="https://www.comparabus.com/en/">ComparaBUS</a> </div> </div> </div> </section> <section class="panel" id="simple"> <h2 class="panel-heading">{{ 'widget.doc.simple.title' | trans }}</h2> <div class="panel-body"> <div class="row"> <div class="col-md-6"> <div class="panel"> <h1 class="panel-heading">{{ 'widget.doc.simple.body' | trans | raw }}</h1> <div class="panel-body"> <form id="custom-simple"> <div class="form-group"> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="header_type_light" name="header_type" value="1"> <label for="header_type_light" class="form-check-label">{{ 'widget.doc.simple.lightHeader' |trans }} </label> </div> </div> <div class="form-group"> <label for="widget_title" >{{ 'widget.doc.simple.headerTitle'|trans }}</label> <input type="text" class="form-control" id="widget_title" placeholder="{{ 'widget.simple.title'|trans }}" name="widget_title"/> </div> <div class="form-row"> <div class="form-group col-md-6 "> <label for="city_dep">{{ 'widget.simple.dep' |trans }}</label> <input class="form-control" type="text" id="city_dep" name="city_dep" placeholder="{{ 'widget.doc.simple.city' | trans }}"/> </div> <div class="form-group col-md-6"> <label for="city_arr">{{ 'widget.simple.arr' |trans }}</label> <input class="form-control" type="text" id="city_arr" name="city_arr" placeholder="{{ 'widget.doc.simple.city' | trans }}"/> </div> </div> <input type="hidden" id="city_dep_lat" name="city_dep_lat"/> <input type="hidden" id="city_dep_lng" name="city_dep_lng"/> <input type="hidden" id="city_arr_lat" name="city_arr_lat"/> <input type="hidden" id="city_arr_lng" name="city_arr_lng"/> <div class="form-group"> <label for="background_img_link">{{ 'widget.doc.simple.bgImgLink'|trans }}</label> <input class="form-control" type="text" id="background_img_link" placeholder="{{ 'widget.doc.simple.bgImgLinkPH'|trans }}" name="background_img_link"/> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="button_color">{{ 'widget.doc.simple.buttonColor'|trans }}</label> <input class="form-control" type="color" id="button_color" name="button_color" value="#ffffff"/> </div> <div class="form-group col-md-6"> <label for="button_bg_color">{{ 'widget.doc.simple.bgButtonColor'|trans }}</label> <input class="form-control" type="color" id="button_bg_color" name="button_bg_color" value="#113c51"/> </div> </div> <div class="form-group"> <label>{{ 'widget.doc.simple.language' | trans }} :</label> <select class="form-control" name="locale"> {# TODO get that automatically from locales.yaml and homepage.footer.widget.enabled - langs: duplicated code with OdController #} {% for lang in ['en','fr','es','it','cs','ru','uk_UA','tr','pl'] %} <option {{ app.request.locale | slice(0,2) == lang ? 'selected' }} value="{{ url('widget_iframe2', {'_locale': lang}) }}">{{ lang }}</option> {% endfor %} </select> </div> <div class="form-group text-center"> <input type="button" value="{{ 'widget.doc.simple.create' | trans }}" class="btn-custom btn btn-success "/> </div> </form> </div> </div> </div> <div class="col-md-6"> <div class="iframe-wrapper"> <iframe width="400" scrolling="no" height="300" frameborder="0" vspace="0" hspace="0" marginheight="0" marginwidth="0" src="{{ url('widget_iframe2') }}"></iframe> <br/><p style="text-align: right;">{{ 'widget.doc.simple.poweredby' | trans }} <a href="{{ url('homepageLocale') }}">ComparaBUS</a></p> </div> </div> </div> <div class="row" style="margin-top: 30px;"> <div class="col-md-12" style="text-align: center;"> {{ 'widget.doc.simple.code' | trans }}<br/> <textarea rows="4" cols="100%"></textarea> </div> </div> </div> </section> {% if app.request.locale | slice(0,2) == 'fr' %} <section class="panel" id="advanced"> <h1 class="panel-heading">Widget avancé</h1> <div class="panel-body"> Il vous suffit de copier-coller le code ci-dessous (sans modification).<br /> Le widget est compatible avec tout les sites et blogs (par exemple wordpress).<br /> N'hésitez pas à nous contacter sur <span class="contact-cb"></span> si vous avez des questions sur l'intégration, si vous souhaitez modifier son fonctionnement, ou pour nous indiquer que le widget est présent sur votre site.<br /> Customisation du widget : <ul> <li>Afficher seulement un type de transport : bus/carpooling/train/flight <ul> <li>Afficher les offres de bus seulement : ...iframe?type[]=bus</li> <li>Afficher les offres de bus et covoiturage : ?type[]=bus&type[]=carpooling</li> </ul> <li>Afficher seulement une compagnie <ul> <li>Afficher les offres de OUIBUS seulement : ?company[]=1</li> <li>Afficher les offres de OUIGO seulement : ?company[]=8</li> </ul> </li> <li>Selectionner la ville de départ et d'arrivée <ul> <li>Selectionner la ville de départ : ?depStopId=10</li> <li>Selectionner la ville de départ et d'arrivée : ?depStopId=10&arrStopId=6</li> <li>Les ids de villes peuvent être retrouvés dans l'url après avoir effectué une recherche. Exple : 10=Paris, 6=Lille, ...</li> </ul> </li> <li> Configurer la couleur principale : ?color=11ff00 </li> <li> Résultats affichées dans une nouvelle fenêtre ComparaBUS (vous permettant de minimiser l'affichage du widget) : ?redirect=true (voir exemple #1) </li> </ul> <h3>Code à utiliser :</h3> <textarea rows="4" cols="100%"><iframe style="border: 0; height: 700px; width: 100%;" src="{{ url('widget_iframe') }}" width="300" height="150"></iframe><br /><em>{{ 'widget.doc.simple.poweredby'|trans }}<a href="http://www.comparabus.com/fr/">ComparaBUS</a></em> </textarea> <br/> <h3>Exemples d'intégration</h3> <ul> <li><a href="http://www.transfermuga.eu/fr/comparabus/" rel="nofollow">Transfermuga</a></li> <li><a href="http://www.welcomebask.com/edito/comparateur-de-trajet-bus" rel="nofollow">WelcomeBask</a></li> </ul> <h3>Rendu du widget mini #1 (?redirect=true)</h3> <iframe style="border: 0; height: 300px; width: 100%;" src="{{ url('widget_iframe') }}?redirect=true"></iframe><br /> <em>fourni par <a href="http://www.comparabus.com/fr/">ComparaBUS</a></em></p> <h3>Rendu du widget #2</h3> <iframe style="border: 0; height: 500px; width: 100%;" src="{{ url('widget_iframe') }}"></iframe><br /> <em>fourni par <a href="http://www.comparabus.com/fr/">ComparaBUS</a></em></p> </div> </section> {% endif %} <script> var place; var place2; var src = $("#simple iframe").attr('src'); function initializeAutocomplete(id) { var element = document.getElementById(id); var autocomplete = new google.maps.places.Autocomplete(element, {types: ['(cities)']}); google.maps.event.addListener(autocomplete, 'place_changed', function(){ if(id === "city_dep"){ place = this.getPlace(); } else if(id === "city_arr"){ place2 = this.getPlace(); } updateWidget(); }); } google.maps.event.addDomListener(window, 'load', function () { initializeAutocomplete('city_dep'); initializeAutocomplete('city_arr'); }); function fillTextarea() { var sourceCode = $("#simple .iframe-wrapper").html().trim(); sourceCode = sourceCode.replace(/&/g, '&'); //or http://stackoverflow.com/questions/3700326 $("#simple textarea").val(sourceCode); } function updateWidget() { var src_custom = $('select[name=locale]').val()+"?"; let params = { 'bgImgLink':$("#background_img_link").val(), 'widgetTitle': $("#widget_title").val(), 'headerType': $('#header_type_light').is(':checked'), 'buttonColor': $("#button_color").val(), 'buttonBgColor': $("#button_bg_color").val() }; var depCity = $("#city_dep").val(); var arrCity = $("#city_arr").val(); let url = addParamToUrl(src_custom,params); //src_custom += "?bgImgLink="+bg_img+"&widgetTitle="+title+"&headerType="+headerType+"&buttonColor="+button_color.substr(1)+"&buttonBgColor="+button_bg_color.substr(1); if(depCity){ url += "dep="+depCity+"&depLat="+place.geometry.location.lat()+"&depLng="+place.geometry.location.lng()+"&"; } if(arrCity){ url += "arr="+arrCity+"&arrLat="+place2.geometry.location.lat()+"&arrLng="+place2.geometry.location.lng()+"&"; } $("#simple iframe").attr('src', url.slice(0,-1)); fillTextarea(); } function addParamToUrl(url,array){ for(let key in array){ if(array[key] !== ""){ if(array[key].toString().charAt(0) === '#'){ url += key+"="+array[key].substr(1)+"&"; }else{ url += key+"="+array[key]+"&"; } } } return url; } $("form input, form select").change(function() { updateWidget(); }); $("#simple .btn-custom").click(function() { updateWidget(); return false; }); fillTextarea(); </script>{% endblock %}