orxapi.widgets.framework v1.5.6-beta-2

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>`
  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 : `<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
  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 : <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
  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)

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