How to use it

The elina smart widget can be implemented and customised by the customer or the agency managing the customer website.

Upload the following files on your site:
elina-smart-element.zip
Write the following markup, making sure that:

{link to elina-smart-element.css}: absolute path of the file;

{link to elina-smart-element.js}: absolute path of the file;

{booking engine url}: absolute URL of the booking engine;

so, for instance:

<link rel="stylesheet" href="https://www.yourwebsite.com/css/elina-smart-element.css">
  <script>
    var elinaGlobalConst = {
      elinaBEurl: "https://yourwebsite-bookings.elinapms.com/services/",
      elinaServicesUrl: "https://yourwebsite-services.elinapms.com/",
    }
  </script>
  <div id="elina-smart-element"></div> 
  <script src="https://www.yourwebsite.com/js/elina-smart-element.js"></script>

This should be enough to display a generic element. See customisations options below.

Customisation options

The settings below need to be implemented as properties of var elinaGlobalConst object.
Only elinaBEurl is required on var elinaGlobalConst.

Datepicker options

Most of the options are the direct transpositions of the ones that can be found here: Airbnb React Date Picker - Github .
Please check there if the meaning of them is not clear.

Name	Type	Description
elinaBEurl	string (default: "https://currentdev-bookings.elinapms.com/elina/")	It’s the main URL of elina booking engine.
elinaServicesUrl	string (default: "https://currentdev-services.elinapms.com/")	It’s the URL of elina services. This is important to have for fetching elina areas and elina person classifications.
isProd	bool (default: true)	use false if you receive a CORS error when checking for availability of a single property. This usually happens when you work locally.
startDate	moment object (default: null)	if the date picker should display already a start date
endDate	moment object (default: null)	if the date picker should display already an end date
focusedInput	PropTypes.oneOf([START_DATE, END_DATE]) or null
displayFormat	string (default: “DD/MM/YYYY“)
culture	string (default: “en-GB“)	culture setting, e.g. en-GB for UK customers
isRTL	bool (default: false)
renderMonthText	string (default: null)
renderDayContents	string (default: null)
unavailableDays	array<string> (default: null)	option to block of unavaialble days from the datepicker
minimumNights	int (default: null)	Minimum number of nights pre-set
minDate	moment object (default: null)	if timezone is a concern, today’s date can be passed here with locale of the elina system.
maxDate	moment object (default: null)	if timezone is a concern, today’s date can be passed here with locale of the elina system.
orientation	string (default: “horizontal“)	displays the calendar in portrait or landscape mode

Dictionary options

Name	Default (all strings)	Description
datepickerText	“Choose your dates“	OPtion to change label on datepicker
startDatePlaceholderText	“Start date“	Option to change label for arrival date
endDatePlaceholderText	“End date“	Option to change label for departure date
submitButtonText	“Submit“	Option to change label of submit button
guestText	“Guests“	Option to change label for number of guests field
promoCodeText	“Promo code“	Option to change label for promotion code field
zoneText	“Area“	Option to change label for elina property Area
propertyTypeText	“Type“	Option to change label for elina property type
loadingPanelText	“Loading…“	Option to change text for loading splash screen
dropdownAll	"- All -"	First dropdown item on Areas selection
bookNowFor	"Book now from £{0}"	It will display on the submit button after a price has been fetched for the specified availability (requires: fetchAndDisplayElinaPrice true)

elina Customisation stuff

The following code snippet shows parameters that can be added to the widget code to customise its functionality.

elinaDateFormat: "MM/DD/YYYY",
  maxCapacity: 10,
  defaultGuestNumber: 2,
  promoCodeVisible: true,
  zone: null,
  propertyType: null,
  fetchElinaAvailability: true,
  fetchElinaZones: true,
  fetchElinaPersonClassification: true
  fetchAndDisplayElinaPrice: false
  isSmartBe: true
  displayPersonClassificationAsGroup: false

Parameter	Type	Description
elinaDateFormat	Date	The date format arrival and departure dates are being displayed
maxCapacity	integer	maximum number of guests to select in the drop down
defaultGuestNumber	integer	default number of guest
promoCodeVisible	boolean	to display the promo code option set to “True”
zone	integer (default value is NULL)	area id - to be used for mapping when widget is used on property landing page
propertyType	integer (default value is NULL)	property type id - to be used for mapping when widget is used on property landing page
fetchElinaAvailability	boolean	will show real time availability on the calendar for a specific zone and type combination. This only works when using the zone and type mapping for property landing pages
fetchElinaZones	boolean	creates a drop down list of areas from the elina system
fetchElinaPersonClassification	boolean	adds the option to select number of different guest types, e.g. adults, children etc.
fetchAndDisplayElinaPrice	boolean (default: false)	this will display the price from elina of the specified accommodation
isSmartBE	boolean (default: true)	if true, it will redirect the users to step 3 of the booking engine. If not, it will go straitght to step 4 (last page before booking confirmation)
displayPersonClassificationAsGroup	boolean (default: false)	requires Bootstrap.min.js to be installed

Layout

The following parameters can be used to customise the code and layout of the widget.

 formOrientation: "horizontal",
  submitButtonCssClass: "btn btn-primary mx-sm-3 mb-2",
  formGroupClass: "form-group mx-sm-3 mb-2",
  formControlClass: "form-control",
  guestPersonClassificationGroupButton: "btn btn-default dropdown-toggle"

elina Smart widget