The following Javascript code block should be placed in the <head /> of your global page template.
<script>
(function() {
function setup(c,a,f){function g(){var a=[],b=function(){a.push(arguments)};b.arr=a;c.sajari=c.sajari||{};c.sajari.ui=c.sajari.ui||[];c.sajari.ui.push(b);return b}var d=a.createElement("link");d.href=f;d.as="script";d.rel="preload";d.crossorigin=!0;var e=a.createElement("script");e.async=!0;e.src=f;a.head.appendChild(d);a.head.appendChild(e);a=g();a.init=function(a){var b=g();b(a);return b};return a};
window.sajari = setup(window, document, "//cdn.sajari.net/js/integrations/client/nrma-search-integration.js");
}());
</script>The HTML snippet below was taken from the home page provided, the search form inside
was replaced with <div id="global-nav-search"></div>
<div class="c-site-search is-visible">
<div class="c-site-search__inner">
<div class="container">
<div class="row">
<div class="col">
<div class="c-site-search__close">Close</div>
<span class="c-site-search__label">I'm looking for...</span>
<div id="global-nav-search"></div>
</div>
</div>
</div>
</div>
</div>The following Javascript code block should be placed at the bottom of the <body /> in your global page template.
<script>
var globalSearch = sajari.init({
mode: "nrma-global-search",
attachSearchBox: document.getElementById("global-nav-search") /* you can replace this with any document selector */
})
globalSearch("sub", "website.search-sent", function (_, query) {
// replace /search.html with the address of your search results page
var resultsPage = "/search.html"
window.location = resultsPage + "?q=" + encodeURIComponent(query.q);
});
</script>The HTML snippet below was taken from the help and support page provided,
the search form inside was replaced with <div id="hero-search-box"></div>
<div class="c-form-search--hero u-text-center">
<h1>Help & Support</h1>
<div id="hero-search-box"></div>
</div>The following Javascript code block should be placed at the bottom of the <body /> in any page that requires the hero search box.
<script>
var heroSearch = sajari.init({
mode: "nrma-hero-search",
attachSearchBox: document.getElementById("hero-search-box")
})
heroSearch("sub", "website.search-sent", function (_, query) {
// replace /search.html with the address of your search results page
var resultsPage = "/search.html"
window.location = resultsPage + "?q=" + encodeURIComponent(query.q);
});
</script>The HTML snippet below was taken from the search results page provided.
<div class="l-main-content" role="main">
<div class="c-form-search--hero u-text-center">
<h1>Search Results</h1>
<div id="results-page-input"></div>
</div>
<section class="c-flexible-wrapper u-padding--t-b">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="row">
<div class="c-results-listing">
<div id="results-page-response"></div>
</div>
</div>
</div>
</div>
</div>
<div id="results-page-pagination" class="c-pagination"></div>
</section>
</div>The following Javascript code block should be placed at the bottom of the <body /> on
the search results page.
<script>
var resultsPage = sajari.init({
mode: "nrma-results-page-search",
attachSearchBox: document.getElementById("results-page-input"),
attachSearchResponse: document.getElementById("results-page-response"),
attachPaginator: document.getElementById("results-page-pagination")
})
// subscribe to the search-event for analytics
// For more details on events you can subscribe to see the following
// https://github.com/sajari/website-search-integration#events
resultsPage("sub", "website.search-event", function(_, body) {
window.dataLayer && window.dataLayer.push({
event: "site-search",
data: { keywords: body }
});
})
</script>The following css styles the search integrations according to the designs sent through.
/* input styles */
.sj-nrma-input.sj-nrma-input--global {
margin-left: 30px;
margin-right: 90px;
}
.sj-nrma-input.sj-nrma-input--hero {
padding: 96px 100px 50px 100px;
}
.sj-nrma-input .sj-input__input {
font-size: 3rem;
padding: 0.5em 0;
border-radius: 0;
outline: 0;
box-shadow: unset;
border-bottom: 1px solid #ccc;
}
.sj-nrma-input.sj-nrma-input--hero .sj-input__input {
color: #fff;
font-size: 2.8rem;
padding: 0 0 10px 0;
border-bottom: 2px solid #2b3393;
}
.sj-nrma-input .sj-input__input:hover {
box-shadow: unset;
}
.sj-nrma-input.sj-nrma-input--global .sj-input__input.sj-input__input--focused {
border-bottom: 1px solid #333;
}
.sj-nrma-input.sj-nrma-input--hero .sj-input__input.sj-input__input--focused {
border-bottom: 2px solid #999ECD;
}
.sj-nrma-input .sj-input__input input,
.sj-nrma-input .sj-input__input input::placeholder {
font-weight: 200;
}
.sj-nrma-input.sj-nrma-input--global .sj-input__input input::placeholder {
color: #999;
}
.sj-nrma-input.sj-nrma-input--hero .sj-input__input input::placeholder {
color: #B3B7D9;
}
/* button styles */
.sj-nrma-input .sj-input__button {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #333E9B;
color: #fff;
font-size: 1.4rem;
font-weight: 400;
padding: 19px 30px;
border-radius: 2px;
}
.sj-nrma-input .sj-input__button:hover {
color: #fff;
background-color: #000C74;
}
.sj-nrma-input .sj-input__button svg {
font-size: 18px;
}
/* override nrma styles */
.c-form-search--hero .sj-nrma-input button {
position: unset;
right: unset;
bottom: unset;
}
/* suggestions styles */
.sj-nrma-input .sj-input__suggestions {
box-shadow: unset;
background-color: #F9F9F9;
text-align: left;
}
.sj-nrma-input .sj-input__suggestions__item {
padding: 20px;
border: 1px dotted transparent;
}
.sj-nrma-input .sj-input__suggestions__item.sj-input__suggestions__item--highlighted {
color: #01077E;
background-color: #F9F9F9;
border: 1px dotted #333;
}
/* summary styles */
.sj-summary {
font-size: 1.6rem !important;
color: #131227 !important;
}
.sj-summary .sj-summary__search-term {
color: #131227 !important;
}
/* paginator styles */
.sj-paginator .sj-paginator__page-button {
color: #333E9B;
}
.sj-paginator .sj-paginator__page-number {
color: #333E9B;
}
.sj-paginator .sj-paginator__page-number:hover {
cursor: pointer;
text-decoration: underline;
}
.sj-paginator .sj-paginator__page-number[aria-current="true"],
.sj-paginator .sj-paginator__page-number--current {
color: #fff;
}