Весь магазин на экранах в виде 16 готовых к вставке HTML-виджетов: фильтруемый магазин, рабочая корзина, выдвигаемая сумка и верстка, проверенная на семи ширинах экрана. Лицензия MIT, без надстроек конструкторов страниц, без WooCommerce.

ЧТО ВКЛЮЧЕНО

Одна zip-архив без инструментов сборки:

• vera-kit.css - вся дизайн-система (25 KB, не минимизирован, прокомментирован, палитра в одном блоке :root)

• vera-kit.js - сумка, фильтр по категориям, формы, эффекты прокрутки (10 KB, vanilla JS, самозащищённый)

• /widgets - 16 HTML-элементов для вставки, пронумерованных в порядке вставки: 00-loader, 01-header-nav, 02-hero, 03-marquee, 04-category-cards, 05-products-grid, 06-editorial-split, 07-values-stats, 08-quotes, 09-newsletter, 10-footer, 11-bag-drawer-tabbar, 12-category-page-head-chips, 13-category-blocks, 14-products-filtered-grid, 15-contact-form

• /images - 20 фотографий CC0 (JPEG/WebP, оптимизированы, около 1,7 МБ)

• /screenshots - 5 готовых кадров магазина

• 4-страничное рабочее демо (домашняя страница, категории, о компании, контакт) работает офлайн

• README.md, INSTALL.md и LISTING.md - руководство по настройке, таблица устранения неполадок, заметки по повторному использованию

MIT-лицензия на код, CC0 на фотографии.

РЕАЛИЗОВАНО ТАК, КАК ДОЛЖЕН ВЕСТИ МАГАЗИН

1. Реальный фильтр по категориям - кликая по категории отображаются только товары этой категории, обновляются заголовок, количество и URL.

2. Рабочая корзина - добавление, удаление, количество, итог - хранится в браузере, с выдвижной панелью и заказным письмом.

3. Проверено на разных разрешениях - тестировано на 320 / 360 / 390 / 414 / 768 / 1024 / 1440 px - нигде горизонтальный скролл.

4. Безопасно без JavaScript - содержимое скрывается только после подтверждения активации JavaScript, чтобы ошибка не пустила страницу.

ГОТОВО ЗА МЯТЬ МИНУТ

1. Распакуйте пакет - вы получите vera-kit.css, vera-kit.js, /images (20 фото), /widgets (16 HTML-элементoв), рабочее демо на 4 страницы, README.md и INSTALL.md