Части CSS шаблоны

CSS-шаблоны запчастей для каталогов с однотипными позициями

Две карточки товаров в каталоге запчастей могут выглядеть совершенно одинаково, но означать абсолютно разное. Один товар отправляется сегодня днем, второй доступен по спецзаказу с ожиданием в шесть недель, а третий снят с производства в пользу более новой версии. Стилизация делает эту разницу заметной еще до клика, а CSS-шаблоны запчастей предоставляют поставщикам набор визуальных правил для подобных различий.

Статус наличия на визуально одинаковых карточках

Состояние складских запасов меняется быстрее, чем фотографии товаров, поэтому основную повседневную задачу выполняют привязанные к ним индикаторы.

Некоторые из этих состояний требуют особого оформления:

• «В наличии», «Мало на складе» и «Предзаказ», разделенные чем-то более очевидным, чем один лишь цвет.
• Позиции под заказ, где срок поставки должен отображаться рядом с ценой.
• Снятые с производства компоненты со ссылкой на заменившую их деталь.
• Подтвержденная совместимость с выбранной техникой и предупреждение при несовместимости.

Дистрибьюторам, предлагающим оригинальные детали (OEM) и аналоги параллельно, требуется еще один сигнал: разница в цене вызывает вопрос, на который небольшая метка отвечает быстрее целого абзаца.

Удобное чтение длинных кодов деталей

Артикул или номер детали — это настоящее имя товара, поэтому он заслуживает большего визуального веса, чем окружающий текст. Моноширинный шрифт, увеличенный межбуквенный интервал и четкий контраст упрощают прочтение девятнадцатизначного кода вслух и его сверку с изношенной деталью на верстаке. Таблицы характеристик требуют такого же внимания: выровненные единицы измерения, ненавязчивые разделители строк и постоянная ширина колонок по всему списку.

Nicepage покрывает большинство этих задач с помощью визуальных элементов управления, а Custom CSS Code берет на себя остальное. Документация по пользовательскому CSS поясняет, как добавлять правила и присваивать классы элементам, сохраняя специфичные для каталога решения — бейджи совместимости, строки сравнения или чипы фильтров — вне общей визуальной системы.

На узких экранах требуется меньше колонок

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

Такие переопределения стилей стоит держать строго ограниченными: правило, созданное для одной линейки товаров с аномально длинными описаниями, не должно переназначать стили каждой карточки в каталоге. Оформление, выдерживающее постоянный рост каталога, обычно самое строгое: единый визуальный язык для повторяющихся элементов плюс короткий список действительно обоснованных исключений.