Мерген

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


Главная

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

Путеводитель

Верхний уровень разделения — «Женщинам», «Мужчинам», «Учащимся», «В дорогу» и «Оптовым покупателям». Следующий уровень уточняет вид товара — сумки, кошельки, перчатки и т. д. Иногда требуется ещё один уровень уточнения, он находится под заголовком раздела.

Перезвон

Когда покупатель хочет, чтобы ему перезвонили, ему уже не нужно знать номер Мергена. Вместо номера появляется поле ввода.

В неарбочее время кнопка «Перезвонить» превращается в кнопку «Перезвонить в 9 утра», а на выходных — в кнопку «Перезвонить в понедельник».

Выдача

Без перезагрузки страницы можно отсеить все сумки: бежевые, кожаные, продаваемые со скидкой или участвующие в распродаже. Разбросы цен подобраны самые распространенные. От ползунков я решил отказаться, потому что ими сложно управлять с устройств без мыши, никто не любит вводить цены вручную, а стоимость программирования возрастает. Кроме того, в моём решении, сразу видно, что, например, бежевых сумок за 1000–2000 рублей нет и что нет ни бежевых, ни других сумок дешевле 1000 или дороже 15 000 ⃏.

Товар

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

Сбоку через дробь указаны идентификатор и артикул. Дело в том, что в рознице продавцы пользуются артикулами, которые иногда повторяются. Идентификаторы не повторяются и подходят для движка интернет-магазина, но в чеке печатаются артикулы. Покупатели не хотели бы разбираться в этой путанице, им достаточно было бы одного определителя. Ещё важно, чтобы в чеке было указано то же, что на странице и в письме-подтверждении. А ещё при звонке покупатель должен быстро и однозначно объяснить какой товар сейчас смотрит. Техническое противоречие было решено следующим образом: после надписи «Артикул» следуют оба определителя товара через дробь. Когда пользователь звонит, его просят назвать часть до дробиМенеджеры и продавцы используют тайный способ получения артикула по идентификатору. Надо перейти по ссылке mergenshop.ru/‹идентификатор› и движок перебросит на страницу соответствующего товара, но часть после дроби указывается в письме о совершённом заказе и чеке.

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

Заказ

После нажатия кнопкаБелый шум наложен отдельным слоем на кнопку. Это даёт возможность задавать ей цвет без подгрузки дополнительных изображений. Приём уменьшает вес вёрстки двух кнопок в трех состояниях.
Можно создать шумную поверхность любых цветов:
«Купить» синеет и превращается в кнопку «Перейти в корзину». Пользователь переходит или продолжает покупки.

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

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

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

Правила продажи

Никто не читает правила, можно писать что хочешь. Почему бы не написать слева для юриста, а справа — для простого смертного? Читать станет гораздо веселее.mergenshop.ru/pravila/

Подвал

В просторном подвале адреса всех розничных магазинов и другие данные. Есть и своеобразное пасхальное яйцо в разделе «Офис в Казани».

То, чего не видно

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

3266401_3.jpg — третий снимок для товара с артикулом 3266401.

Заключение

В ходе работы над этим сложным заказом я научился лучше управлять разработчиками, решать технические и дизайнерские противоречия и получил ценный опыт. Хочу поблагодарить верстальщиковВёрстка была особенно сложной. Ниже — первая половина замечаний, а всего было 112 правок и программистов за терпение, а руководство Мергена — за доверие. Прошло полтора года с запуска и мы до сих пор вместе. Я руководил вступлением в Яндекс Маркет, поисковым продвижением, придумал карточки для привлечения покупателей и по сей день осуществляю поддержку: перевёрстываю главную и некоторые внутренние страницы к разным событиям, общаюсь с Маркетом и рекламными сетями, решаю возникающие трудности, предлагаю и вношу улучшения. У меня целый список того, что ещё требует улучшения, он постоянно пополняется. Если у вас есть мысли, что-то показалось неудобным, если вы заметили ошибку или с вашего устройства страница отображается не так, пишите: 39@igorgerasimov.com.