Общие сведения
Настоящее техническое задание является приложением к прототипу сайта. В случае расхождения технического задания и дизайна — приоритет имеет дизайн.
Назначение и цели создания сайта
Интернет-магазин мебели.
Общие требования
Верстка сайта
3.1.1. Верстка выполняется под браузеры Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari и Opera для платформ PC и MAC.
3.1.2. Макеты страниц верстаются с учетом минимального разрешения экрана по горизонтали — 1280 пикселей. Актуальная ширина сверстанных макетов по горизонтали соответствует ширине дизайн-макетов.
3.1.3. Выполняется верстка и под мобильные устройства.
3.1.4. Для браузеров, в которых отсутствует адекватная поддержка стандартов CSS3, допускается незначительное отличие от макетов, вызванное неполной поддержкой CSS3 с сохранением функциональности.
3.1.5. Под корректной версткой понимается соответствие страниц сайта согласованным макетам в масштабе 100% с учетом особенностей отображения HTML разметки в операционной системе пользователя, в том числе:
3.1.5.1. отображение и сглаживание шрифтов;
3.1.5.2. масштабирование изображений браузером;
3.1.5.3. пользовательские настройки браузера (шрифты, размеры шрифтов по умолчанию и т.п.).
Базовая SEO-оптимизация и ЧПУ
Обязательные требования
4.1.1. Уникальные классы
На все кликабельные функционально-значимые элементы должен быть прописан уникальный класс, например:
— Кнопка “Отправить” для всех уникальных форм (в корзину, заказ, запрос на обратный звонок, написать письмо, регистрация \ войти, подписка, отзыв и т.п.)
— Ссылка на просмотр\скачивание документов PDF/DOC/ZIP и пр.,
— Тег с номером телефона (используется для коллтреккинга)
|
|
4.1.2. ЧПУ. В проекте предусмотрена реализация человеко-понятных ссылок на основных страницах: разделах, карточках товаров, текстовых страницах. URL страницы формируется с применением символьного кода (записанного транслитом) инфоэлемента или раздела. Допускается передавать параметры в GET-запросах на нестатических страницах (формах, фильтрах и т.д.).[D1]
4.1.3. Мета-информация. title, description, keywords. Для разделов инфоэлементов, формирующих самостоятельные страницы, предусмотрено управление шаблонами мета-тегов (title, description, keywords), а так же тегом alt для основного изображения инфоэлемента (вкладка SEO в инфоэлементах и разделах каталога).
4.1.4. Предусматривается создание robots.txt, разрешающего полную индексацию открытого контента.
Изменение URL при фильтрации
При фильтрации списка товаров URL страницы должно меняться с учетом выбранных параметров фильтрации. При вводе URL должен автоматически применяться соответствующий фильтр.
Рекомендательная часть
Требования, изложенные в этой части, носят чисто рекомендательный характер и должны выполняться по мере возможности (если они не противоречат дизайн-концепции, либо основным техническим требованиям проекта)
4.2.1. Оформление заказа
При наличии нескольких шагов заказа обязательно на каждый шаг нужен свой URL. Завершение регистрации обязательно должно быть с уникальным URL (thank you page).
Пример хода заказа:
site.ru/basket
site.ru/order/step1
site.ru/order/step2
site.ru/order/step3
site.ru/order/thankyou
Оптимизация для публикации в социальных сетях
На сайте предусматривается разметка контента для социальных сетей. Для этого используется протокол Open Graph, что дает возможность управлять внешним видом анонсов страниц, которые пользователи отправляют в социальные сети. Разметка с использованием ogp-тегов должна присутствовать только на страницах, которыми могут делиться посетители, на других страницах эта разметка не нужна.
|
|
Статьи, новости, текстовые страницы
| Тег | Значение |
| <html prefix="og: https://ogp.me/ns# [пространство имён в зависимости от контента]> | Первая строка нужна всегда, а вторую добавляем в зависимости от типа контента страницы: https://ogp.me/ns/video# для видео контента https://ogp.me/ns/article# для статей с тегами |
| <meta property="og:title" content="[Заголовок новости]" /> | Заголовок новости или статьи. Внимание, не тайтл страницы! |
| <meta property="og:type" content="website" /> | Указывает тип контента, “сайт”. Для разделов с видеоконтентом устанавливаем тип “video.other” и прописываем дополнительный свойства для видео. Если у публикаций есть категории и теги, то нужно задать тип “article”. |
| video:writer - Авторы видео. video:duration - Длина в секундах. video:release_date - Дата выхода. video:tag - Теги. | Дополнительные свойства для видео. |
| article:section - Название категории. article:tag - Теги, связанные с этой статьей. | Дополнительные свойства для публикаций с категориями и тегами. |
| <meta property="og:url" content="[ссылка на новость]" /> | Задаём в явном виде ссылку на страницу, по ней будет происходить переход по клику на анонс в социальной сети. Ссылка абсолютная! |
| <meta property="og:image" content="[картинка анонса]" /> | Ставим абсолютную ссылку на картинку для анонса публикации. Иначе будет браться случайная картинка со страницы. Для шаблона текстовых страниц можно задать общую картинку, например логотип сайта. |
| <meta property="og:description" content="[текст анонса]" /> | Текст анонса для новости/статьи, можно использовать текст анонса, который есть у новости, но важно помнить, что есть ограничение на 300 символов. Для шаблона текстовой страницы можно не использовать этот тег, будут использованы первые 300 символов из контента страницы. |
| <meta property="og:site_name" content="[название сайта]" /> | Этот тег можно не использовать, но если прописать в нём название сайта, то под анонсом в социальной сети будет ещё красивая надпись с названием сайта. |
|
|
Страница товара
| Тег | Значение |
| <html prefix="og: https://ogp.me/ns# website: https://ogp.me/ns/website#"> | |
| <meta property="og:title" content="[Название товара]" /> | В этот тег помещаем название товара |
| <meta property="og:url" content="[ссылка на товар]" /> | Задаём в явном виде ссылку на страницу, по ней будет происходить переход по клику на анонс в социальной сети. Ссылка абсолютная! |
| <meta property="og:image" content="[картинка анонса]" /> | Ставим абсолютную ссылку на основное фото товара. Иначе будет браться случайная картинка со страницы. |
| <meta property="og:site_name" content="[название сайта]" /> | Этот тег можно не использовать, но если прописать в нём название сайта, то под анонсом в социальной сети будет ещё красивая надпись с названием сайта. |
Настройка прав доступа
На сайте предусматривается настройка прав доступа для следующих групп пользователей:
● Администраторы.
● Контент-менеджеры.
Пользователи группы «Администраторы» имеют полный доступ к административной части сайта, могут управлять правами доступа.
Пользователи группы «Контент-менеджеры» имеют:
● Права доступа на чтение к папке /admin (для возможности редактирования страниц используя визуальный редактор).
● Права доступа на чтение и запись к папке /upload.
● Права на изменение файлов включаемых областей.
● Доступ к управлению файловой структурой для текстовых разделов, которые подлежат редактированию:
○ Контакты
○ Вопросы-ответы
● Права на создание и изменение элементов следующих ИНФОБЛОКОВ:
○ Товарный каталог
○ Новости
○ Магазин
○ Дилер
Общие блоки и сервисы
Шапка сайта
Шапка сайта выводится на всех страницах. Состоит из следующих элементов:
7.1.1. Дополнительная навигационная панель, содержит ссылки на разделы сайта:
7.1.1.1. Список магазинов.
7.1.1.2. Вопросы-ответы, по клику происходит переход на соответствующую текстовую страницу.
7.1.1.3. О компании.
7.1.1.3.1. История, по клику происходит переход на соответствующую текстовую страницу.
7.1.1.3.2. Награды и сертификаты.
7.1.1.3.3. Контакты.
7.1.1.3.4. Новости.
7.1.1.3.5. Блог.
7.1.1.4. Партнёрам.
7.1.1.5. 3D программа. По клику происходит переход на соответствующую текстовую страницу программа скачивается кликом.
7.1.2. Строка «Мой город [ ссылка:город, выбранный пользователем либо определённый по ip]». По клику на название города выводится список городов, в которых есть магазины дилеров. По клику на название города в списке он выбирается, а список скрывается. Будут использоваться «Местоположения» и определение города по ip.
7.1.3. Ссылка «Ближайшие магазины [счётчик количества магазинов в выбранном городе]». По клику происходит переход на страницу «Список магазинов».
7.1.4. Для неавторизованного пользователя — ссылка «Вход в личный кабинет», по клику на которую открывается всплывающее окно авторизации.
7.1.5. Для авторизованного пользователя:
7.1.5.1. Ссылка на страницу «Личный кабинет».
7.1.5.2. Иконка для выхода из аккаунта, по клику на которую пользователь становится неавторизованным и происходит переход на главную страницу сайта.
7.1.6. Логотип, по клику на который происходит переход на главную страницу. Кликабелен на всех страницах, кроме главной.
7.1.7. Строка со временем работы горячей линии. Включаемая область.
7.1.8. Телефон горячей линии. Включаемая область.
7.1.9. Иконка корзины с указанием количества товаров в корзине, по клику происходит переход на страницу «Корзина». Если товаров в корзине нет, то иконка не активна.
7.1.10. Иконка и ссылка для перехода к списку сравнения со счетчиком количества добавленных товаров. Если товаров для сравнения добавлено не было, то ссылка не активна.
7.1.11. Дополнительное меню. Содержит следующие пункты:
7.1.11.1. Компьютерные столы.
7.1.11.2. Журнальные столы.
7.1.11.3. Столы-книжки.
7.1.11.4. Стулья для сотрудников.
7.1.11.5. Столы руководителя.
7.1.11.6. Шкафы.
7.1.11.7. Стулья и пуфы.
7.1.11.8. Кровати.
7.1.11.9. Диваны
7.1.12. Основное меню. Состоит из следующих элементов:
7.1.12.1. Кухни.
7.1.12.2. Спальни.
7.1.12.3. Гостиные.
7.1.12.4. Прихожие.
7.1.12.5. Детские.
7.1.12.6. Подростковые.
7.1.12.7. Офисная мебель.
При наведении на категорию в меню, выводится выпадающий список вложенных категорий второго уровня. По клику на категорию второго уровня происходит переход в каталог к списку товаров данной категории второго уровня.
7.1.13. Иконка поиска по сайту. По клику выводится текстовое поле поиска по сайту. После ввода символов и по нажатию клавиши Enter, происходит переход на страницу результатов поиска по введенным словам. При совершении пользователем поиска по сайту необходимо добавлять в URL дополнительный параметр, передающий вводимый запрос. Например, параметр q=.
Подвал сайта
Подвал сайта выводится на всех страницах. Состоит из следующих элементов:
7.2.1. Блок «Структура каталога» состоит из следующих элементов:
7.2.1.1. Ссылка «Скрыть», по клику блок переходит в свёрнутое состояние, в котором выводится только ссылка «Развернуть», по клику на которую блок разворачивается.
7.2.1.2. Ссылки на категории каталога. Реализуется с помощью компонента «Меню».
7.2.2. Заголовок «О компании».
7.2.2.1. Ссылка «Награды и сертификаты».
7.2.2.2. Ссылка «Контакты».
7.2.2.3. Ссылка «Новости».
7.2.2.4. Ссылка «Блог».
7.2.3. Заголовок «Партнёрам» и ссылки на страницы раздела:
7.2.3.1. Ссылка «Условия сотрудничества», по клику происходит переход на соответствующую текстовую страницу.
7.2.3.2. Ссылка «Маркетинговая поддержка», по клику происходит переход на соответствующую текстовую страницу.
7.2.3.3. Ссылка «Как стать дилером?».
7.2.4. Заголовок «Покупателям» и ссылки на страницы раздела:
7.2.4.1. Ссылка «Где купить?».
7.2.4.2. Ссылка «Вопросы-ответы», по клику происходит переход на соответствующую текстовую страницу.
7.2.4.3. Ссылка «3D программа», по клику происходит переход на соответствующую текстовую страницу.
7.2.5. Блок «Контакты» содержит:
7.2.5.1. Заголовок «Контакты».
7.2.5.2. Текстовый блок с контактными данными офиса компании, редактируется как включаемая область, содержит следующие данные:
7.2.5.2.1. Адрес центрального офиса.
7.2.5.2.2. Контактные телефоны офиса.
7.2.5.2.3. Контактный телефон службы клиентской поддержки.
7.2.6. Поле для поиска по сайту. После ввода символов и по нажатию клавиши Enter, происходит переход на страницу результатов поиска по введенным словам.
7.2.7. Логотипы платежных систем, карты которых принимаются на сайте для оплаты товаров и услуг (Visa, MasterCard). Иконки платежных систем задаются в ИНФОБЛОКЕ «Настройки».
7.2.8. Копирайт «Мю мебель».
7.2.9. Иконки социальных сетей, по клику происходит переход на страницы проекта в соответствующих социальных сетях. Ссылки на страницы в соц.сетях задаются в ИНФОБЛОКЕ «Настройки». Если ссылка не задана, то иконка соц. сети не выводится.
7.2.10. Копирайт организации разработчика.