Структура сайта

Структура сайта

Главная

Как купить

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

Гарантии

Установочный центр

О магазине

Отзывы (о магазине)

Новости

Политика конфиденциальности

Статьи

Контакты

Википедия автозвука (2 этап)

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

Раздел 1

Товары

Раздел 2

…

Интернет-магазин

Рекомендовано «АвтоЗвуком»

Игра (2 этап)

Конструктор аудиосистемы (2 этап)

Подбор по авто

Консультация

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

Верстка резиновая: мин 1000рх, тянется до 1600рх.

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

Главное меню (малиновая строка) при изменении размера окна браузера тянутся пропорционально.

Баннер содержит 5-6 слайдов. Количество точек-переключателей выводится автоматически. Перелистывание происходит автоматически через 5 сек. Или по клику пользователя на точки-переключатели. Если курсор наведен на область баннера, то автоматическое переключение не срабатывает.

Баннер тянется до 1200рх. При размерах окна свыше 1200рх он сужается до 1000рх, а справа появляется 2 других мини-баннера в 200рх шириной. Если тянуть окно дальше, то и большой баннер, и маленькие увеличиваются пропорционально до 1200 рх и 400рх.

Блоки «О компании-Новости», подвал, плашку тянем пропорционально. Подвал тоже.

Нижняя плашка (онлайн-консультант, недавно просмотренное, избранное) всегда на экране, прибита к нижней границе браузера. По клику на онлайн-консультант вверх всплывает окошко начала чата. По клику на другие пункты, плашка приподнимается от нижней границы браузера и под ней выводится лента товаров просмотренных/избранных. Чем шире открыто окно браузера, тем больше выводится товаров без изменения расстояния между ними.

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

Представлены все существующие на сайте товары, разнесенные по разделам. Для каждого раздела выводится по 4-5 товаров с наибольшим индексом сортировки (если разрешение менее 1200рх — 4 товара, если больше — 5 товаров; расстояние между товарами резиним), а также количество товаров в данном разделе.

У товаров могут быть маркеры (как на странице раздела). Маркер располагается в левом верхнем углу блока товара. Если маркеров 2, то второй размещаем под первым у левой границы блока товара.

На странице раздела каталога выводим сначала 15 товаров с наибольшим индексом сортировки. При прокрутке страницы подзагружаем еще 15. И так далее. НО! Все товары должны сразу присутствовать в исходном коде страницы, чтобы они могли без проблем индексироваться поисковиками.

Выводим по 3 товара в ряд, если разрешение менее 1200рх, если больше — по 4. Расстояние между товарами резиним.

У товаров могут быть маркеры. Маркер располагается в левом верхнем углу блока товара. Если маркеров 2, то второй размещаем под первым у левой границы блока товара.

Возможна сортировка по цене и алфавиту (по полю «Название»). Сортировка происходит без перезагрузки страницы, URL не меняется.

В разделе есть фильтр. Всегда присутствует его сокращенный вариант, в котором есть выбор по:
- цене (от и до, значения задаются либо в полях ввода, либо путем перетаскивания ползунков);
- бренду (возможно отметить сразу несколько брендов).

Расширенный фильтр открывается в отдельном слое и содержит перечень тех характеристик, которые были предварительно отмечены в админке как параметры для поиска в разделе. Набор характеристик для фильтра в каждом разделе будет свой. Для каждого свойства — свой горизонтальный блок во всю ширину окна. По клику на название свойства открываются/закрываются его возможные значения.

Будут свойства, например, USB-выход, которые либо присущи товару, либо нет (USB-выход или есть или его нет). Тогда мы ставим чек-бокс рядом с названием свойства, а само название ссылкой не делаем.

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

Строка с закладками (Обзор, Описание, Характеристики, Мнение «АвтоЗвука», Отзывы), ссылками «В избранное» и «К сравнению», иконками соц. сетей всегда находится в экране, прикрепленная к верхней границе браузера.

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

Ссылка «В избранное» изменяет цвет, если она нажата один раз. Повторное нажатие приводит к обратному изменению цвета с исключением товара из списка избранного.

Ссылка «К сравнению» изменяет цвет, если она нажата один раз. Повторное нажатие приводит к открыванию отдельного окна сравнения товаров (свойства товаров разбиты по группам, есть возможность удаления товара из сравнения).

Иконки соц. сетей — это «Like» товара в соответствующей соц. сети.

У товара есть одно основное изображение (используется в качестве превьюшки в разделах каталога и т. п.) и до 8 дополнительных. Если дополнительных фото больше 4 штук, то появляются стрелки для навигации вперед-назад, которые прокручивают этот ряд дополнительных фоток. Клик по доп. фотке открывает ее на месте основного изображения. Клик по основному изображению открывает окно просмотра фото в новом слое.

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

Свойства товаров

Набор свойств для каждого раздела товаров индивидуальный. Свойства объединяются в группы, которые также для разных разделов разные. Список групп свойств для разделов готовы составить, но нужна будет возможность их изменять.

Поля по товару:

Название

Изображения

Метки: может вообще не быть; может быть одна — из группы 1 или 2; быть две — из группы 1 и одна из группы 2.

1 - SF рекомендует

2 - АвтоЗвук рекомендует, АвтоЗвук Лидер, АвтоЗвук фаворит

Цена

Размер скидки

Рейтинг из монеток (от 1 до 5, каждому значению соответствует свой текст всплывающей подсказки)

Описание + файл для скачивания

Мнение АвтоЗвука

Комплектация

Установочный центр

1-5 доп ссылок на статьи (особенности выбора, варианты установки, ...)

Перечень свойств по группам

Отзывы по товару

? Возможно, что-то упустила

Рекомендовано «АвтоЗвуком»

Это тот же самый каталог, но выводим в нем только те товары, у которых есть метка АвтоЗвук рекомендует, АвтоЗвук Лидер, АвтоЗвук фаворит.

Интернет-магазин

При добавлении товара в корзину (нажата кнопка «добавить в корзину» на карточке товара), происходит обновление количества заказанного товара в блоке корзины в шапке сайта без перезагрузки страницы.

Страница корзины

Обе колонки страницы тянутся пропорционально. В сером блоке справа оставляем только крупный текст «Ваша скидка на установку»; 3000р – в малиновом кружке (вместо «2»). Ссылки на разделы убираем.

В правую колонку переносим также блок с чек-боксом про согласие с условиями предложения (я знаю волшебное слово – не делаем). Чек-бокс заменяем на радиобатн и дополняем вторую возможность: «Установка компонентов не требуется, я просто покупаю компоненты». По умолчанию отмечен первый вариант.

Количество товаров в заказе должно регулироваться как вводом цифры с клавиатуры, так и путем нажатия на стрелки. Если количество равно единице, то стрелка на уменьшение не работает.

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

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

Обе колонки тянутся пропорционально.

После полей телефон, мейл, ФИО добавляем строку «Все поля обязательны для заполнения» (мелким шрифтом, как про доставку).

Телефон: проверка, что введены цифры и не менее 3 в первом поле и 7 цифр во втором (допускаются тире и пробелы, в базу сохраняем только цифры).

Текст ошибки заполнения «Некорректно указан номер» или «Поле не может быть пустым»

Е-мейл: проверяем по стандартной маске для емейлов.

Текст ошибки заполнения «Некорректно указан адрес» или «Поле не может быть пустым»

ФИО: не менее 3 букв.

Текст ошибки заполнения «Некорректно указано имя» или «Поле не может быть пустым»

Способ доставки

По умолчанию выбрано «Заберу сам». Карта открывается во всплывающем окне.

«Привезите с курьером» - рядом текст «Стоимость доставки по Москве 300 руб. (новая строка:) Для заказов стоимостью отруб доставка по Москве осуществляется бесплатно.» Крайне желательно, чтобы эти тексты и суммы можно было настраивать в админке.

При выборе опции «привезите с курьером» в правой колонке, над ИТОГО, появляется блок как с товаром, в нем пишем «Доставка по Москве 300 руб/ бесплатно» (определяем автоматически исходя из стоимости заказа) и пересчитываем ИТОГО.

Способ оплаты – пока только наличными при получении (по умолчанию) или картой при получении. Оплату с сайта верстаем, но выведем для показа чуть позже.

Галочка «Я ознакомился с публичной офертой» стоит по умолчанию. Ссылка открывает текст во всплывающем окошке.

Если галочку сняли, выводим текст ошибки «Ознакомьтесь с правилами магазина»

После отправки заказа в шаблоне страницы оформления заказа выводим сообщение: «Благодарим Вас за заказ в магазине SoundFound!

В ближайшее время мы свяжемся с Вами, чтобы согласовать удобное время доставки заказа (либо Вашего визита к нам).»

Доставки или визита – выводится в зависимости от того, что было выбрано «заберу сам» или «привезите с курьером».

На мейл клиента уходит сообщение. В шаблоне письма телефон и время работы должны быть редактируемыми, желательно, если эти данные будут браться из того же места, что и для шапки самого сайта. После графика работы добавить ссылку «как проехать», ведет на страницу контактов на сайте.

Содержание письма:

·  Перечень заказа,

·  Доставка по Москве 300 руб/бесплатно (если выбрано с доставкой),

·  ИТОГО,

·  Текст про «Вы можете воспользоваться скидкой…. По телефону …. (тут телефон тоже редактируется, также как в шаблоне письма)»

·  Благодарим за Ваш выбор!

На мейл менеджера (группа пользователей менеджеры) также приходит сообщение:

·  Телефон, мейл, имя клиента

·  Самовывоз или Доставка с курьером 300 руб /бесплатно

·  Оплата наличными / картой

·  Перечень заказа, Итого (табличка, как в письме для клиента)

·  Скидка на установку столько-то либо Без установки

Все данные о заказе также хранятся в базе Битрикса. Забегая вперед: будем делать интерфейс менеджера, нужна будет возможность поиска заказов среди уже сделанных по номеру телефона или только по 4 последним цифрам номера.

Сервисы

1.  Отзывы о магазине

Будем брать с Я. Маркет, например, при помощи http://*****/solutions/yenisite. ymrs/.

2.  Отзывы о товарах

Отзывы о товарах берем с Я. Маркет http://*****/solutions/yenisite. review/ и выводим на странице конкретного товара.

3.  Поиск по сайту (вопрос: по сайту или каталогу?)

Поиск осуществляется по всем разделам сайта. Когда пользователь вводит 3 и более символов в строку поиска появляется всплывающее окно с вариантами результатов поиска. Результаты разбиты по разделам, указано название страницы с выделением болдом поискового запроса, если он присутствует в заголовке. Товары выводятся с ценой, а для двух первых товаров – картинки-превьюшки.

4.  Онлайн-консультант

Подключаем http://www. *****/. В макетах дизайнер показал цвет, который нужно использовать для настройки.

5.  Обратный звонок

Заполняются 2 поля: телефон (с маской для верного ввода) и имя. Данные формы уходят на емейл пользователя группы Менеджеры.

6.  Купить в 1 клик

Заполняются 2 поля: телефон (с маской для верного ввода) и имя. Данные формы уходят на емейл пользователя группы Менеджеры.

7.  Недавно просмотренные

Лента формируется из просмотренных пользователем товаров за текущую сессию. Принцип сортировки: самый последний из просмотренных товаров отображается первым. Если товаров больше, чем помещается на экране, появляются стрелки для прокрутки ленты. Если просмотренных товаров не было, выводим текст « (крупнее) Вы еще не видели наших предложений. (мельче) Заходите (ссылка в каталог) и выбирайте!»

8.  Избранное

Лента формируется из отмеченных пользователем товаров. Если пользователь не авторизован, то товары хранятся за текущую сессию. Если авторизован, то пока сам не удалит.

Принцип сортировки: самый последний из отмеченных товаров отображается первым. Если товаров больше, чем помещается на экране, появляются стрелки для прокрутки ленты. Если избранных товаров не было, выводим текст «(крупнее) У Вас еще нет избранных товаров. (мельче) Авторизуйтесь (ссылка на окошко регистрации), чтобы просмотреть ранее избранные товары»

9.  Подбор по авто

Раздел открывается по клику в пункт меню (на малиновом фоне) в шапке. Размещается в шаблоне типовой внутренней (с меню в левой колонке), тянем ее аналогично типовой внутренней странице. В основной части страницы: 3 элемента для выбора решения по марке авто, модели, году. Они располагаются последовательно, являются взаимозависимыми: выбор марки, влияет на перечень возможных значений в поле «модель». Если для какой-то марки-модели-года нет статьи, то такие значения не выводятся среди вариантов для выбора.

Под элементами выбора идет набор статей об уже реализованных решениях на тех или иных авто. Если выбора не производилось, то идут все статьи в порядке убывания актуальности по 10 шт на страницу.

Поля статей:

Название

Картинка анонса

Анонс

Описание

Компоненты и работы

Стоимость

Фото (неограниченное количество)

Свойства: Марка авто, Модель авто, Год

На странице детального описания решения выводим Заголовок, Текст описания, Стоимость решения, Компоненты и работы, Фото решения (лента из превью фоток с прокруткой влево-вправо, по клику открывается окно просмотра фото в новом. В конце — «Другие решения для Вашего автомобиля» с набором ссылок на статьи с такими же значениями свойств Марка-модель-год.

10.  Консультация

Это вебформы, с несколькими шагами заполнения, на каждом последующем шаге варианты вопросов и ответов зависят от выборов на предыдущих. Нужна возожность эти формы создавать и модифицировать.

11.  Письма с сайта

Все письма в едином шаблоне, как сообщение о заказе на сайте.

12.  Пользователи на сайте

Предполагается 3 группы пользователей:
- Администратор – суперадмин;
- группа Менеджеры – сначала будет 1 пользователь, затем увеличится до трех. Эти пользователи будут получать сообщения о заказах товаров, обратных звонках, консультациях;

- незарегистрированные пользователи.