Пошук <smart search> на сторінці для CMS колекцій
Use Case
Якщо коротко, функціоанльність пошуку (search) можна розділити на два типи - глобальний (global) та обмежений (scoped). Глобальний пошук працює так само, як працює Google в Інтернеті - пошук по всьому контенту. Обмежений пошук, або ж scoped search проводить пошукову операцію тільки в рамках певної визначеної частини контенту.
Нативний елемент пошуку від Webflow належить до глобального типу пошуку. За замовчуванням, користувач може налаштувати пошук контенту по всьому сайту, навіть є можливість підготувати дизайн сторінки з пошуковою видачею, як це і працює в того ж Google.
Але як бути, коли в нас завдання додати пошук на конкретну сторінку і щоб цей пошук відбувався тільки в рамках заданої сторінки, а не по всьому сайту? Доприкладу налаштувати динамічний пошук, який буде одразу спрацьовувати на перші ж літери пошукового query (ключового слова).
Для того щоб перетворити нативний елемент пошуку на пошуковий рядок, який здійснює операцію 'search' виключно в межах конкретної сторінки, ти можеш скористатися даним сніпетом кастомного коду і слідкувати інструкції в матеріалі.
Додавання сніпету коду
Додай цей код в розділ перед <body> в налаштуваннях сторінки на якій потрібно додати динамічний пошук.
<script src="https://flowgiri.com/js-library/on-page-search.min.js">
</script>
Додавання CMS колекції на сторінку
Для того, щоб у нас була певна база даних по якій буде здійснюватись пошук, нам потрібно для початку створити таку базу даних. Тож першим кроком після інтеграції коду, нам потрібно додати CMS колекцію. Айтеми цієї колекції і будуть кістяком для пошукових запитів користувачів. Тому, якщо в тебе вже готова база даних і вона вже підключена до фронта, то рухайся далі по мануалу, якщо ж ні, то спочатку додай CMS колекцію на сторінку та додай хоча б 5 айтемів до неї.
Нейминг структури CMS колекції
Після того, як ми успішно інтегрували JS бібліотеку для нашої сторінки, нам потрібно внести зміни у нейминг окремих елементів CMS колекції, айтеми якої будемо використовувати для користувацького пошуку на сторінці.
Така CMS колекція може бути колекція з вашими блогпостами, продуктовими картками чи кейсами з портфоліо. Немає значення, що ви поміщаєте у свою CMS колекцію, даний код буде здійснювати пошук саме по айтемам конкретної CMS колекції.
Тож приступимо до змін назви елементів у Навігаторі. Нижче подаю скрини, які наглядно демонструють назви елементів за замовчуванням від Webflow, та назви CSS класів, які потрібно присвоїти елементам для того, щоб кастомний код коректно відпрацьовував.
Демонстрація змін у неймингу елементів для CMS колекції
Налаштування елементу Search
Після того, як ти стилізував свій search bar, потрібно зробити ще декілька менших налаштувань. Тому, обираємо на канвасі наш елемент Search та переходимо в Навігатор. Ми повинні бачити наступну анатомію елементу:
Search. Загальний батьківський елемент.
Field Label. Лейбл для поля введення, не обов'язковий елемент, його в залежності від дизайну пошукового рядка, можна взагалі прибрати.
Search Input. Поле для введення пошукового query.
Search Button. Кнопка запуску пошуку.
Все, що нам необхідно зробити для налаштування цього елементу це:
Рекомендую (опціонально) змінити назву класу .Search на .search-bar
Рекомендую (опціонально) прибрати елемент Field Label взагалі
Для елементу Search Input у селекторі прописуємо назву CSS класу: 'flowgiri-onepage-search-field'
Демонстрація змін у неймингу елементів
Додавання кастомних атрибутів
Щоб коректно відпрацьовував кастомний JS код, який ми інтегрували на сторінку, нам потрібно присвоїти окремим елементам на сторінці так звані кастомні атрибути. Для наступних елементів нам потрібно налаштувати кастомні атрибути в панелі Elements settings:
Елемент: Search Input (назва класу якого була змінена на .flowgiri-onepage-search-field);
Елемент: Collection List (назва класу якого була змінена на .item-list);
Додавання кастомного атрибуту до елементу Search Input з класом .flowgiri-onepage-search-field
Додавання кастомного атрибуту до елементу Collection list з класом .item-list
Публікація сайту та тестування
Коли ми завершили всі попередні кроки з мануалу, нам потрібно опублікувати сайт на тестовий чи користувацький домен. Кастомні сніпети коду можна протестувати виключно на опублікованому проєкті. Тестуємо зміни, вводимо в пошуковий рядок ключові слова, що співпадають із контентом, який є всередині айтемів CMS колекції і радіємо результату! Якщо все таки, щось пішло не так, повернись до мануалу і повтори дії, або напиши мені.