<!--Step 1: Start: Load OVExplore library on head section. -->
<script language="javascript"
type="text/javascript"
src="https://content.cdn705.com/Content/WebApps/OdyVExplore/OVExplore.min.js"></script>
<!--Step 1: End-->
<!--Step 2: Start: Init OVExplore object on head section with your preferences. -->
<script>
function addSearchForm(configObject, divId) {
var searchForms = document.getElementsByTagName('ody-search-form');
var searchFormExists = false;
for (var i = 0; i < searchForms.length; i++) {
if (searchForms[i].attributes[0].value == configObject) {
searchFormExists = true;
break;
}
}
if (!searchFormExists) {
const div = document.createElement('div');
div.innerHTML = "<ody-search-form search-form-settings=" + configObject + "> </ody-search-form>";
document.getElementById(divId).appendChild(div);
}
}
window.OVExplore = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 6 /* This will dynamically divide column based on the passed value & cannot be used with themes. Default value: 3 Min value: 2 Max value: 6*/,
themeColor: "#FFF|#1b63af|#000|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
};
//Step 2: End
window.OVExplore2 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showDestinationTypeFilter: true, // specifies if destination type filter must be enbled or not Default value: true
cruiseSearchFields: {
basic: [
"destination",
"cruiseline",
"ship",
"sailingdate",
"duration",
"departureport",
"cruisetypecheckbox",
"packagetourscheckbox",
"swiftcheckbox",
"newwindowcheckbox",
],
advance: [
"arrivalport",
"price",
"promocode",
"maxoccupancy",
"portsofcall",
"pid",
"packagecode",
"packagename",
"externalid",
"validfrom",
"validtill",
"includeinternalcruiselinescheckbox",
"allpackagescheckbox",
"hasVrUrl",
"kidsfriendlycheckbox"
],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 6 /* This will dynamically divide column based on the passed value & cannot be used with themes. Default value: 3 Min value: 2 Max value: 6*/,
themeColor: "#000|#ec7063|#fff|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
region:
"AU" /*if region is specified with value AU priority filter is applied to port and destination with values BNE,CNS,MEL,PER,SYD and 1,29,15 respectively */,
},
cruiseWidgetSettings: {
widgetStyle:
"simple_select" /* To be used for widget style Options 1. vue_multiselect 2.simple_select */
},
};
window.OVExplore3 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showDestinationTypeFilter: true, // specifies if destination type filter must be enbled or not Default value: true
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"departureport",
"destination",
"sailingdate",
"cruiseline",
],
advance: [
"ship",
"duration",
"cruisetypecheckbox",
"packagetourscheckbox",
],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 6 /* This will dynamically divide column based on the passed value & cannot be used with themes. Default value: 3 Min value: 2 Max value: 6*/,
themeColor: "#f8f9fa|#e83e8c|#6c757d|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
cruiseSearchSettings: {
destinationType: "ocean", // specifies destination type filter to be preselected, Default value: all, Options: all/ocean/river
cruiselineFilter: "1,3", // spcifies cruiselines to be displayed in cruiseline dropdown
//'destinationFilter': '1,2', // specifies destinations to be displayed in destination dropdown
//'shipFilter': '', // specifies ships to be displayed in ship dropdown
//'departureportFilter': 'BOM', // specifes port to be displayed in port dropdown
//'destinationPriority': '1,2',// specifies destinations to be displayed at top in list
//'cruiselinePriority': '1', // specifies cruiselines to be displayed at top in list
//'portPriority': 'BOM',//specifes port to be displayed at top in list
//'destinations': '74', // preselects destination
//'cruiseline': '1', //preselects cruiseline
//'ship': '6,14727,15841', // preselects ship
//'departurePorts': 'BOM', // preselects ports
//'duration': '4-6', //preselects duration
//'startDate': '12/12/2020', // preselects specifed date range
//'endDate': '12/16/2020',
//'portsOfCall': 'montreal',// preselect ports of call
//'arrivalPorts': 'AUH', //preselect arrival port
//'dynamicSupplierPromo': 'PP',//preselects promo code
//'prices': '1001-2000', // preselects price
//'hasVrUrl': true, //preselects virtual tour checkbox
//'includeInternalCruiselines': true, // preselects include internal cruiseline checkbox
//'transportId': '29', // preselects cruise only checkbox
//'transportId': '28', // preselects cruiseline tour checkbox
//'showallpackages': true, // preselects show all packages checkbox
//'showPackageTours': true, // preselects show package tours checkbox
//'iskidsfriendly': true, // preselects kids only checkbox
},
cruiseWidgetSettings: {
sailingDateWidgetStyle:
"v_calendar" /* To be used for datepicker display versions*/,
},
};
</script>
<script>
window.OVExplore4 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: ["destination", "sailingdate", "duration", "cruiseline"],
advance: [],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
themeColor: "#27a28d|#27a28d|#000|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#27a28d|#27a28d|#000|#fff
},
cruiseWidgetSettings: {
widgetType:
"single" /* To be used to set select dropdown type versions. Default value: multiple, Options: 1.multiple 2.single*/,
},
};
</script>
<script>
window.OVExplore5 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_self", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
defaultSearchType:
"legacy" /* specifies the search has to redirected to swift flow or old flow. The Default value: swift. Options 1. swift 2. legacy */,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"cruiseline",
"ship",
"sailingdate",
"duration",
"departureport",
"cruisetypecheckbox",
"packagetourscheckbox",
"allpackagescheckbox",
"includeinternalcruiselinescheckbox",
"newwindowcheckbox",
],
advance: [],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
themeColor: "#fff|#35a9e0|#333|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
cruiseSearchSettings: {
//'destinationType': 'river', // specifies destination type filter to be preselected Default value: all Options 1. All 2. Cruise 3. River
//'cruiselineFilter': '3.2', // spcifies cruiselines to be displayed in cruiseline dropdown
//'destinationFilter': '1,2', // specifies destinations to be displayed in destination dropdown
//'shipFilter': '', // specifies ships to be displayed in ship dropdown
//'departureportFilter': 'BOM', // specifes port to be displayed in port dropdown
//'destinationPriority': '1,2',// specifies destinations to be displayed at top in list
cruiselinePriority: "1,3", // specifies cruiselines to be displayed at top in list
//'portPriority': 'BOM',//specifes port to be displayed at top in list
//'destinations': '74', // preselects destination
//'cruiseline': '1', //preselects cruiseline
//'ship': '6,14727,15841', // preselects ship
departurePorts: "MIA", // preselects ports
//'duration': '4-6', //preselects duration
//'startDate': '12/12/2020', // preselects specifed date range
//'endDate': '12/16/2020',
//'portsOfCall': 'montreal',// preselect ports of call
//'arrivalPorts': 'AUH', //preselect arrival port
//'dynamicSupplierPromo': 'PP',//preselects promo code
//'prices': '1001-2000', // preselects price
//'hasVrUrl': true //preselects virtual tour checkbox
//'includeInternalCruiselines': true, // preselects include internal cruiseline checkbox
//'transportId': '29', // preselects cruise only checkbox
//'transportId': '28', // preselects cruiseline tour checkbox
//'showallpackages': true, // preselects show all packages checkbox
//'showPackageTours': true, // preselects show package tours checkbox
//'iskidsfriendly': true, // preselects kids only checkbox
},
};
window.OVExplore6 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
showStateNCountryWithPorts: true,
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"sailingdate",
"duration",
"cruiseline",
//"departureport",
//"ship",
//"cruisetypecheckbox",
//"packagetourscheckbox",
//"allpackagescheckbox",
//"allpackagescheckbox",
//"includeinternalcruiselinescheckbox",
//"newwindowcheckbox",
],
advance: [
"departureport",
"ship",
"cruisetypecheckbox",
"packagetourscheckbox",
"allpackagescheckbox",
"allpackagescheckbox",
"includeinternalcruiselinescheckbox",
"newwindowcheckbox"
],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
// theme: "default",
numberOfCols: 4,
themeColor: "#0071a9|#fff|#0071a9|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
cruiseWidgetSettings: {
widgetType:
"single" /* To be used to set select dropdown type versions. Default value: multiple, Options: 1.multiple 2.single*/,
},
};
window.OVExplore7 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"sailingdate",
"duration",
"cruiseline",
"ship",
"departureport",
//"cruisetypecheckbox",
//"packagetourscheckbox",
//"allpackagescheckbox",
//"allpackagescheckbox",
//"includeinternalcruiselinescheckbox",
//"newwindowcheckbox",
],
advance: [
"cruisetypecheckbox",
"packagetourscheckbox",
"allpackagescheckbox",
"allpackagescheckbox",
"includeinternalcruiselinescheckbox",
"newwindowcheckbox"
],
},
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 6,
themeColor: "#43264e|#c13355|#43264e|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
cruiseWidgetSettings: {
widgetType:
"single" /* To be used to set select dropdown type versions. Default value: multiple, Options: 1.multiple 2.single*/,
},
};
window.OVExplore8 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"sailingdate",
"duration"
],
advance: ["cruiseline",
"ship",
"departureport"],
}
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 3,
themeColor: "#232645|#52d489|#fff|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
cruiseWidgetSettings: {
widgetType:
"single" /* To be used to set select dropdown type versions. Default value: multiple, Options: 1.multiple 2.single*/,
},
};
window.OVExplore9 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"departureport",
"cruiseline",
"sailingdate",
"ship",
"duration",
],
advance: [],
}
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
theme: "lime",
themeColor: "#FFF|#1b63af|#000|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
};
window.OVExplore10 = {
/*'OVExplore' name should be match with your tag's search-form-settings property. i.e. <ody-search-form search-form-settings="OVExplore"></ody-search-form> */
preferences: {
languageId: "1", // Set your Language Id. Default Value : 1
siteItemId: "41152", // Replace your SIID here.
sid1: "", // External ref 1
sid2: "", // External ref 2
referrer: "",
resultWindowType: "_blank", //specifies result window type of results Options: 1._blank 2._self 3._top
showStateNCountryWithPorts: true,
cruiseSearchFields: {
// specifies the fields to be displayed on cruise search form, one can move fields from basic to advance and vice versa as per his/her preference */
basic: [
"destination",
"sailingdate",
"duration",
"cruiseline",
],
advance: [
"ship",
"departureport",
"cruisetypecheckbox",
"packagetourscheckbox",
],
}
},
siteSettings: {
productType: "cruise",
domain: "ui.odysol.com", // Replace your domain name here.
numberOfCols: 6, /* This will dynamically divide column based on the passed value & cannot be used with themes. Default value: 3 Min value: 2 Max value: 6*/
themeColor: "#f8f9fa|#0844e8|#6c757d|#fff", // specfies primary | secondary| text color | button text color for search form Default value:#0978bd|#8eccf3|#fff|#fff
},
};
</script>
<div class="tab-content border border-top-0 mb-3 custom-tab-content"
id="nav-tabContent">
<div class="tab-pane fade pt-2"
id="option-six"
role="tabpanel"
aria-labelledby="option-six-tab">
<!--Step 3: Add ody-search-form tag at the palce where you would like to populate searchform.-->
<ody-search-form search-form-settings="OVExplore6"> </ody-search-form>
<!--Step 3: End -->
</div>
</div>
<link rel="stylesheet" href="https://ui.odysol.com/content/cruise-search-form-option-6.css" />