Colossus Search

[afiumano]

I'd like to implement the search feature that Colossus has into Shadows. In Colossus when you click on 'search' in the header a sorta 'modal' comes up for you to search in. I have copied over the css and found some js [see below] but it definitely seems like there is more js to power this - I just can't find it. Where is the rest of the code to make this work?

MMSearchField.prototype.onMenuAppendHeader = function () {
return null;
};

MMSearchField.prototype.onMenuAppendItem = function (data) {
var span;

span = newElement('span', {'class': 'x-search-preview__entry'}, null, null);
span.innerHTML = data;

return span;
};

MMSearchField.prototype.onMenuAppendStoreSearch = function (search_value) {
var item;

item = newElement('div', {'class': 'x-search-preview__search-all'}, null, null);
item.element_text = newTextNode('Search store for product "' + search_value + '"', item);

return item;
};

MMSearchField.prototype.onFocus = function () {
this.element_menu.classList.toggle('x-search-preview--open');
};

MMSearchField.prototype.onBlur = function () {
this.element_menu.classList.toggle('x-search-preview--open');
};

colossus-search.jpg

[Leanne]

This script is in the head tag of my version of Colossus:

/** * Global search controls. */
(function () { 'use strict';
let searchOpeners = document.querySelectorAll('[data-hook="open-search"]');
let searchCloser = document.querySelector('[data-hook="close-search"]');
/** * Open global search and set focus to the input field. */
searchOpeners.forEach(function (searchOpener) {
searchOpener.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('has-active-search-preview');
document.querySelector('[data-hook="global-search"]').focus();
});
});
/** * Close global search. */
searchCloser.addEventListener('click', function (event) {
event.preventDefault();
document.documentElement.classList.toggle('has-active-search-preview'); }
);
/** * Close global search when the `Esc` key is pressed. */
window.addEventListener('keydown', function (keyEvent) {
if (keyEvent.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (keyEvent.key) {
case 'Escape':
if (document.documentElement.classList.contains('has-active-search-preview')) {
document.documentElement.classList.toggle('has-active-search-preview');
}
break;
default:
return;
}
keyEvent.preventDefault();
}, true);
}());
} );

[afiumano]

Thanks for sharing that - I found that code in a different location but that was what was missing. In my store it was under Global Settings > Search Settings > Search Preview Settings

[lesliekirk]

Thanks for sharing that - I found that code in a different location but that was what was missing. In my store it was under Global Settings > Search Settings > Search Preview Settings

I'm going to also tag in here because you and I are trying to do the same thing. I may need to start all over again but I'm determined to make this work. I have one twist to it. I've also implemented the Luxe ReadyTheme attribute swatch-swap on the CTGY page. I am worried about javascript conflicts.

I had created a branch and applied the Colossus framework (to at least have access to the Colossus coding). But where I may have goofed was to try and implement my swatch swap into it.