Announcement

Collapse
No announcement yet.

Colossus Search

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    replied
    Originally posted by afiumano View Post
    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.

    Leave a comment:


  • afiumano
    replied
    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

    Leave a comment:


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

    Code:
    
    /** * 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);
    }());
    } );

    Leave a comment:


  • afiumano
    started a topic Colossus Search

    Colossus Search

    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?
    Code:
    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
Working...
X