Категория и списки товаров
Список товаров можно получить множеством способов: при просмотре категории, при поиске, при просмотре страницы бренда и т.п. Посмотрим на примере категории http://super.digistr.ru/catalog/sale.
Для самого списка у нас есть стандартная панель с делением на страницы, изменением количества отображаемых товаров на странице, сортировки и изменение вида товаров.
В некоторых магазинах есть третий вид отображения товаров: мелким списком.
Обычно это нужно для оптовых покупателей, которые по списку выбирают много товаров. На разработку это не влияет, все делается версткой, поэтому мы оставим два вида стандартных: плиткой и детальным списком.
Максимальное описание у товаров при просмотре списком.
Здесь указаны значки акций, рейтинг товара по отзывам, старая и текущая цена. Описание может быть указано двумя способами: текстом или формироваться из динамических свойств. Администратор сайта указывает, какие свойства должны попадать в краткое описание.
Три иконки под кнопкой в корзину – это, соответственно добавление в избранное, добавление в сравнение и быстрый просмотр упрощенной версии карточки товара.
Пока здесь не хватает двух опций, которые будут реализованы в следующих итерациях: специальная цена, с учетом программы лояльности; проверка наличия по складу и отображение возможных дат доставки, в зависимости от точки выдачи заказа. Про скидки – это будет в разделе о личном кабинете и заказах, а про доставку – в интеграциях и сервисах.
В категориях отображается фильтр. Из его особенностей: определение минимальной и максимальной цены, в зависимости от цен товаров категории; блокировка свойств, у которых нет товаров для заданной комбинации свойств; отображение количества товаров, которое будет найдено.
Администратор может настраивать фильтр, указывая как отображать свойство (диапазоном, списком, флажками или цветом) и какие свойства из всех имеющихся должны попадать в фильтр.
Если в категории есть товары с тегами, то они будут отображаться на странице этой категории. Подробнее об этом будет в разделе про SEO для магазинов.
В каждой категории может быть свое слайд-шоу. Под ним отображается список подкатегорий, если он есть.
Поиск
Поиск показывает варианты при наборе текста следующим образом. При наличии нескольких категорий, названия которых подходят для ответа на запрос, они отображаются слева. Справа отображаются популярные товары этих категорий.
Если категория только одна и у нее есть бренды, то они отображаются вместе с категорией.
При клике на название бренда мы попадем в категорию с фильтром по этому бренду.
Если категории не нашлись, то поиск покажет только товары.
При нажатии на Enter или на кнопку поиска мы попадем на все результаты поиска.
Другие дополнительные возможности поиска мы рассмотрим в разделе SEO.
Карточка товара
Аналогично списку товаров, карточка товара будет дополняться по мере внедрения дополнительных сервисов и при описании интеграций.
Наиболее полная карточка товара http://super.digistr.ru/catalog/sale/dlya-devushek/zhenskaya-odezhda/shikarnyj-buket-cvetov.
Здесь в магазине фотогалерея товаров, свойства товара и возможность его заказать. Для быстрой покупки предусмотрена опция «Купить в 1 клик». Если у товара указан статус, который нельзя заказать, тогда отображается ссылка на предзаказ.
Администратор получает о нем уведомление и видит общую страницу со всеми предзаказами товаров в панели управления.
При изменении варианта цвета (могут быть любые свойства у товара), есть возможность указать фотографию для данного цвета. Стандартно белая, для красного – красная.
У каждого товара может быть акционное предложение. Пока это только информация, об акциях будет в разделе «Заказы, личный кабинет».
У каждого товара есть сопутствующие товары. Они же могут быть аксессуарами и т.п. Название значения не имеет, это просто заданные администратором связки товаров.
Аналогично указываются похожие товары.
Кроме этого, товары можно составить в комплекты.
Любой текст, графику или видео можно добавить в подробное описание товара.
Характеристики – это подробный список свойств этого товара.
А отзывы формируют рейтинг товара.
Дополнительные списки
В этой версии подключены списки сравнения, избранного и истории просмотров. Товары отображаются аналогично категориям.
Товары сравниваются по всем доступным для них свойствам. Администратор может указать для каждого значения свойства его «вес» в сравнении. Так, например, для «Еще дробное число» указано, что чем меньше значение свойства, тем лучше. Например, чем тоньше телефон, тем лучше он должен быть в сравнении.
Дополнительно созданному ранее таймеру есть страница со всеми акционными предложениями.
Итого, в следующих сериях, демо
В крупных магазинах мы нашли следующие возможности, которые будут реализованы в соответствующих блоках.
Заказы, личный кабинет
- Специальные цены и клубные карты
- Различные скидки, акции и подарки
- Дополнительные услуги
Сервисы, виджеты и интеграции
- Проверка состояния склада и даты доставки, в зависимости от точки выдачи заказа
- Фильтр по наличию, с учетом склада и пункта выдачи заказа
- Покупка в кредит
Различные инструкции, обзоры, статьи о товарах и т.п. будут в информационных разделах, а некоторые специальные возможности каталога – в разделе SEO.
Итого, 30% готово и мы продолжаем. В следующей серии у нас оформление заказа и личный кабинет. Что-то новое добавится в существующие страницы и об этом мы тоже расскажем.
Как обещали в прошлый раз, демо доступ:
Панель управления: super.digistr.ru/admin/login
Логин: digistr
Пароль: digistr
Включен режим readonly :) Можно пройтись по разделам и посмотреть, что и как заполняется.
Спасибо, что вы с нами и успешных вам продаж!
Ваш Дигистр.
Комментарии (5)
PoriPori
01.07.2015 10:53Планируете ли добавлять состав и требования по уходу?
А обычно про российскую валюту пишут Рубль, не Рубли? Можно вообще заменить на обозначения все валюты.
Не слишком много корзин (и в шапке, и иконкой)?ewgenij Автор
01.07.2015 10:57По пожеланиям можем конечно, что стоит добавить как Вы думаете? Рубли поправим.
Корзины да — с запасом :) Разделы будут еще меняться по мере разработки, в меню их не будет, конечно.
Спасибо за комментарий!PoriPori
09.07.2015 10:23Добавить состав по пожеланиям?) Да я даже не знаю, кто берет вещь не глянув в состав =) Это маст хэв.
Я не фанат интернет-магазинов в принципе (вы же изучали сайты популярных интернет-магазинов?), но даже я знаю о таких, как тот же asos, может, он вам подкинет идеи.
Кстати, в поисках сетки размеров, не было обнаружено размера самой вещи (или выбора размера). Не туда смотрю?
Ну и сетка размеров! Куда ж без нее?
agnislav
Спасибо за очередную подборку полезной информации. Разрешите опять позанудствовать и поделиться впечатлениями.
Что понравилось:
1. Более-менее минималистичность. Нет перегруженности информацией. Сохраните это.
2. Достаточно стандартный UX. Гуд.
3. нет ошибок в консоли. Приятно )
На этом, из хорошего, пожалуй всё…
Что не понравилось:
1. Баги. Если уж рекламируете себя — очевидных ошибок быть не должно. Из того, что бросается в глаза:
— нельзя выбрать город при размере экрана больше 768px
— нерабочие подсказки для поиска. Оно достаточно красиво и интересно выглядит — сразу захотелось потестировать. Увы.
— нажал на корзину. перешёл на страницу, на которой нет списка товаров в корзине. опять-таки — понимаю, что ещё не сделано, но для демонстрации — так нельзя.
— много просто мелочей.
2. Каталог. Я его искал долго. Секунд 10. Я пришёл на сайт купить товар или прицениться. Мне в первую очередь нужно видеть, что здесь есть, а не меню «Главная» — … — «Корзина». По хорошему, этого меню здесь вообще быть не должно. Самые главные пункты типа доставки и оплаты могут быть прилеплены к самому верху страницы, остальное — в футере. Ссылки «Главная», «Корзина», «Акции» — вообще не имеют право на существование )) Для первой есть лого, для второй есть область справа от поиска, акции должны идти как категория в каталоге. Отзывы — в топку. Только реальные отзывы на сторонних сервисах, а лучше вконтакте, фейсбуке и яндекс.маркете. Вакансии — в футер. Фотогалерея — в данной области сайта актуальная только для… блин, даже не знаю, для чего.
Уфф… Что-то Остапа занесло…
3. Идентификаторы в УРЛе. pcnt = пациент.
4. Анимация. Её слишком много. Отвлекает и раздражает.
5. Реклама себя на демо-сайте. УБЕРИТЕ! Человек и так уже пришёл посмотреть на ваш демо-сайт. Сделайте ссылочку вверху страницы или в футере. Где угодно. Но не в контенте.
Если я уже к вам пришёл, я о вас уже знаю. Я уже рассматриваю вас как возможного поставщика услуг. И видеть вашу рекламу вместо фильтров на странице результатов поиска или справа от основной информации о продукте я не хочу. Смотрите — как потенциальный клиент я смотрю на экран и представляю мой магазин. И я сравниваю всё, что я вижу на экране с тем, что мне хочется видеть в своём магазине. И блок рекламы — это минус. Может потом, подумав, составив подробный список плюсов и минусов, я его отсею из сознания, но в первый момент — это жирный минус.
Желаю успеха, внимательно слежу за вашим развитием )
ewgenij Автор
Ого, спасибо Вам! Баги поправим пункту к 5-6-ому разработки по плану. Корзина будет в следующем отчете, мы публикуем разделы по мере написания отчетов. 30% магазина — это 30% магазина :)
Замечания учтем, есть правда над чем подумать, особенно так детально все изучив по Вашему комментарию подробнейшему.
Спасибо за такой интерес к проекту :)