Отображение метаданных на фронтенде

Данное руководство демонстрирует, как настройки метаданных атрибутов и их значений влияют на визуальное представление характеристик товаров на сайте. Примеры иллюстрируются скриншотами с результатами применения конфигураций.

Основные возможности настройки

Настройки выполняются через интерфейс модуля на вкладке Настройки в разделе Фронтенд.

Напомним Таблица настроек содержит два столбца:

• Атрибут — глобальные параметры для всех значений атрибута.

• Значение — индивидуальные настройки для конкретных значений.

Доступные опции

Параметр	Описание
Изображение	Включение/выключение отображения картинки атрибута или значения.
Иконка	Добавление графического символа (например, 📦 для упаковки).
Иконка подсказки	Отображение ⓘ для вызова всплывающей подсказки с описанием.
Описание	Текстовое содержание для всплывающих подсказок.
SEO URL	Отображение ссылки для перелинковки на внешние ресурсы.
Автогенерация URL	Автоматическое создание SEO-оптимизированных адресов.
Единицы	Включение единиц измерения (Гб, Мгц, Вт).
Стиль отображения	Формат вывода единиц: Clockspeed (MHz) vs Clockspeed, Megahertz.

---

Примеры реализации

Карточка товара

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

Результат после настройки в товаре

Frontend metadata settings

Особенности:

• Иконки ⓘ открывают подробные описания (например, стандарт Wi-Fi).
• Значения с гиперссылками (🔗) переходят на внешние страницы (например, описание интерфейсов).
• Единицы измерения отображаются в выбранном формате (350 (Вт) вместо 350 Вт).

Frontend product tooltip

Фильтр товаров категории

Настройки для фильтра делают процесс выбора более наглядным и удобным.

Результат после настройки в фильтре

Frontend fiter

Особенности:

• Атрибуты с иконками (⚡ для энергопотребления) улучшают восприятие.
• Подсказки ⓘ объясняют значение параметров (например, «Напряжение питания»).
• Единицы измерения добавляют информативности и позволяют контролировать размерность (220-240 (В)).

Frontend fiter tooltip

---

Преимущества использования расширенных настроек

Для карточки товара

1. Улучшенный UX:

   • Всплывающие подсказки снижают количество переходов к разделу «Описание».
   • Графические иконки упрощают восприятие технических данных.

2. SEO-оптимизация:

   • Автогенерация URL позволяет связывать характеристики с авторитетными источниками.
   • Структурированные данные повышают индексацию поисковыми системами.

3. Гибкость представления:

   • Возможность выбрать стиль единиц измерения под целевую аудиторию (например, Гц vs Герцы).

Для фильтров категории

1. Эффективный поиск:

   • Диапазонные значения (250–300 (Вт)) помогают быстро сузить выбор.
   • Иконки в фильтре визуально выделяют ключевые параметры.

2. Снижение отказов:

   • Подробные подсказки ⓘ уменьшают неопределенность при выборе товаров.

3. Единообразие дизайна:

   • Централизованная настройка гарантирует одинаковый стиль отображения во всех разделах сайта.

---

Технические детали реализации

Для внедрения изменений используются файлы модификаторов из папки ocmod/:

• attributipro3.frontend.product.ocmod.zip — для карточки товара.
• attributipro3.frontend.filter.ocmod.zip — для фильтров.

Важно: Все модификаторы адаптированы под нативный дизайн OpenCart 3.x. При использовании сторонних тем или плагинов может потребоваться дополнительная доработка.

---

Итоги

Грамотная настройка метаданных позволяет:

• Создать информативные и интерактивные карточки товаров.
• Упростить процесс фильтрации для пользователей.
• Повысить конверсию за счет четкого представления характеристик.

Используйте предоставленные примеры как основу для настройки вашего магазина!