Здравствуйте, уважаемый читатель!
В данной статьей я приоткрою завесу нашей внутренней кухни и покажу как идет процесс разработки интернет-магазина на Magento.
1. Поступило ТЗ на создание интернет-магазина Бижутерии.
2. Было принято решение вести разработку на мощном движке для Интернет-магазинов Magento вер. 1.9.2.1.
ТЗ
Хедер (шапка сайта)
1. Хедер содержит в себе основные информационные данные о магазине:
- логотип
- контактные данные
- ссылки на текстовые страницы
- поле для поиска
- ссылку на личный кабинет
- корзину товаров
- возможность заказать обратный звонок
2. Главное меню сайта, содержит корневые категории товара, до трех уровней вложенности.
3. Форма поиска с авто-подсказкой. При подстановке результатов выводится мини-изображение, название и цена товара.
Главная страница
1. Слайдер промобаннеров
2. Карусель с акционными товарами.
Акционные – продукты у которых будет выставлена специальная цена, то есть скидка на какой-то промежуток времени
3. Модуль “Скоро в продаже”
4. Блок с новинками товаров.
Новинки – товары у которых в админ-панели будет проставлено, что они новые в определенном диапазоне дат
5. Блок с возможностью прописать ссылки на популярные категории товаров
Футер
Администрируемый футер (нижняя зона сайта). С возможностью указывать контактные данные, статические страницы, категории, ссылки на социальные сети.
Футер разделен на 5 областей:
1. Логотип
2. Контактные номера, заказ обратного звонка
3. Список выбранных категорий для отображения в футере
4. Ссылки на статические страницы, ссылки на соц сети
5. Внизу расположен копирайт
Страница категории
1. Вверху страницы категории находится h1 заголовок выбранной категории, хлебные крошки и сортировка.
Рядом с выпадающими типами сортировок будет добавлена стрелка показывающая направление сортировки (от большего к меньшему и наоборот)
Поддерживаемые типы сортировки:
- По названию
- По цене
2. Фильтрация. Динамически формируемые опции для фильтрации
в каталоге, на основе добавленных к товару атрибутов
3. Возможность прописать сео текст для категории.
4. Постраничная навигация товаров.
5. Вид товаров плиткой
Страница товара
1. Вверху страницы расположены хлебные крошки, демонстрирующие реальный путь достижения страницы товара.
Заголовок товара и его артикул.
2. Медиа блок с основной фотографией и миниатюрами, когда миниатюр становится много, они образуют собой карусель, с возможностью прокрутки в обе стороны.
3. Если товара нет в наличии,то должна быть возможность добавить его в список желаний. Так же нужна функция
“оповестить о поступлении товара, что не в наличии”.
4. Отзывы с возможностью выставить оценку товару.
5. Под ценой расположено краткое описание товара и преимущества магазина.
6. Ниже блока с преимуществами находится переключатель между описанием, характеристиками, отзывами.
7. Похожие товары.
Оформление заказа
1. Возможность зарегистрироваться при оформлении заказа
2. Оформление заказа на одной странице.
3. Возможность вписать промо-коды для получения скидки.
4. Способы доставки:
- Самовывоз
- Новая почта
- Информационные методы доставки популярных компаний Украины
5. Способы оплаты:
- Наличными при получении
- LiqPay
- Privat24
6. Возможность добавить комментарий к заказу.
7. Страница “Спасибо за заказ”
- номер заказа
- способ доставки
- метод оплаты
- адрес доставки
- комментарий (если есть)
- информация о продуктах, идентичная тем что в оформлении заказа, только без возможности что либо менять.
Общая функциональность
1. Сравнение товаров. Когда определенное количество товаров находится в сравнении, при клике на «сравнить» открывается popup со сравнительной таблицей характеристик.
2. Страница контактов. Содержит форму обратной связи и карту.
3. Личный кабинет покупателя. Вход осуществляется с отдельной страницы входа/регистрации.
4. Форма подписки на новостную рассылку.
5. Адаптация и настройка имейл уведомлений о приходе товара.
6. Sms уведомления о совершенном заказе.
7. Сделать две группы пользователей – администраторы и продавцы.
Доработать функционал для группы продавцов: В заказе сделать возможность выбрать какому пользователю принадлежит заказ.
Доработать возможность вывода количества совершенных сделок продавца за определенный период времени
8. Поддерживаемые браузеры:
Chrome38+, FF32+, Opera 20+, IE10+, Safari 8+
Далее по ТЗ отрисовывался и согласовывался дизайн с заказчиком
Выдержка из PSD формата
Карточка продукта
Карточка уже готового продукта на тестовом сайте ( это видно внизу по строке администрирования. Как видите дизайн был аккуратно «допилен» и внедрен в действующий сайт.
В завершение, покажу еще пару вкусностей, а именно очень удобную админку, со множеством настроек.
Скриншот страницы административной части с тестовыми товарами
Управление категориями
Управление выбранным товаром со множеством настроек и опций
P.S.
Если Вы хотите подобный мощный, красивый и современный магазин – обращайтесь в студию “Lesnikoff”!