Главная страница онлайн-магазина

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

Десктоп

На главной странице отображаются:

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

Шапка (хедер) на десктопе

На десктопе в шапке сайта отображаются:

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

При скролле шапка сохраняет свое положение и всегда отображается в верхней части экрана.

Для смены языка или валюты нужно навести курсор мыши на иконку языка/валюты и выбрать нужный вариант из появившегося списка.

Чтобы воспользоваться строкой поиска, нужно кликнуть на нее, затем ввести как минимум 1 символ поискового запроса, а затем сместить фокус мыши/нажать на Enter/кликнуть на иконку Лупа в левом углу строки.

Поиск регистронезависимый, возможен как по частичному, так и полному совпадению запроса и осуществляется по всем товарам и категориям каталога интернет-магазина.

Если на поисковый запрос не найдено соответствий, то на экране отобразится сообщение "По вашему запросу ничего не найдено", а под ним блок "Возможно вас заинтересует" с подборкой рекомендованных товаров.

Если на поисковый запрос соответствия есть, то на экране отобразится:

текст "По запросу "{текст запроса}" найдено {количество} товаров"
листинг мини-карточек товаров, подходящих под запрос Клиента

Чтобы сбросить результаты поиска, нажмите на крестик в правом углу поисковой строки.

Текущая локация на десктопе

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

Подробнее о настройке регионов в BackOffice можно узнать здесь.

По клику на локацию отображается:

Текущий населенный пункт и дополнительный список локаций
Строка поиска нужного населенного пункта

Для поиска нужной локации:

1. Кликните на строку поиска.

2. Введите как минимум 1 символ названия населенного пункта.

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

3. Выберите нужный вариант из предложенного списка.

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

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

Избранные товары на десктопе

По клику ни иконку избранного:

(если пользователь не авторизован) отобразится окно входа и регистрации
(если пользователь авторизован) отобразится страница со списком избранных товаров клиента

Баннер (карусель из баннеров) на десктопе

На момент написания статьи (24/07/2024) баннер не кликабелен. Будет дополнено.

Узнать подробнее о том, как настраивается отображение баннера, можно здесь.

Футер на десктопе

В футере отображаются ссылки для перехода на страницы с информацией о e-commerce платформе и ее преимуществах и политикой конфиденциальности.

Мобильная версия сайта

На главной странице отображаются:

Подробнее о логике работы каждого компонента страницы можно узнать ниже.

Шапка (хедер) в МВС

При скролле шапка сохраняет свое положение и всегда отображается в верхней части экрана. В шапке отображаются:

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

В боковом меню находятся:

кнопка выбора текущей локации
кнопка выбора языка сайта интернет-магазина
кнопка выбора валюты, в которой отображается стоимость товаров
кнопки "Главная"/"Home", "Каталог"/"Products", "Блог"/"Блог", "О нас"/"About"

Чтобы свернуть боковое меню, тапните на крестик в левом верхнем углу экрана или по любой области за пределами меню.

Текущая локация в МВС

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

Подробнее о настройке регионов в BackOffice смотрите здесь.

По тапу на локацию отображается:

текущий населенный пункт и дополнительный список локаций
строка поиска нужного населенного пункта

Для поиска нужной локации:

1. Тапните на строку поиска.

2. Введите как минимум 1 символ названия населенного пункта.

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

3. Выберите нужный вариант из предложенного списка.

Если результатов, подходящих под поисковый запрос, нет, то отобразится текст "По вашему запросу ничего не найдено".

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

Избранные товары в МВС

По тапу ни иконку избранного:

(если пользователь не авторизован) отобразится окно входа и регистрации
(если пользователь авторизован) отобразится экран со списком избранных товаров клиента