orxapi.widgets.framework

Getting Started

If you haven't used NodeJs before, be sure to have install the LTS version on your desktop ! Check your version with this command:

node -v
v8.11.1

Installation

npm install orxapi.widgets.framework --save

Dependencies to install

• ReactJS
• JQuery
• moment

Usage

SEARCH ENGINE

1. add in your html a node with id where you want to put your search engine
   ex : <div id="searchEngine"></diV>
2. 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
3. some data can be added yo div to configure your search engine
   ex : <div id="searchEngine" data-title="my search engine"></diV>
   - 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
4. json data structure :

[ // 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 : <div id="filterEgine"></diV>
2. 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
3. some data can be added yo div to configure your search engine
   ex : <div id="filterEngine" data-title="my filter engine"></diV>
   - 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
4. json data structure :

{
  "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 : <div id="bookingEngine"></diV>
2. 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 :

{
  "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 :

[
  {
    "name": "string1",
    "value": "string1"
  },
  {
    "name": "string2",
    "value": "string2"
  }
 ]

1. some data can be added yo div to configure your booking engine
   ex : <div id="bookingEngine" data-title="my booking engine"></diV>
   - 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

2. json data structure :

   i. for single booking engine layout (sidebarLayout)

  {
    "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)

[
  {
  "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
      }
    }
  }
]