Создание сайта на OpenCart

Здравствуйте! Вот основное ТЗ

https://drive.google.com/drive/folders/1YAWht8XyDRNDkPXu0yQIO6qDILyrUcPp - Тут макеты

Первым делом нужна верстка, потом уже натяжка на опенкарт

1. Границы проекта 

Основные функции, которые должны быть реализованы: 

• Реализация каталога товаров с возможностью фильтрации, удобной навигации;

• В каталоге товаров для каждой группы товаров в должен работать индивидуальный фильтр. Параметры фильтрации будут согласованы для каждой группы отдельно;

• Представление товаров с их характеристиками — полная информация о товаре на детальной странице, с возможностью купить;

• Реализация процесса заказа — выбор места доставки, вида доставки, оплаты;

• Реализация личного кабинета с возможностью сохранения выбранных автомобилей.

2. Структура сайта и функционал

2.1. Общий функционал 

• Сайт должен быть разработан на CMS Opencart

• При регистрации нового пользователя необходимо подтверждать создания аккаунта при помощи смс. Модуль будет предоставлен заказчиком.

• При оформлении заказа с доставкой “новой почтой” должен использоваться актуальный api “новой пошты” или аналогичный модуль выбора города, отделения и т.д.

• В личном кабинете должна присутствовать возможность отследить текущий заказ при оформлении заказа с доставкой “новой почтой” при помощи api “новой пошты” или аналогичный модуль

• Формы авторизации/регистрации/восстановления пароля. Все всплывающие формы ввода выполняются в едином стиле, для восстановления пароля используется EMAIL или PHONE пользователя.

• При выборе автомобиля пользователем сайт запоминает его выбор до момента пока сам пользователь не выберет другой автомобиль или не отменит выбор совсем. В соответствии с этим пользователь видит только те товары которые подходят выбранному автомобилю. При условии что пользователь добавил автомобиль(автомобили) в гараж используется последний выбранный автомобиль. Аналог www.carid.com 

• На данном этапе будет одна языковая версия сайта. Но важно предусмотреть добавление второй версии в будущем

• Добавление товаров, атрибутов товаров, автопроизводителей и автомобилей производится вручную в админке. 

• Заказать в 1 клик» — функция доступна для формирования заказа без ввода данных требуемых при оформлении через полную процедуру. Требуется ввести только телефон, в системе создается виртуальный пользователь, текущий товар или содержимое корзины (зависит от места размещения функции) помещается в заказ. Если пользователь авторизован, телефон не запрашивается, сразу происходит оформление заказа и переход на Шаг№3 оформления, заказ сопоставляется с текущим пользователем.

2.2. Главная страница 

• Переключение языков осуществляется методом переброса пользователя на главную страницу сайта с выбранным языком.

• Вход в раздел пользователя (всплывающая форма авторизации). Если пользователь авторизован, вместо надписи «авторизация» отображается его ФИО

• Гараж. Возможность добавления автомобиля (автомобилей в личном кабинете) если пользователь авторизован. Если нет то сначала предлагается пройти процедуру авторизации/регистрации

• Верхнее меню — содержит ссылки (главная, о нас, каталог, доставка и оплата, блог, контакты). Меню может быть изменено используя стандартные системные механизмы.

• Логотип компании. На всех страницах, кроме главной, при клике выполняет переход на главную страницу текущего языка.

• Система поиска — в поле ввода можно ввести полное или частичное название товара, после ввода 4-ого более символов, система начинает предлагать в виде dropbox товары по совпадению подстрок текущего ввода. Из предлагаемого списка может осуществляться переход на карточку товара. Возможен вариант поиска, при котором в поле ввода печатается название товара + Enter, после чего на отдельной странице система выдает список товаров соответствующих условию, используется постраничное представление. 

• Центр помощи - вид формы обратной связи.

• Верхний баннер, вся область баннера не показывается.

• Выбор автомобиля. По принципу сайта www.carid.com марки авто и автомобили добавляются вручную в админке

• Область каталога по товарам. Переходы по разделам каталога. В админке есть возможность выставить разделы в любом порядке.

• Область бренды выполнена в виде карусели. Добавление в админке логотипов брендов. При клике переход в соответствующий раздел.

• Область видео. В админке есть возможность разместить код видео youtube Одна область больше, две другие поменьше.

• Область блог. Выводится последние 9 записей в виде карусели. При клике переход на конкретную запись, при клике на кнопку - переход в раздел блог

• Область о нас. Добавление из админки текста. При клике переход в раздел о нас.

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

2.3 Каталог товаров

• Область каталога по товарам. Переходы по разделам каталога. В админке есть возможность выставить разделы в любом порядке.

• Область СЕО текст. Возможность редактирование текста из админки.

• При переходе в подраздел каталога товаров пользователь видит товары расположенные сеткой по 3. Ниже переход далее по страницам

2.4 Карточка товара

• Область предпросмотра фото. По умолчанию пользователь видит 4-5 картинок товара. Для того чтобы увидеть все картинки пользователю необходимо кликнуть “еще”. В этом случае открывается галерея, где может быть в том числе 100 картинок товара. Для этого нужно предусмотреть иерархию папок. Для того чтобы можно было выбрать для просмотра именно те картинки которые включены в конкретную папку.  

• Область Инфо о товаре. Наименование, описание, рейтинг, артикул, производитель, возможность добавить в избранное, поделиться, а также задать вопрос.

• Цена от - до. Зависит от параметров продукта, выбранных пользователем.

• Область Параметры продукта. Выводит параметры, которые добавлены каждому товару в админке, на основании их атрибутов. Образец как тут (кнопка product options)  https://www.carid.com/konig-wheels/dial-in-gloss-black-17194723.html 

• При попытке отправить товар в корзину пользователя возвращает к выбору параметров пока он не сделает выбор. При нажатии на кнопку в корзину - всплывающее окно с деталями покупки и кнопками купить в 1 клик и оформить заказ

• Область описание. Текст расширенного описания о товаре.

• Область отзывы. Добавлять отзыв могут только зарегистрированные пользователи.

2.5 О нас

• Область с текстом, картинками видео. Редактировать можно в админке

• Область баннер с переходом 

• Область СЕО текста с ховером

2.6. Доставка и оплата

• Область с текстом, картинками видео. Редактировать можно в админке

2.7. Блог

• Область с записями блога. Сверху последние добавленые. На одном экране  4 записи. ниже переход далее по страницам

• В конкретной записи есть возможность добавления/редактирования в админке. Внизу переход между соседними записями.

2.8 Бренды

• Область с текстом, картинками. Редактировать можно в админке

2.9.Контакты

• Область с текстом, картинками видео. Редактировать можно в админке

• Существует возможность связи в скайп, вайбер, вотсэп (при условии что у пользователя установлено данное приложение)

• Форма обратной связи с защитой от спама

• Гугл карты с актуальным адресом

2.10 Оформление заказа

• Область деталей заказа с возможностью изменить количество товаров, убрать товары или продолжить покупки

• Область информация о заказе. Пользователь не сможет оформить заказ не заполнив обязательные поля. При выборе быстрого заказа детали уточняет оператор. 

• Область способ отправки. При выборе отправка новой поштой открывается модуль нп с возможностью выбора пункта доставки. При выборе другое открывается окно для комментариев с возможностью указать перевозчика.

• Область способы оплаты. При выборе пункта картой при оформлении заказа пользователя переводит в систему liqpay

• Область создать учетную запись/подписка на новости. По умолчанию галочки стоят. Соответственно при подтверждении данных операций на основании данных указанных пользователем создается его учетная запись

• При завершения заказа или отсутствие товара в корзине показывается соответствующее сообщение. 

2.11 Регистрация/авторизация

• Пользователь должен указать свою телефон, фио, а также mail. После получить смс с кодом подтверждения на телефон чтобы закончить регистрацию

• При авторизации пользователю нужно ввести свой телефон/mail и пароль

2.12 Мой аккаунт

• Область история заказов. Вкладка на которой указаны все заказы (последние сверху) Также тут реализована возможность проверить статус посылки, при условии заказа доставки новой поштой 

• Область адресная книга. Указываются сохраненные адреса

• Настройки аккаунта. Возможность сменить пароль пользователя.

• Список пожеланий. Выводятся товары помеченные как избранные.

• Мои автомобили. Указываются автомобили добавленные в гараж. Также есть возможность удалить и добавить автомобиль

3 Скидки

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

Скидка в системе задается параметрами: 

• Дата начала и окончания действия

• Тип скидки: в процентах, фиксированная сумма.

• Величина скидки. В зависимости от выбранного типа скидки, величина скидки указывается в процентах от стоимости товара или в виде фиксированной суммы/цены.

• Максимальная сумма скидки — максимально возможный размер скидки. Чаще всего значение данного поля задается для типа скидки "в процентах". Максимальная сумма скидки указывается в основной валюте скидки, выбранной в предыдущем поле.

Группы пользователей, которые могут воспользоваться скидкой 

Цепочка навигации (хлебные крошки)

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

Пояснение к мобильной версии

1.       Главная страница

·  Меню – выполнено всплывающим окном (пример https://www.carid.com/ ): “Каталог по товарам”, “Центр помощи”, “Мой аккаунт”, “Гараж” – раздвижная панель. 

·  Footer – ”Информация” “Ваш аккаунт” “Контакты” - раздвижная панель.

2.       Карточка товара

- Блок “Описание” “Отзывы” – раздвижная панель.

Макеты (psd), разрешение:

- desktop 1366px

- tablet 768px

- mobile 380px