Этот проект принёс Сергей Капустин — классный дизайнер, с которым мы легко сработались. Сайт делали для JS JIG, производителя рыболовной фурнитуры из Ростова-на-Дону: джиг-головки Barbarian и «Коготь», грузы штопор и капля. Четыре товара и 149 вариантов по размерам и весам. Сергей задизайнил магазин и собирался переносить макет на Тильду. Я отговорил: с таким каталогом и онлайн-оплатой конструктор быстро упрётся в потолок. Договорились просто: дизайн его, код мой.
Витрина — чистые HTML, CSS и JavaScript, без сборки и фреймворков. Из макета в код переехали вертикальная бегущая строка Jig for Sports вдоль левого края и красные пилюли навигации. Корзина хранится в localStorage, поэтому счётчик одинаковый во всех вкладках. Карточка при добавлении улетает в корзину анимацией, но уважает prefers-reduced-motion. Фотографии отдаются в webp с ретина-версиями и фолбэком.
Оплата идёт через Ozon Pay: банковская карта, СБП, Ozon Карта. Готового SDK у Ozon нет, адаптер к эквайринговому API написал с нуля: подписи запросов, вебхуки, чеки. Два правила безопасности зашиты в тесты: сумму заказа считает только сервер по прайсу из базы, а факт оплаты подтверждается только прямым запросом статуса — вебхуку на слово не верим. Чек покупателю выбивает Озон Банк, своя онлайн-касса магазину не нужна.
Админку собрал на Laravel и Filament. Клиент сам правит цены и наличие, переставляет товары перетаскиванием, редактирует тексты страниц, загружает фотографии и выгружает заказы в CSV. Главная архитектурная идея: панель патчит статику прямо на сервере. После кнопки «Обновить витрину» Laravel перегенерирует файл с товарами, а из одного загруженного PNG панель делает сразу три оптимизированных изображения. Посетитель при этом всегда видит быстрые статические страницы, без базы и рендера.
Бэкенд писал по TDD: сначала тест, потом код. В итоге 453 теста, строк в тестах больше, чем в самом коде. Деплой одной кнопкой из GitHub Actions: прогон тестов в Docker против настоящего MySQL, выгрузка на Beget, смоук-проверки и откат заменой одного файла, если что-то пошло не так. От первого коммита до боевых платежей прошло две недели.
Технологии: HTML5, CSS, Vanilla JS, PHP 8.5, Laravel 13, Filament 5, MySQL 8, Ozon Pay (Ozon Acquiring API), Docker, GitHub Actions, Beget
js-jig.ru