Skip to content

Commit 2a494c2

Browse files
author
stubbe
committed
Added search page JS
1 parent f20ee65 commit 2a494c2

File tree

1 file changed

+371
-0
lines changed

1 file changed

+371
-0
lines changed

‎search/search.js‎

Lines changed: 371 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,371 @@
1+
<script>
2+
document.querySelector('#clerk-search').dataset.query = decodeURI(window.location.search.split('?w=')[1].replace(/\+/g, ' '))
3+
4+
Clerk('content', '.clerk_m')
5+
6+
7+
document.querySelector('#clerk-show-facets').addEventListener('click', function(){
8+
target = document.querySelector('#clerk-search-filters');
9+
if(target.style.display === 'none'){
10+
target.style.display = 'block';
11+
} else {
12+
target.style.display = 'none';
13+
}
14+
15+
})
16+
17+
18+
//Sorting For Facets
19+
var mastSizes = ["XXS", "XS", "S", "M", "L", "XL", "XXL", "XXXL", "XXXXL", "4XL", "5XL", "One size"];
20+
var reA = /[^a-zA-Z]/g;
21+
var reN = /[^0-9]/g;
22+
function localeSort(s) {
23+
Array.prototype.slice.call(s).sort(function sort (ea, eb) {
24+
var aA = ea.textContent.replace(reA, "");
25+
var bA = eb.textContent.replace(reA, "");
26+
if (aA === bA) {
27+
var aN = parseInt(ea.textContent.replace(reN, ""), 10);
28+
var bN = parseInt(eb.textContent.replace(reN, ""), 10);
29+
return aN === bN ? 0 : aN > bN ? 1 : -1;
30+
} else {
31+
return aA > bA ? 1 : -1;
32+
}
33+
}).forEach(function(div) {
34+
div.parentElement.appendChild(div);
35+
});
36+
}
37+
38+
39+
40+
document.querySelector('select.clerk-result-sort').addEventListener('change', function(){
41+
selection = this.value;
42+
if(selection == 'relevance'){
43+
Clerk('content', '#clerk-search', 'param', {
44+
orderby: null,
45+
order: null
46+
});
47+
}
48+
if(selection == 'upprice'){
49+
Clerk('content', '#clerk-search', 'param', {
50+
orderby: 'price',
51+
order: 'asc'
52+
});
53+
}
54+
if(selection == 'downprice'){
55+
Clerk('content', '#clerk-search', 'param', {
56+
orderby: 'price',
57+
order: 'desc'
58+
});
59+
}
60+
if(selection == 'upname'){
61+
Clerk('content', '#clerk-search', 'param', {
62+
orderby: 'name',
63+
order: 'asc'
64+
});
65+
}
66+
if(selection == 'downname'){
67+
Clerk('content', '#clerk-search', 'param', {
68+
orderby: 'name',
69+
order: 'desc'
70+
});
71+
}
72+
})
73+
74+
if(!facetStateObj){
75+
var facetStateObj = {};
76+
}
77+
78+
Clerk('on', 'rendered', '#clerk-search', function (data, content) {
79+
80+
81+
82+
83+
//console.log(content)
84+
//remove variant duplicates
85+
var query = document.querySelector('#clerk-search').dataset.query.toLowerCase().split(' ');
86+
var host = document.querySelector('#clerk-search-results');
87+
var product_card = host.querySelectorAll('.clerk-design-product');
88+
var rsp = content.product_data;
89+
for(i=0;i<query.length;i++){
90+
word = query[i];
91+
//console.log(word)
92+
for(j=0;j<rsp.length;j++){
93+
list = rsp[j].variant_colors_synonyms;
94+
alt_imgz = rsp[j].variant_images;
95+
//list = product_card[j].dataset.synonyms.toLowerCase().split(',');
96+
//alt_imgz = product_card[j].dataset.vimages.split('g,');
97+
for(jj=0;jj<list.length;jj++){
98+
//console.log(list[jj], ' '+word)
99+
if(list[jj].toLowerCase().indexOf(word) > -1){
100+
new_image = alt_imgz[jj];
101+
//console.log(new_image)
102+
product_card[j].querySelector('.clerk-design-component-JhII4gjU').style.backgroundImage = `url(${new_image})`
103+
}
104+
}
105+
106+
}
107+
}
108+
109+
document.querySelectorAll('.clerk-swatch-wrap').forEach(function(item,index){
110+
var srcs = [],
111+
temp,
112+
swatches = item.querySelectorAll('.clerk-variant-swatch');
113+
for(i=0;i<swatches.length;i++){
114+
el = swatches[i];
115+
temp = el.src;
116+
if(srcs.indexOf(temp) < 0){
117+
srcs.push(temp);
118+
} else {
119+
el.remove();
120+
}
121+
}
122+
})
123+
124+
//Code to replace jquery slidetoggle, bound to titles in loop.
125+
126+
var title_toggle = document.querySelectorAll('.clerk-facet-group-title');
127+
128+
var screenW = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
129+
130+
for(i = 0; i < title_toggle.length; i++){
131+
132+
if(screenW > 800){
133+
desktopTitle = title_toggle[i];
134+
var desktopFacetSearch = (desktopTitle.parentNode.querySelector('.clerk-facet-search')) ? desktopTitle.parentNode.querySelector('.clerk-facet-search') : null;
135+
var desktopContainer = desktopTitle.parentNode.querySelector('.clerk-facet-group-facets');
136+
var desktopObjkey = desktopTitle.parentNode.dataset.facetGroup;
137+
138+
desktopContainer.classList.add('active');
139+
desktopContainer.style.height = 'auto';
140+
141+
if(desktopFacetSearch){
142+
desktopFacetSearch.style.display = 'inline-block';
143+
}
144+
145+
var desktopHeight = desktopContainer.clientHeight + 'px';
146+
147+
desktopContainer.style.height = desktopHeight;
148+
149+
}
150+
151+
title_toggle[i].addEventListener('click', function(event){
152+
153+
objkey = this.parentNode.dataset.facetGroup;
154+
155+
event.preventDefault();
156+
157+
//var container = document.getElementById(this.dataset.container);
158+
var facetSearch = (this.parentNode.querySelector('.clerk-facet-search')) ? this.parentNode.querySelector('.clerk-facet-search') : null;
159+
var container = this.parentNode.querySelector('.clerk-facet-group-facets');
160+
161+
if (!container.classList.contains('active')) {
162+
163+
facetStateObj[objkey] = true;
164+
165+
container.classList.add('active');
166+
container.style.height = 'auto';
167+
168+
if(facetSearch){
169+
facetSearch.style.display = 'inline-block';
170+
}
171+
172+
var height = container.clientHeight + 'px';
173+
174+
container.style.height = '0px';
175+
176+
//document.querySelector('.clerk-facet-product_type .clerk-facet-group-facets.active').removeAttribute('style');
177+
178+
setTimeout(function () {
179+
container.style.height = height;
180+
}, 0);
181+
182+
183+
184+
} else {
185+
186+
facetStateObj[objkey] = false;
187+
188+
if(facetSearch){
189+
facetSearch.style.display = 'none';
190+
}
191+
192+
container.style.height = '0px';
193+
194+
container.addEventListener('transitionend', function () {
195+
container.classList.remove('active');
196+
}, {
197+
once: true
198+
});
199+
200+
}
201+
202+
});
203+
204+
}
205+
206+
207+
208+
var currentUrl = window.location.href;
209+
if (currentUrl.indexOf('!') == currentUrl.length - 1) {
210+
document.querySelector('.no-stock-clerk').style.display = 'block';
211+
}
212+
document.querySelectorAll('.main-product').forEach(function(item, index){
213+
mainProductType = item.dataset.productType;
214+
t = document.querySelectorAll(`.clerk-facet-product_type [data-value="${mainProductType}"]`);
215+
for(j=0;j<t.length;j++){
216+
t[j].classList.remove('type-tag-clerk');
217+
t[j].classList.remove('indented');
218+
t[j].classList.add('non-indented');
219+
}
220+
})
221+
if(document.querySelector('.clerk-facet-selected.non-indented')){
222+
document.querySelector('.clerk-facet-product_type .clerk-facet-group-facets').prepend(document.querySelector('.clerk-facet-selected.non-indented'))
223+
}
224+
225+
if(document.querySelectorAll('.clerk-facet-product_type .clerk-facet-selected').length > 0){
226+
var second_cat_list = document.querySelectorAll('.clerk-facet-product_type .non-indented.clerk-facet-selected');
227+
for(i=0;i<second_cat_list.length;i++){
228+
t = second_cat_list[i];
229+
var selectedType = t.dataset.value;
230+
document.querySelectorAll(`[data-product-type="${selectedType}"]`).forEach(function(item, index){
231+
var secondType = item.dataset.productTypeSecondary,
232+
second_selector = document.querySelectorAll(`[data-value="${secondType}"]`);
233+
for(u=0;u<second_selector.length;u++){
234+
q = second_selector[u];
235+
q.classList.remove('type-tag-clerk');
236+
q.style.paddingLeft = '15px';
237+
}
238+
});
239+
}
240+
if(document.querySelectorAll('.clerk-facet-selected.indented').length > 0){
241+
indented_facets = document.querySelectorAll('.clerk-facet-selected.indented');
242+
for(i=0;i<indented_facets.length;i++){
243+
t = indented_facets[i];
244+
myTypeFilter = t.dataset.value;
245+
document.querySelectorAll(`[data-product-type-secondary="${myTypeFilter}"]`).forEach(function(item, index){
246+
item.classList.remove('clerk-type');
247+
})
248+
}
249+
document.querySelectorAll('.clerk-type').forEach(function(item,index){
250+
item.remove();
251+
})
252+
document.querySelectorAll('.non-indented').forEach(function(item, index){
253+
item.addEventListener('click', function (e){
254+
r = document.querySelectorAll('.clerk-facet-selected.indented');
255+
for(o=0;o<r.length;o++){
256+
r[o].click();
257+
}
258+
})
259+
})
260+
}
261+
}
262+
263+
//Change Image on hover
264+
document.querySelectorAll('.clerk-variant-swatch').forEach(function(item,index){
265+
item.addEventListener('mouseenter', function(){
266+
var hoverIdentifier = item.dataset.name,
267+
hoverUrl = item.dataset.varImg;
268+
target = document.querySelector(`[data-main-name="${hoverIdentifier}"] .clerk-design-component-JhII4gjU`);
269+
target.style.opacity = 0;
270+
target.style.backgroundImage = `url(${hoverUrl})`;
271+
target.style.transition = 'all 0.5s';
272+
setTimeout(function(){
273+
target.style.opacity = 1;
274+
},0);
275+
})
276+
})
277+
278+
if(document.querySelector('.clerk-facet-instock .clerk-facet-selected[data-value="true"]')){
279+
document.querySelectorAll('.clerk-variant-swatch').forEach(function(item,index){
280+
stockVal = item.dataset.varStock;
281+
if(stockVal == 0){
282+
item.remove();
283+
}
284+
})
285+
document.querySelectorAll('.main-product').forEach(function(item,index){
286+
selectSwatch = item.querySelector('.clerk-variant-swatch')
287+
replaceImg = selectSwatch.dataset.varImg;
288+
imgLocation = item.querySelector('.clerk-design-component-JhII4gjU')
289+
imgLocation.style.backgroundImage = `url('${replaceImg}')`;
290+
})
291+
}
292+
293+
//If color selected, replace main image with the relevant one and add class class to detect which cards are changed
294+
295+
296+
if(document.querySelector('.clerk-facet-variant_colors .clerk-facet-selected')){
297+
colorPick = document.querySelector('.clerk-facet-variant_colors .clerk-facet-selected').dataset.value;
298+
targets = document.querySelectorAll(`.clerk-design-product [data-var-color="${colorPick}"]`);
299+
v = document.querySelectorAll('.clerk-design-product');
300+
for(i=0;i<targets.length;i++){
301+
y = targets[i];
302+
findImg = y.dataset.varImg;
303+
mainImageDiv = y.parentNode.parentNode.querySelector('.clerk-design-component-JhII4gjU');
304+
mainImageDiv.style.backgroundImage = `url('${findImg}')`;
305+
v[i].classList.remove('main-product');
306+
v[i].classList.add('markz');
307+
}
308+
}
309+
310+
//If size, replace main image with the relevant one and add class class to detect which cards are changed
311+
312+
313+
if(document.querySelector('.clerk-facet-variant_sizes .clerk-facet-selected')){
314+
colorPick = document.querySelector('.clerk-facet-variant_sizes .clerk-facet-selected').dataset.value;
315+
targets = document.querySelectorAll(`.clerk-design-product [data-var-size="${sizePick}"]`);
316+
v = document.querySelectorAll('.clerk-design-product');
317+
for(i=0;i<targets.length;i++){
318+
y = targets[i];
319+
findImg = y.dataset.varImg;
320+
mainImageDiv = y.parentNode.parentNode.querySelector('.clerk-design-component-JhII4gjU');
321+
mainImageDiv.style.backgroundImage = `url('${findImg}')`;
322+
v[i].classList.remove('main-product');
323+
v[i].classList.add('markz');
324+
}
325+
}
326+
327+
if(document.querySelector('.markz')){
328+
document.querySelectorAll('.main-product').forEach(function(item,index){
329+
item.remove();
330+
})
331+
}
332+
333+
var resultCount = document.querySelectorAll('.clerk-design-component-tOCxuayL').length;
334+
var resultQuery = document.querySelector('#clerk-search').dataset.query;
335+
var headerProductCount = document.createElement('div')
336+
headerProductCount.className = 'clerk-result-count';
337+
if(!document.querySelector('.clerk-result-count')){
338+
document.querySelector('#clerk-show-facets').appendChild(headerProductCount);
339+
} else {
340+
document.querySelector('.clerk-result-count').textContent = `Showing ${resultCount} results for ${resultQuery}`;
341+
}
342+
343+
var facetGroups = document.querySelectorAll('.clerk-facet-group:not(.clerk-facet-price)');
344+
345+
var sizeGroup = document.querySelector('.clerk-facet-variant_sizes')
346+
347+
for(i=0;i<facetGroups.length;i++){
348+
sel = facetGroups[i].querySelectorAll('.clerk-facet');
349+
localeSort(sel);
350+
}
351+
352+
for(i=mastSizes.length;i>-1;i--){
353+
size = mastSizes[i];
354+
selector = sizeGroup.querySelectorAll(`.clerk-facet[data-value*="${size}"]`)
355+
selector.forEach(function(item){
356+
if(item.dataset.value.indexOf('Short') == -1 && item.dataset.value.indexOf('Long') == -1 && item.dataset.value.indexOf('US') == -1){
357+
sizeGroup.querySelector('.clerk-facet-group-facets').prepend(item);
358+
}
359+
});
360+
361+
}
362+
363+
364+
for(i=0;i<title_toggle.length;i++){
365+
if(facetStateObj[title_toggle[i].parentNode.dataset.facetGroup] == true){
366+
title_toggle[i].click()
367+
}
368+
}
369+
370+
});
371+
</script>

0 commit comments

Comments
 (0)