Кейс разработки интернет-магазина
Разработка PetFoodStore.by на OpenCart по дизайну из Figma
Превратил дизайн-макет в работающий интернет-магазин кормов для собак и кошек: разработал шаблон на OpenCart, настроил каталог и фильтры, проработал карточки товаров, переработал корзину и выполнил базовую SEO-подготовку проекта.
- OpenCart
- Figma → вёрстка
- Интернет-магазин
- Каталог и фильтры
- Корзина
- Базовое SEO
О проекте
Интернет-магазин премиальных кормов для домашних животных
PetFoodStore.by специализируется на натуральных кормах Natural Greatness, Natural Woodland и Dibaq. В каталоге представлены товары для собак и кошек, ветеринарные диеты, акционные предложения и информационные материалы о подборе питания.
Заказчик предоставил дизайн в Figma. Моей задачей было перенести визуальную концепцию на OpenCart и собрать полноценный e-commerce: от структуры каталога и карточки товара до корзины, оформления заказа и базовой подготовки сайта к индексации.
- Проект
- PetFoodStore.by
- Платформа
- CMS OpenCart
- Ниша
- Зоотовары и корма
- Регион
- Беларусь
- Исходные материалы
- Дизайн в Figma
- Моя роль
- Разработка и внедрение
Задача проекта
Соединить фирменный дизайн и удобный сценарий покупки
Магазин должен был не просто показывать ассортимент, а помогать владельцу животного подобрать подходящий рацион и оформить заказ без лишних действий.
Перенести дизайн из Figma
Сохранить визуальную концепцию макетов и адаптировать её к реальным данным, состояниям и ограничениям OpenCart.
Организовать сложный каталог
Разделить товары по виду животного, типу корма и назначению, а также предусмотреть фильтрацию по параметрам питомца.
Упростить оформление заказа
Сделать выбор фасовки и добавление товара понятными, а корзину — информативной и удобной для продолжения покупки.
Что было реализовано
Разработка ключевых разделов интернет-магазина
Работы охватили пользовательский интерфейс, каталог, карточки товаров, покупательский сценарий и базовую техническую подготовку проекта.
Адаптивная вёрстка макетов
Дизайн перенесён в шаблоны главной, категорий, карточки товара, информационных страниц и корзины с учётом динамических данных CMS.
Логичная структура ассортимента
Созданы разделы кормов для собак и кошек, ветеринарных диет, акций и новостей. Структура допускает расширение каталога.
Фильтры по параметрам питомца
Реализован подбор по бренду, классу корма, этапу жизни, размеру, состоянию и особым потребностям животного.
Полная информация для выбора
В карточке объединены варианты фасовки, цена, наличие, преимущества рецепта, состав, пищевая ценность и таблица дозировок.
Переработанный сценарий покупки
Настроены добавление товара с уведомлением, обновление счётчика, отображение выбранной фасовки, количества, веса и итоговой суммы.
Работа через административную панель
Каталог, цены, остатки, характеристики и информационные материалы можно поддерживать средствами OpenCart без изменения шаблонов.
Переработка корзины
Покупатель видит состав заказа и следующий шаг
Особое внимание уделено переходу от выбора фасовки к оформлению заказа.
- Добавление товара без ухода с карточки
- Уведомление об успешном добавлении
- Автоматическое обновление счётчика в шапке
- Сохранение выбранной фасовки товара
- Изменение количества в корзине
- Отображение веса и итоговой стоимости
- Заметный переход к оформлению заказа
FOOD
Базовая SEO-подготовка
Заложена техническая основа для дальнейшего продвижения
Что вошло в работы
- Файл robots.txt с ограничением служебных параметров
- XML-карта сайта с товарными страницами и изображениями
- Шаблоны Title и H1 для основных типов страниц
- Тексты и заголовки для ключевых разделов каталога
- Логичная иерархия категорий и подкатегорий
- Понятные названия товаров и хлебные крошки
Результат
Запущен рабочий интернет-магазин на OpenCart
Проект объединил фирменный дизайн, удобный подбор товаров и управляемую e-commerce-платформу.
Что получил заказчик
- Работающий магазин по предоставленному дизайну
- Структурированный каталог кормов и диет
- Подбор товаров по параметрам животного
- Информативные карточки с вариантами фасовки
- Переработанную корзину и понятную сводку заказа
- Возможность самостоятельно управлять ассортиментом
- Базовую подготовку сайта к индексации
Технологии проекта
Решение построено на стандартном технологическом стеке OpenCart и может развиваться вместе с ассортиментом магазина.
