-
Notifications
You must be signed in to change notification settings - Fork 0
/
search-results.html
249 lines (248 loc) · 13.2 KB
/
search-results.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Tue May 30 2023 15:46:40 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="64346e3e2417e23382d21c51" data-wf-site="640f7a09b83dd44bcd0e0bd3">
<head>
<meta charset="utf-8">
<title>Search Results</title>
<meta content="Search Results" property="og:title">
<meta content="Search Results" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/t10-bonjour-niagara.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","Merriweather Sans:regular,500,600,700,800","Raleway:regular,500,600,700,800,900,italic"] }});</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
<script src="https://strapify-script.s3.amazonaws.com/strapify-v1.0.5.js" data-strapi-api-url="https://bonjourniagarastrapi.civiconnect.net" data-apply-webflow-animation-fix="true" type="text/javascript"></script>
<style>
.styledrichtext hr {
height: 4px;
width: 50px;
background-color: #E4BF3A;
border: none;
margin: 12px 0 16px 0;
}
</style>
<style>
.styledrichtexttemplate hr {
height: 4px;
width: 50px;
background-color: #E4BF3A;
border: none;
margin: 16px 0 24px 0;
}
</style>
</head>
<body class="body-4">
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease-in" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="menubutton w-nav-button"><img src="images/Big-Menu-Black.png" loading="lazy" width="24" alt=""></div>
<a href="index.html" class="w-nav-brand"><img src="images/logo-no-bg.png" loading="lazy" alt=""></a>
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="index.html" class="nav-link w-nav-link">Accueil</a>
<a href="a-voir.html" class="nav-link w-nav-link">À voir</a>
<a href="a-faire.html" class="nav-link w-nav-link">À faire</a>
<a href="se-loger.html" class="nav-link w-nav-link">Se loger</a>
<a href="evenements.html" class="nav-link w-nav-link">Événements</a>
<a href="decouvrir.html" class="nav-link w-nav-link">Découvrir</a>
<a href="savourer.html" class="nav-link w-nav-link">Savourer</a>
</nav>
<a href="search-results.html" aria-current="page" class="w-inline-block w--current"><img src="images/Vector.png" loading="lazy" alt=""></a>
</div>
<div class="search-results wf-section">
<div class="w-embed">
<div id="search-container">
<div class="heading-container w-container">
<div class="div-block-45">
<h1 class="heading-25">Résultats de recherche<br></h1>
</div>
</div>
<div class="search-container w-container">
<div class="search-form w-form">
<div class="div-block-17">
<input id="search-input" type="text" class="text-field-5 w-input" maxlength="256" name="name" data-name="Name" placeholder=""><input type="submit" value="Search" data-wait="Please wait..." class="submit-button-5 w-button">
</div>
</div>
</div>
</div>
</div>
<div id="search-results" class="resultscontainer w-container">
<div id="search-results-template" class="results">
<div class="searchlink">
<h2 class="heading-26 sr-title">Heading</h2>
<a href="#" class="link sr-link">https://www.searchresultlink.com</a>
<p class="paragraph-16 sr-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis viverra ornare, eros dolor interdum </p>
</div>
</div>
</div>
<p id="no-results-template" class="paragraph-17">No Results</p>
</div>
<div class="footer-section wf-section">
<div class="w-layout-grid grid">
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b76-f6a99b74" class="footer-div-1">
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b77-f6a99b74" class="footer-headings">Contactez-nous</div>
<p strapi-single-type="footer.Phone" class="footer-links">Tel: 1-866-334-3033</p>
<p strapi-single-type="footer.Email" class="footer-links">Email: [email protected]</p>
<div class="icons-2 w-row">
<div class="column w-col w-col-4">
<a href="https://www.facebook.com/TourismeFrancoNiagara" target="_blank" class="w-inline-block"><img src="images/MicrosoftTeams-image-4_1MicrosoftTeams-image-4.png" loading="lazy" height="29" alt="" class="image-3"></a>
</div>
<div class="column-19 w-col w-col-4">
<a href="https://www.google.com/search?q=bonjour+niagara&oq=bonjour+niaga&aqs=chrome.0.69i59j69i57j0i390i650l3j69i60l3.2312j1j7&sourceid=chrome&ie=UTF-8" target="_blank" class="w-inline-block"><img src="images/MicrosoftTeams-image-7_1MicrosoftTeams-image-7.png" loading="lazy" height="29" alt="" class="image-11"></a>
</div>
<div class="column-2 w-col w-col-4">
<a href="https://twitter.com/intent/follow?source=followbutton&variant=1.0&screen_name=BonjourNiagara" target="_blank" class="w-inline-block"><img src="images/MicrosoftTeams-image-6_1MicrosoftTeams-image-6.png" loading="lazy" height="29" alt="" class="image-4"></a>
</div>
</div>
</div>
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b87-f6a99b74" class="footer-div-2">
<div class="footer-headings">Trouve nous</div>
<a href="pour-vous-rendre.html" class="w-inline-block">
<div class="footer-links">Pour vous Rendre</div>
</a>
<p strapi-single-type="footer.Address" class="footer-links">Tourisme Franco-Niagara, 300 Lincoln Street, Welland, Ontario L3B 4N4</p>
</div>
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b8f-f6a99b74" class="footer-div-3">
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b90-f6a99b74" class="footer-headings">Pages</div>
<a href="faq.html" class="w-inline-block">
<div class="footer-links">FAQ</div>
</a>
<a href="article-listing.html" class="w-inline-block">
<div class="footer-links">Articles</div>
</a>
<a href="contact.html" class="w-inline-block">
<div class="footer-links">Contact</div>
</a>
</div>
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b9e-f6a99b74" class="div-block-5 left"><img src="images/white.png" loading="lazy" id="w-node-_71af9582-09c5-111c-75fc-d690f6a99b9f-f6a99b74" alt="" class="image-5"></div>
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99ba0-f6a99b74" class="div-block-4">
<p strapi-single-type="footer.Rights" class="footer-links">All rights reserved © 2007-2023, Tourisme-Franco Niagara. | Privacy | Legal notice Photo credits: Dave Robinson Photography, Christine Hess Photography, Jerry Manco - JLM Studio</p>
</div>
<div id="w-node-_71af9582-09c5-111c-75fc-d690f6a99ba3-f6a99b74" class="div-block-5 right"><img src="images/province-of-ontario-logo-1.png" loading="lazy" id="w-node-_71af9582-09c5-111c-75fc-d690f6a99ba4-f6a99b74" alt="" class="image-5"></div><img src="images/logo-bonjour-niagara-1.png" loading="lazy" width="450" id="w-node-_71af9582-09c5-111c-75fc-d690f6a99ba5-f6a99b74" srcset="images/logo-bonjour-niagara-1-p-500.png 500w, images/logo-bonjour-niagara-1.png 658w" sizes="(max-width: 479px) 100vw, (max-width: 767px) 57vw, (max-width: 991px) 36vw, 450px" alt="">
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=640f7a09b83dd44bcd0e0bd3" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script><!-- LEAFLET IMPORTS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script>
function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (tabName) $('.' + tabName).triggerHandler('click');
});
</script>
<script>
const apiUrl = "https://bonjourniagarastrapi.civiconnect.net";
const resultsContainer = document.querySelector("#search-results");
const resultTemplate = document.querySelector("#search-results-template");
const inputContainer = document.querySelector("#search-container");
const noResultsTemplate = document.querySelector("#no-results-template")
console.log(resultsContainer, resultTemplate, inputContainer, noResultsTemplate);
noResultsTemplate.style.display = "none";
resultsContainer.innerHTML = "";
resultsContainer.style.display = "none";
inputContainer.style.transition = "transform 0.5s ease-in-out";
inputContainer.style.transform = "translateY(200px)";
async function getSearchResults(query) {
if (!query) {
resultsContainer.style.display = "none";
inputContainer.style.transform = "translateY(200px)";
document.querySelector(".no-results").remove();
return Promise.resolve([]);
}
resultsContainer.style.display = "block";
inputContainer.style.transform = "translateY(0)";
const response = await fetch(
`${apiUrl}/api/fuzzy-search/search?query=${query}`
);
const results = await response.json();
return results;
}
// this function is used to shape the results into a format that the search results template can use
function resultShaper(result) {
const titleKey = "Title";
const descriptionKey = "Description";
const linkKey = "WebsiteLink";
const photo = result.Location?.details?.photos?.[0]?.url;
console.log(photo);
return {
title: result[titleKey],
description: result[descriptionKey],
link: result[linkKey] ? result[linkKey] : ""
};
}
const search = (query) => {
resultsContainer.innerHTML = "";
getSearchResults(query).then((categories) => {
// categories is a set of key-value pairs, where the key is the name of the content type, and the value is an array of results
// remove the keys from the object, and just use the array of results
categories = Object.values(categories);
// if there are no results, show the no results template
let hasResults = false;
for (let i = 0; i < categories.length; i++) {
if (categories[i].length > 0) {
hasResults = true;
break;
}
}
if (!hasResults) {
const clone = noResultsTemplate.cloneNode(true);
clone.style.display = "block";
resultsContainer.appendChild(clone);
return;
}
categories.forEach((results) => {
results.forEach((result) => {
result = resultShaper(result);
const clone = resultTemplate.cloneNode(true);
clone.querySelector(".sr-title").innerText = result.title;
clone.querySelector(".sr-link").innerText = result.link;
clone.querySelector(".sr-link").setAttribute("href", result.link);
clone.querySelector(".sr-link").setAttribute("target", "_blank");
clone.querySelector(".sr-link").setAttribute("rel", "noreferrer noopener");
clone.querySelector(".sr-description").innerText = result.description;
resultsContainer.appendChild(clone);
});
});
});
};
const debounce = (fn, delay) => {
let timeoutId;
return function (...args) {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
// debounce the search function so it doesn't fire on every keystroke
const debouncedSearch = debounce(search, 300);
const searchInput = document.querySelector("#search-input");
searchInput.addEventListener("input", (e) => {
debouncedSearch(e.target.value);
});
// if there is a query string in the url, search for it
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const query = urlParams.get("query");
if (query) {
searchInput.value = query;
search(query);
}
</script>
</body>
</html>