Перейти к основному содержимому

Секции finder (каскадные выпадающие списки)

Секция Vertex finder — это виджет поиска товаров с каскадными выпадающими списками. Покупатели сужают выбор до точной нужной детали, выбирая 3 последовательных значения — Make → Model → Year, или Brand → Category → Capacity, или Printer Brand → Model → Color — и finder перенаправляет их в отфильтрованную коллекцию.

Vertex поставляется с четырьмя демо-пресетами — Vertex (индустриальный / MRO), Throttle (автозапчасти), OfficeIT (офис и IT) и Inkline (расходники для печати). Есть три типа finder, и секция finder по умолчанию подключена в трёх из четырёх пресетов:

  • Throttle (автозапчасти) — Make / Model / Year
  • OfficeIT (офис и IT) — Brand / Category / Capacity
  • Inkline (расходники для печати) — Printer Brand / Model / Color

Пресет Vertex (индустриальный) поставляется без finder — вместо этого он опирается на фасетные фильтры коллекций и predictive search.

Make/Model/Year finder above hero (Throttle preset)

Одна секция, три типа finder

Вы не устанавливаете разную секцию для каждой отрасли — в каждом пресете это та же секция finder. Каждый пресет просто заполняет свои собственные подписи выпадающих списков и списки опций (Make/Model/Year, Brand/Category/Capacity или Printer Brand/Model/Color). Переключение каскада на другую вертикаль — это вопрос редактирования этих подписей и опций.

Finder Make/Model/Year​

Finder — это каскад из 3 уровней. Выберите Уровень 1 → варианты Уровня 2 заполнятся на основе выбора Уровня 1 → выберите Уровень 2 → варианты Уровня 3 заполнятся → нажмите Submit → переход в отфильтрованную коллекцию.

Откройте Shopify admin → Online Store → Themes → Customize. В редакторе страницы нажмите Add section и выберите Finder.

Настройки​

  • Heading — «Find parts for your vehicle» или «Find toner for your printer».
  • Intro text — Короткое подтверждение — «Select your make, model, and year to see compatible parts.».
  • Drop-down 1 / 2 / 3 label — Видимая подпись для каждого уровня — например, Make, Model, Year. Измените эти подписи (плюс блоки опций ниже), чтобы превратить ту же секцию в любой каскад, какой захотите.
  • Query param name (на каждый выпадающий список) — URL-параметр, который каждый уровень добавляет к ссылке поиска/коллекции (например, make, model, year). По умолчанию q1 / q2 / q3, если оставить пустым.
  • Submit button label — «Find parts» или «Find toner».
  • Form action URL — Куда отправляется форма. По умолчанию /search; укажите URL коллекции (например, /collections/all), чтобы вместо этого фильтровать коллекцию.
  • Color scheme — Стандартный выпадающий список цветовых схем (Light / Accent band / Dark).
  • Vertical padding — Сколько свободного пространства получает полоса finder сверху и снизу.

Варианты каждого выпадающего списка берутся из блоков опций, которые вы добавляете в секцию — один блок на каждый вариант. Опция выпадающего списка 2 / 3 может задать Parent value, чтобы она появлялась только после того, как выбран соответствующий родительский вариант — именно так каскад сужается.

Три типа finder​

1. Make / Model / Year — пресет Throttle​

Для дистрибьюторов автозапчастей с каталогами, ориентированными на fitment.

Каскад:

  1. Make — Ford, Toyota, Chevrolet, BMW и т.д.
  2. Model — заполняется на основе выбранного Make (F-150, Camry, Silverado, 3 Series)
  3. Year — заполняется на основе выбранных Make и Model (2018, 2019, 2020, ...)

Submit: переводит покупателя в соответствующую коллекцию, отфильтрованную по товарам с тегом этого автомобиля.

Настройка данных: добавьте варианты прямо в секцию как блоки опций в редакторе темы:

  • Одна опция выпадающего списка 1 на каждый Make (Ford, Toyota, Chevrolet…)
  • Одна опция выпадающего списка 2 на каждую Model, с Parent value, установленным на принадлежащий ей Make
  • Одна опция выпадающего списка 3 на каждый Year, с Parent value, установленным на принадлежащую ему Model

Затем затегируйте ваши коллекции так, чтобы отправленный URL совпадал (Vertex использует нативную фильтрацию Shopify по тегам).

2. Brand / Category / Capacity — пресет OfficeIT​

Для дистрибьюторов офиса, IT и электроники.

Каскад:

  1. Brand — HP, Dell, Lenovo, Apple, Cisco
  2. Category — заполняется на основе выбранного Brand (Laptops, Monitors, Routers, Printers)
  3. Capacity — заполняется на основе выбранных Brand и Category (8 GB / 16 GB / 32 GB · 24" / 27" / 32" · и т.д.)

Submit: переводит покупателя в соответствующую коллекцию по бренду и категории.

Настройка данных: добавьте варианты в редакторе темы как блоки опций — опция выпадающего списка 1 на каждый Brand, опция выпадающего списка 2 на каждую Category (с Parent value, установленным на Brand), и опция выпадающего списка 3 на каждую Capacity (с Parent value, установленным на Category).

3. Printer Brand / Model / Color — вариант для расходников для печати​

Для дистрибьюторов расходников для печати, продающих тонер, чернила и расходные материалы, которые должны подходить к конкретному принтеру.

Каскад:

  1. Printer Brand — HP, Canon, Brother, Epson, Xerox и т.д.
  2. Printer Model — заполняется на основе выбранного Brand (LaserJet Pro M404, PIXMA TR8620 и т.д.)
  3. Color — заполняется на основе выбранных Brand и Model (Black, Cyan, Magenta, Yellow или Multi-pack)

Submit: переводит покупателя в соответствующую коллекцию, отфильтрованную по картриджам, совместимым с этим принтером.

Настройка данных: добавьте варианты в редакторе темы как блоки опций — опция выпадающего списка 1 на каждый Printer Brand, опция выпадающего списка 2 на каждую Printer Model (с Parent value, установленным на Brand), и опция выпадающего списка 3 на каждый Color (с Parent value, установленным на Model).

Этот каскад поставляется предварительно настроенным на пресете расходников для печати Inkline, так что витрина расходников для печати получает готовый finder для тонера из коробки — просто замените демо-опции на собственную линейку принтеров.

Как работает каскад​

Варианты finder берутся из блоков опций, которые вы добавляете в секцию, поэтому всё встроено в страницу. Далее:

  1. При загрузке страницы варианты Уровня 1 заполняются из его блоков опций выпадающего списка 1
  2. Когда покупатель выбирает Уровень 1, Уровень 2 сужается до опций, чьё Parent value совпадает с выбором Уровня 1
  3. Когда покупатель выбирает Уровень 2, Уровень 3 сужается до опций, чьё Parent value совпадает с выбором Уровня 2
  4. При отправке покупатель переводится на результаты поиска или коллекцию, где каждый уровень добавлен как его query-параметр

Опции встроены в страницу при её загрузке — поэтому нет лишнего сетевого запроса, и каскад работает моментально.

Работает без JavaScript

Опции первого уровня встроены прямо в страницу, поэтому finder работает, даже если в браузере покупателя отключён JavaScript — он может отправить только первый уровень и попасть на отфильтрованные результаты. Это та же философия прогрессивного улучшения, которую вы увидите по всему Vertex.

Настройка данных finder​

Для каждого типа finder вам нужно:

  1. Задать три подписи выпадающих списков под ваш каскад (например, Make / Model / Year) и Query param name для каждого уровня, если хотите чистые URL.
  2. Добавить блок опции на каждый вариант — одна опция выпадающего списка 1 на каждое значение верхнего уровня, затем опции выпадающих списков 2 и 3 с установленным Parent value, чтобы каждый уровень сужал следующий.
  3. Указать Form action URL на /search (по умолчанию) или коллекцию (например, /collections/all).
  4. Затегировать ваши коллекции, чтобы URL фильтра совпадал. Vertex использует нативную фильтрацию Shopify по тегам, поэтому коллекция «Ford F-150 parts» должна иметь тег vehicle:ford-f-150.

→ Три демо-пресета (Throttle, OfficeIT, Inkline) уже поставляются с полностью заполненным finder — продублируйте один и замените на собственные подписи и опции.

Где разместить finder​

ПозицияЛучше всего для
Верх главной страницы, сразу под heroВертикали, где finder является ценностным предложением главной (автозапчасти, расходники для печати)
Внутри hero (как боковая панель)Вертикали, где изображение hero несёт ценностное предложение, а finder — параллельный CTA
Под featured collectionВертикали, где finder — один из нескольких путей просмотра
На выделенной странице finderВертикали, где finder — основной метод навигации; ссылка на неё из вторичного меню хедера

Пресеты Throttle и Inkline размещают finder под hero. Пресет OfficeIT использует меньший вариант внутри hero.

Поведение B2B + finder​

Для вошедших B2B-покупателей finder перенаправляет в отфильтрованную коллекцию — и эта коллекция учитывает область видимости каталога B2B покупателя. Поэтому поиск Ford F-150 показывает только запчасти F-150, которые есть в каталоге покупателя, с применёнными уровнями объёмного ценообразования покупателя.

Сам finder не фильтрует по каталогу — эта фильтрация происходит на странице коллекции, как только покупатель туда попадает. Это правильное разделение: finder сужает до правильного семейства товаров; коллекция показывает только то, что покупатель может купить по правильной цене.

Советы по качеству данных finder​

  • Используйте единообразную капитализацию в ваших записях (всегда Ford, никогда FORD или ford) — каскад сопоставляет строки точно
  • Избегайте пробелов в конце в значениях записей — даже невидимый пробел сломает каскад
  • Заполняйте все 3 уровня для каждой записи — неполные записи ломают каскад для всех ниже по отсутствующему уровню
  • Используйте разумное значение по умолчанию для Target collection — покупатели, отправившие неполный выбор (или чей выбор не имеет совпадений), попадают сюда

Что дальше​