Der Anbieter eviivo bietet für seine Hotelbuchungslösung verschiedene Code-Beispiele für die Implementierung von Such-Widgets auf Webseiten an.
Leider hatten alle von mir bisher getesteten Widgets kleinere oder größere Mängel.
Deshalb hier meine Version in deutscher Sprache und mit Behebung des Fehlers, dass nach einem Klick in das Anreise-Datumsfeld ein Abreise-Datum gewählt werden kann, das vor dem Anreisedatum liegt, was natürlich keinen Sinn ergibt, solange Zeitreisen noch nicht möglich sind.
Beispiel
Meine Version ist ein Fork dieses Beispiels, an dem der Bug nachvollzogen werden kann.
Modifikationen:
- Übersetzt in Deutsch
- Nach Auswahl von Ankunfts- und Abreisedatum wird die Anzahl der gewählten Nächte angezeigt. Statt „1 Nacht/Nächte“ gibt mein Script entweder „1 Nacht“ oder „x Nächte“ aus.
- Nach einem Klick in das Anreise-Datumsfeld oder nach Auswahl eines anderen Anreise-Datums kann nur ein Abreise-Datum gewählt werden, das mindestens einen Tag nach dem Anreise-Datum liegt.
…und nochmal alles auf einmal:
<!-- This is the sample code for a classic Search Bar widget, that will be pointing your website to the eviivo Booking Engine. The Search Bar will need to be placed in the desired space in your website.
<!-- IMPORTANT! In order for the link to work, you need to replace the variable (https://URLLink) by the URL that matches your website implementation as detailed in the eviivo Help documentation -->
<!--
Technical requirements
* jQuery
* jQueryUI
* jQuery UI CSS
-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<style>
.ev-searchbox {
/*Search Bar font family*/
font-family: Helvetica, Sans-Serif;
/*Search Bar background colour*/
background-color: #ffffff;
/*Search Bar inner space*/
padding: 10px;
/*Search Bar width*/
width: auto;
/*Search Bar shadow, RGBa black colour colour. Opacity set to 25%*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
display: inline-block;
}
/*STYLING THE FIELD HEADERS*/
.ev-searchbox .ev-label {
display: block;
/*Space below the field names*/
margin: 0 0 3px 0;
/*Font size for the field names*/
font-size: 13px;
}
/*STYLING THE INPUT FIELDS*/
.ev-searchbox .ev-input,
.ev-searchbox .ev-select {
/*Input fields font size*/
font-size: 13px;
margin: 0;
/*Input fields inner spacing*/
padding: 6px;
width: 100%;
box-sizing: border-box;
/*Input fields border colour*/
border: 1px solid lightgray;
border-radius: 3px;
}
.ev-searchbox .ev-options {
margin: 0;
display: inline-block;
/*Input dates field width*/
width: 100px;
}
/*BOOKING BUTTON STYLING*/
.ev-searchbox .ev-button {
/*Button Text colour*/
color: white;
/*Button Background colour*/
background-color: darkgreen;
/*Button inner spacing*/
padding: 6px 12px;
/*Button Font-size*/
font-size: 14px;
/*Button Font-weight (thickness) */
font-weight: 500;
text-align: center;
margin: 0;
cursor: pointer;
border-radius: 6px;
border: none;
width: auto;
}
/*STYLING the Number of Nights message which appears after guests select dates*/
.ev-searchbox .s-ev-num-nights {
/*Font size*/
font-size: 13px;
padding-bottom: 6px;
/*Font colour*/
color: #708090;
}
.ev-searchbox .ev-invalid {
/*Styling how user errors are flagged: add red border if mandatory input fields are empty*/
border: 1px solid rgb(255, 0, 0);
}
.mod-options {
display: inline-block;
}
/* DATE FIELDS: background colour for calendar headers */
.ui-widget-header {
background: #ffffff;
}
</style>
<script type="text/javascript">
var $evjq = jQuery.noConflict();
$evjq(function () {
var dateFormatUser_EU = "dd. M yy";
var dateFormatUser_US_ex1 = "M dd yy";
var dateFormatUser_US_ex2 = "mm-dd-yy";
var userDateFormat = dateFormatUser_EU; // Choose option from above
var urlQueryParameterDateFormat = "yy-mm-dd";
$evjq.defaultsLocalization = {
closeText: "Schließen",
prevText: "zurück",
nextText: "weiter",
currentText: "Heute",
monthNames: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
monthNamesShort: [
"Jan",
"Feb",
"Mar",
"Apr",
"Mai",
"Jun",
"Jul",
"Aug",
"Sep",
"Okt",
"Nov",
"Dez"
],
dayNames: [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
],
dayNamesShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
dayNamesMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
weekHeader: "W",
firstDay: 1, // 1 - Monday, 0 Sunday
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
$evjq.datepicker.setDefaults($evjq.defaultsLocalization);
$evjq("#startdate").datepicker({
dateFormat: userDateFormat,
onSelect: function(selectedDate) {
var dParts = selectedDate.split("-");
var in1Days = new Date(dParts[2] + "/" + dParts[1] + "/" + (+dParts[0] + 1));
$evjq("#enddate").datepicker("option", "minDate", in1Days);
},
minDate: 0,
altFormat: urlQueryParameterDateFormat,
altField: "#startdate1"
});
$evjq("#enddate").datepicker({
dateFormat: userDateFormat,
onSelect: showDays,
beforeShow: function(input, inst) {
var start = $evjq("#startdate").datepicker("getDate");
if (start) {
// Abreisedatum mindestens 1 Tag nach Anreisedatum
var minDate = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1);
$evjq("#enddate").datepicker("option", "minDate", minDate);
}
},
altFormat: urlQueryParameterDateFormat,
altField: "#enddate1"
});
function showDays() {
var start = $evjq("#startdate").datepicker("getDate");
var end = $evjq("#enddate").datepicker("getDate");
if (!start || !end) return;
var days = (end - start) / 1000 / 60 / 60 / 24;
$evjq(".s-ev-num-nights")
.text(days + (days === 1 ? " Nacht" : " Nächte"))
.show();
}
var date = new Date(),
dateString =
date.getMonth() +
1 +
"/" +
date.getDate() +
"/" +
date.getFullYear().toString().substr(2, 2);
$evjq("#startdate").datepicker("setDate", date);
$evjq("#startdate,#enddate").blur(function () {
$evjq("#startdate,#enddate").removeClass("ev-invalid");
});
$evjq("#availabilitySearchResults").submit(function () {
if ($evjq.trim($evjq("#startdate").val()) === "") {
$evjq("#startdate").addClass("ev-invalid");
return false;
}
if ($evjq.trim($evjq("#enddate").val()) === "") {
$evjq("#enddate").addClass("ev-invalid");
return false;
} else {
$evjq("#startdate,#enddate").removeClass("ev-invalid");
$evjq("#startdate,#enddate", this).attr("name", "");
$evjq("#startdate,#enddate", this).attr("value", "");
return true;
}
});
});
</script>
<div class="ev-searchbox">
<form id="ev-availabilitySearchResults" action="https://URLLink" method="GET" name="availabilitySearchResults">
<div class="ev-startDate ev-options">
<label for="startdate" class="ev-label">Ankunft</label>
<input id="startdate" type="text" name="n" value="" class="ev-input" />
<input id="startdate1" type="hidden" name="startdate" value="" />
</div>
<div class="ev-endDate ev-options">
<label for="enddate" class="ev-label">Abreise</label> <!-- Translate -->
<input id="enddate" type="text" name="b" value="" class="ev-input" />
<input id="enddate1" type="hidden" name="enddate" value="" />
</div>
<div class="mod-options">
<div class="ev-adults ev-options">
<label for="adults1" class="ev-label">Erwachsene</label>
<select name="adults1" class="ev-select">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
<div class="ev-children ev-options">
<label for="children1" class="ev-label">Kinder</label>
<select name="children1" class="ev-select">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
</div>
<input class="ev-button" value="Verfügbarkeit prüfen" type="Submit">
</form>
<div class="s-ev-num-nights"></div>
</div>