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

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

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

Vertex поставляется с одним готовым стилем (промышленность / MRO), и та же секция finder обеспечивает работу конфигураций автозапчастей, офиса и IT и печати, которые вы из него собираете. Есть три типа finder, которые вы можете настроить:

  • Автозапчасти — Make / Model / Year
  • Офис и IT — Brand / Category / Capacity
  • Расходники для печати — Printer Brand / Model / Color

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

Одна секция, три типа 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 — конфигурация автозапчастей​

Для дистрибьюторов автозапчастей с каталогами, ориентированными на 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 — конфигурация офиса и IT​

Для дистрибьюторов офиса, 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).

Этот каскад заранее заполнен в demo Vertex для конфигурации расходников печати (цветовая палитра Inkline teal), так что витрина расходников печати получает готовый 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.

→ Три конфигурации (автозапчасти, офис и IT, расходники печати) в demo Vertex уже поставляются с полностью заполненным finder — продублируйте одну и замените на собственные подписи и опции.

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

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

Конфигурации автозапчастей и расходников печати размещают finder под hero. Конфигурация офиса и IT использует меньший вариант внутри hero.

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

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

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

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

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

Что дальше​