If you haven't used [NodeJs](http://nodejs.org/) before, be sure to have install the LTS version on your desktop ! Check your version with this command:
npm install orxapi.widgets.frameworkshell
node -v
v8.11.1
`
Installation
`shell
npm install orxapi.widgets.framework --save
`
$3
* ReactJS
* JQuery
* moment
$3
#### SEARCH ENGINE
1. add in your html a node with id where you want to put your search engine \
ex :
1. call the initial widget method in your javascript file orxapiWidgetsFramework.initSearchEngine(document.getElementById("searchEngine"), "url/to/data/json"); with "url/to/data/json" the url to retrieve the search engine data in json
1. some data can be added yo div to configure your search engine \
ex : \
- data-title : search engine title (cdiscount model)\
- data-type : type of search engine ( cdiscount | macif)\
- data-submit-url : the url to submit the form\
- data-submit-label : text of the button to submit
- data-open-more-label : text of button to open 2nd level item panel (macif model)\
- data-default-submit : boolean to set if the default component submit should be used
- data-items-col-class : class name of items col
- data-button-col-class : class name of button col
1. json data structure :
`json
[ // Array of search engines
{
"title": "", // title of search engine tab
"code": "", // code of search engine
"baseQuery": "", // base query to add to form
"requiredParameters": "Array<{ name: string; target: string }>" // list of parameters required
"searchItems": [ // search items of a search engine
{
"label": "", // label of search item
"code": "", // code of the search item
"type": "select", // type of search item
"disabled": false, // to disabled or not the search item
"data": { // data of select item (type specific)
"placeholder": "",
"noResultText": "", // no result message for autocomplete search item
"name": "", // name of the input to send with form
"multi": false, // true if multi select is enabled
"autocomplete": false, // true if autocomplete should be activated
"options": [{ // options of select
"code": "",
"label": "",
"group": "" // groupId to identified group of option (optional)
}
],
"groupLabels": { // groupLabels
"group1": "", // label of groupId group1
"group2": "" // label of groupId group2
}
}
},
{
"label": "",
"type": "date",
"data": { // data of date item (type specific)
"dayName": "", // input name attribute for the day
"monthName": "", // input name attribute for the month
"minDepDate": "", // the input name attribute for minimum date
"maxDepDate": "", // the input name attribute for maximum date
"anyDateLabel": "", // label of deselect date button
"placeholder": "",
"monthToShow": 0, // month to show at same time
"startAtFromToday": 0, // where the date picker start at x day from today
"validLabel": "", // valid calendar button label
"allMonthLabel": "", // the label for 'select all date in this month' button
"locale": "", // locale for labels in calendar (month) (default: fr)
"visibleDateFormat":"", // the way to render date to front (default : DD/MM/YYYY {flex}) with {flex} the selected adjust label
"adjust": { // the adjust options (optional)
"name": "", // name of adjust input
"label": "", // label of adjust panel
"adjustOptions": [ // adjust options
{
"code": 0,
"label": ""
}
]
}
}
}
],
"moreItems": [] // same as search items of a search engine but in a second panel (macif)
}
]
`
#### FILTER ENGINE
1. add in your html a node with id where you want to put your filter engine \
ex :
1. call the initial widget method in your javascript file orxapiWidgetsFramework.initFilterEngine(document.getElementById("filterEngine"), "url/to/data/json"); with "url/to/data/json" the url to retrieve the filter engine data in json
1. some data can be added yo div to configure your search engine \
ex : \
- data-title : filter engine title\
- data-submit-url : the url to submit the form\
- data-submit-label : text of the button to submit
- data-default-submit : boolean to set if the default component submit should be used
- data-close-label : the label to close panel button
- data-ajax-target : target to put ajax response (active ajax mode if exist)
- data-auto-submit : enabled/disabled the auto submission of the form when a item change its status
- data-reinit-text : add a reinit div to reinit the filter
1. json data structure :
`json
{
"currentQuery": "", // base search query to add to filter form
"filterItems": [ // the filter items of filter engine
{
"label": "", // label of filter engine
"type": "range", // type of the filter item
"data": { // data of range item (type specific)
"textPattern": "{min} {max} {more:xx}", // text pattern for range with {min} min value selected, {max} max value selected, {more} more label added if max limit is reached
"name": "", // name of the range input
"min": 0, // min of the range
"max": 0, // max of the range
"step": 0 // step of the range
}
},
{
"label": "",
"type": "check",
"data": { // data of check item (type specific)
"name": "", // name of the check input
"visibleLimit": 0, // max item to show
"moreItemLabel": "", // text of button to show hidden items
"lessItemLabel": "", // text of button to hide items after max limit
"options": [ // options of check
{
"label": "",
"code": "",
"entityNumber": 0 // 0 will not show the number, any number < 0 wil show 0 with disabled class, any other number > 0 show the number
}
]
}
},
{
"label": "",
"type": "checkTarget",
"data": { // data of checkTarget item (type specific)
"nameTarget": "", // the check item target name
"label": "", // label the check label
"valueTargets": [ // values of check item target to check
""
]
}
},
{
"label": "", // label of search item
"code": "", // code of the search item
"type": "select", // type of search item
"disabled": false, // to disabled or not the search item
"data": { // data of select item (type specific)
"placeholder": "",
"noResultText": "", // no result message for autocomplete search item
"name": "", // name of the input to send with form
"multi": false, // true if multi select is enabled
"autocomplete": false, // true if autocomplete should be activated
"options": [{ // options of select
"code": "",
"label": "",
"group": "" // groupId to identified group of option (optional)
}
],
"groupLabels": { // groupLabels
"group1": "", // label of groupId group1
"group2": "" // label of groupId group2
}
}
}
]
}
`
misc: checkTarget is linked to another check item by name target and value targets
#### BOOKING ENGINE
1. add in your html a node with id where you want to put your booking engine \
ex :
1. call the initial widget method in your javascript file orxapiWidgetsFramework.initBookingEngine(document.getElementById("filterEngine"), "url/to/data/json", bookingTexts, parameters); \
with "url/to/data/json" the url to retrieve the filter engine data in json\
with bookingTexts an object with text :
`json
{
"paxTitle": "string",
"priceInformation": "string",
"calendarTitle": "string",
"calendarSubtitle": "string",
"panelTitle": "string",
"departureTitle": "string",
"departureSelectLabel": "string",
"durationTitle": "string",
"durationSelectLabel": "string",
"adultSelectText": "string",
"childSelectText": "string",
"birthdateChildText": "string",
"birthdateChildTitle": "string",
"birthdateInputFormat": "string",
"birthdatePlaceholder": "string",
"submitLabel": "string",
"dayLabel": "string",
"daysLabel": "string",
"nightLabel": "string",
"nightsLabel": "string",
"returnDateText": "string",
"byHousingText": "string",
"byPersonText": "string",
"regularPriceText": "string",
"roomNumberLabel": "string",
"roomLabel": "string",
"carouselPriceText": "string"
}
`
with parameters an array of parameter to add to booking :
`json
[
{
"name": "string1",
"value": "string1"
},
{
"name": "string2",
"value": "string2"
}
]
`
1. some data can be added yo div to configure your booking engine \
ex : \
- data-title : search booking title\
- data-submit-url : the url to submit the form\
- data-currency : the code of currency
- data-max-adult : number max of adult
- data-min-adult : number min of adult
- data-max-child : number max of child
- data-submit-url : the submit url
- data-max-pax : total pax max
- data-min-pax : total pax min
- data-method : method of the form
- data-locale : the locale
- data-min-child-age : min age of a child, if null : product constraints bean is used
- data-max-child-age : max age of a child (after is an adult)
- data-max-room : start at 2 -> add a room selector
- data-month-to-show :number of month to show in month slider
- data-month-year-format : the format to show month year
- data-hide-adult : to hide adult selectbox
- data-hide-child : to hide child selectbox
- data-to-ttc-net-price : use to ttc net price when brochure price is empty
- data-default-engine-id : the default booking engine id (for Multi layout only)
- data-booking-tab-slides-to-show : number of slide of booking engine to show at once (for Multi layout only)
- data-default-adult-number : to set default adult number
- data-default-child-number : to set default child number
- data-custom-scroll(default=false) : to active custom scroll on select (FullBookingEngine only)
- data-back-label : the label for the back label (can be empty ; popin layout only)
- data-month-inner-label-format : format for inner month label
- data-show-one-city-select : show selec box when there is only on departure city
- data-send-category-code : send categoryCode
1. json data structure :
i. for single booking engine layout (sidebarLayout)
`json
{
"availabilities": {
"string": { // the departure city code
"number-number": { // duration code (dayNb-nightNb)
"MM-YYYY": {
"DD": {
"day": "number",
"departureCity": "string",
"departureDate": "Date",
"status": "string",
"byHousing": "boolean",
"maxPax": "number",
"minPax": "number",
"dayNb": "number",
"nightNb": "number",
"comment": "string",
"price": "number",
"regularPrice": "number"
}
}
}
}
},
"search": { // The search data structure
"departureCity": [
{
"code": "string", // code of a city
"durationStay": [
{
"code": "number-number" // code of the duration dayNb-nightNb (ex 6-5)
}
]
}
]
},
"product": {
"code": "string", // product code
"toCode": "string", // product to code
"tourOperator": { // the TO
"code": "string",
"label": "string"
},
"document": {
"mainImage": {
"url": "string" // url main image
}
},
"passengersConstraintsBean": { //passenger constraints
minimumAgeAllowed: "number" // min age for child
},
"basePriceAvailability": {
"departureCity": {
"code": "string",
"label": "string"
},
"departureDate": "DD-MM-YYYY",
"finalPrice": "number",
"mealPlan": {
"code": "string",
"label": "string"
},
"nbDays": "number",
"nbNights": "number",
"priceTypeBean": {
"priceTypeValue": "string",
"byHousing": "boolean"
},
"priceInfo": {
"code": "string",
"label": "string"
},
"reductionRate": "number",
"category": {
"code": "string",
"label": "string"
},
"minPax": "number",
"maxPax": "number"
}
},
"cities": { // label of cities
"string": "string" // departureCityCode: cityLabel
}
}
`
ii. for multi booking engine layout (MultiFull Layout or Popin Layout)
`json
[
{
"id": "string", // identifier of the booking engine
"title": "string", // title of the booking engine
"detail": { // editorial detail of booking engine
"picture": {"url": "string"}, // main picture of booking
"title": "string", // title of editorial
"subtitle": "string", // subtitle of editorial
"description": "string", // description of editorial
"bulletPoints": ["string"], // list of detail
"minAdult": "number", // minimal number of adult for this booking
"maxAdult": "number" // maximal number of adult for this booking
},
"bookingEngine": // bookingEngine data
{
"availabilities": { // cf single bookingEngine
},
"search": { // cf single bookingEngine
},
"product": { // cf single bookingEngine
},
"cities": { // cf single bookingEngine
}
}
}
]
``