To use the packages widget you need to add the following code to your website:
<div class="eb-packages"></div>
<script src="../jquery.easybooking.packages.js"></script>
<script type="text/javascript">
function ebPackagesLoadedCheck() {
if (typeof jQuery != "undefined") {
var data = ({
multiUser: false,
users: [
{
customerId: 331,
serialNo: "2729-3350-3485"
}
],
localeId: 1,
localeName: "en",
...
})
;
loadPackages(data);
} else {
setTimeout(ebPackagesLoadedCheck, 200);
}
}
ebPackagesLoadedCheck();
</script>
You can set up the widget with the following parameters, the marked items are required and if you don't need them, you can leave the other ones. If you leave a parameter it's value is interpreted as false. The widget has 3 views, list, latest and detailed, the parameters are labeled depending on which view(s) use(s) them.
All every widget type uses this parameter
List the list widget type uses this parameter
Latest the latest widget type uses this parameter
Detailed the detailed widget type uses this parameter
www.myhotelwebsiteurl.com/widget#offer=10
locales: [
{
en: {
allCategories: "All categories",
from: "from",
persons: "persons",
nights: "nights",
fromDate: "from",
toOffer: "Show Offer",
perPerson: "per person",
request: "Request",
booking: "Booking",
services: 'Included services',
next: 'next',
prev: 'previous',
noPackages: 'There are no packages to show',
dateSelect: 'Select a date'
},
de: {
allCategories: "Alle Kategorien",
from: "ab",
persons: "Personen",
nights: "Nächte",
fromDate: "vom",
toOffer: "Zum Angebot",
perPerson: "per person",
request: "Anfragen",
booking: "Buchen",
allRooms: "Alle Zimmer",
services: 'Inklusive Leistungen',
next: 'next',
prev: 'previous',
noPackages: 'Es sind keine Pauschalen zur Anzeige vorhanden',
dateSelect: 'Datum auswählen'
}
}
]
You can freely change all of the values, add new keys or even more languages. For example, if the localeName:
"en", the english node's translation data is going to be passed to the template and shown to the users.
<div class="eb-packages"></div>
<script src="https://www.easy-booking.at/ebPlugins/packages_v2/jquery.easybooking.packages.js"></script>
<script type="text/javascript">
function ebPackagesLoadedCheck() {
if (typeof jQuery != "undefined") {
var data = ({
multiUser: false,
users: [
{
customerId: 331,
serialNo: "2729-3350-3485"
}
],
localeId: 1,
localeName: "en",
widgetType: "list",
packageID: 21,
packagesPerPage: 4,
maxPackages: 10,
loadCSS: false,
sortBy: "high",
arrivalDate: "2016-10-10",
datePicker: true,
showFilters: true,
templateID: 1,
templateURL: false,
detailPage: false,
bookingPage: false,
stepOne: "off",
detailPrice: true,
category: "all",
customFilters: false,
locales: [
{
en: {
allCategories: "All categories",
from: "from",
persons: "persons",
nights: "nights",
fromDate: "from",
toOffer: "Show Offer",
perPerson: "per person",
request: "Request",
booking: "Booking",
services: 'Included services',
next: 'next',
prev: 'previous',
noPackages: 'There are no packages to show',
dateSelect: 'Select a date'
},
de: {
allCategories: "Alle Kategorien",
from: "ab",
persons: "Personen",
nights: "Nächte",
fromDate: "vom",
toOffer: "Zum Angebot",
perPerson: "per person",
request: "Anfragen",
booking: "Buchen",
allRooms: "Alle Zimmer",
services: 'Inklusive Leistungen',
next: 'next',
prev: 'previous',
noPackages: 'Es sind keine Pauschalen zur Anzeige vorhanden',
dateSelect: 'Datum auswählen'
}
}
]
})
;
loadPackages(data);
} else {
setTimeout(ebPackagesLoadedCheck, 200);
}
}
ebPackagesLoadedCheck();
</script>
The packages widget uses mustache.js as template engine. You find all of the necessary information about it and the example codes on the project's GitHub page.
Basically, you only need to use the following methods:
{{variable}}{{#variable}}
...
{{/variable}}{{attribute}} code
inside the loop.
{{#variable}} ... {{/variable}}{{^variable}} ... {{/variable}}To use the packages widget with your custom template, you need to define your template's URL in the widget's init code, at the templateURL key. In this way, when the widget loads, the jquery.easybooking.packages.js loads all of the required data from the easybooking server, processes and passes it to your template file.
{
filterTitle: "Family holiday", //the display name
slug: "familyholiday //the slug name
}
This array contains all user data, including the loaded packages. This array contains user objects, which data is the following:
{
customerId: "0331",
eg_id: 1, //the ID of the category
egl_name: "Double Room", //the room category's name
minPrice: 1500 //the lowest available price for this category for this package
}
This object contains the texts that you can display in your template. The keys based on
the data you set on init at the locales and localeName parameters.
For example you
have an attr, called allRooms: "Show all rooms" you can access it like this:
<p>{{locales.allRooms}}</p>
The output is going to be:
Show all rooms
(parsed to JSON format)
[
bookingPage: false,
bookingPageURL: false,
bookingURL: "https://www.easy-booking.at/clientWeb001/#0331/1",
datepicker: true,
detailPage: false,
detailPageURL: false,
filters: [
{
filterTitle: "family",
slug: "family"
}
],
fromDate: "2016-10-10",
havePackages: true,
isEbBookingURL: true,
localeID: 1,
localeName: "en_GB",
localeNameShort: "en",
locales: {
allCategories: "All categories",
booking: "Booking",
dateSelect: "Select a date",
from: "from",
fromDate: "from",
next: "next",
nights: "nights",
noPackages: "There are no packages to show",
perPerson: "per person",
persons: "persons",
prev: "previous",
request: "Request",
services: "Included services",
toOffer: "Show Offer"
},
showFilters: true,
showPrice: true,
stepOne: false,
template: "TPL",
users: [
{
customerId: "0331",
packages: [
{
category: "family",
categorySlug: "family",
minPrice: 340,
price: [
{
customerId: "0331",
eg_id: "6",
egl_name: "Familyroom",
minPrice: 340
}
],
so_fromDate: "2017-03-01",
so_highlighted: "on",
so_id: "21",
so_img001: "/wo/Services/images/srv0010331/201311815414421_index.jpg",
so_maxPersons: "2",
so_minPersons: "2",
so_nightsStay: "3",
so_untilDate: "2017-04-30",
sol_longDesc: "<TEXTFORMAT LEADING="2"><P ALIGN="LEFT">...",
sol_longDescStripped: "Included services in our Easter package:...",
sol_shortDesc: "<TEXTFORMAT LEADING="2"><P ALIGN="LEFT">...",
sol_shortDescStripped: "Our family package during...",
sol_title: "Happy Easter in the capital",
st_name: "2OverNightBreakfast",
stl_name: "B&B"
}
]
}
]
]
[
title: "Hello World!",
packages: [
{
"id": "1",
"value": "Summer package",
"bookable": true
},
{
"id": "2",
"value": "Winter package",
"bookable": false
}
],
locales: {
booking: "Online booking"
}
]
Your template file:
{{title}}
{{#packages}}
<div class="package" id="pkg-{{id}}">
<h1>{{value}}</h1>
{{#bookable}}<button class="booking">{{locales.booking}}</button>{{/bookable}}
</div>
{{/packages}}
The output:
Hello World!
<div class="package" id="pkg-1">
<h1>Summer package</h1>
<button class="booking">Online booking</button>
</div>
<div class="package" id="pkg-2">
<h1>Winter package</h1>
</div>