Маркетплейс для БДСМ и секс-товаров FetishManiac.com

Маркетплейс для БДСМ и секс-товаров FetishManiac.com

Задача: создать мультиязычную мультивалютную площадку-маркеплейт для товаров в сфере БДСМ, фетиша и секса

LARAVEL
Использовался для бэкэнда
MySQL
Стандартный подходящий вариант хранения данных
TNT SEARCH
Использовался для индексируемого полнотекстового поиска
VUE+VUEX
Использовался компонентно для интерактивных элементов. В разделе личных сообщений с VUEX
WebSocket
Условные сокеты использовались для realtime личных сообщений с Pusher
API
Использовалось для писем, pusher и работы с Telegram ботом
Ph + Illustrator
Использовались для работы с изображениями и векторами
GIT+BitBucket
Контроль версий

Хороший большой проект, который полностью реализован мной. Согласно ТЗ, требовалось создать площадку, на которой любой посетитель мог создавать собственный магазин и продавать свои товары

Фронтэнд

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

Цветовые сочетания были выбраны близкие к классическим в тематике БДСМ и фетиш-ниши. Для удобства была создана параллельно и светлая тема, которая не отличается красотой, но и служит для другого.

Начнем с того, что все поля ввода максимально валидируются с помощью VUE при вводе информации и не дадут ошибиться пользователю. Уведомления, которые помогают контролировать ситуацию выглядят, например вот так:

Уведомление при создании магазина

При этом во всем интерфейсе я следил за классическими канонами проектирования и дизайна: например, обратите внимание на кнопки в моменте с созданием магазина выше.

Общие элементы, настройка и навигация

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

Первоначально неизвестно количество категорий и подкатегорий, которые могут быть и потому был выбран вариант с Amazon-кнопкой, которая выпадает с умышленной задержкой:

Главное меню категорий сайта

Страница категории

Кроме UX стояли требования и по SEO. Потому страница категории выполнена именно так: лаконично и функционально:

Страница категории товара

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

В карточке товара следовало так же проработать как UX, так и хорошую перелинковку и SEO в целом. При этом конечно не скатиться в AliExpress:

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

Страница магазина

Довольно болезненная ситуация была с первым экраном страницы магазина, который создает пользователь. Мы не можем знать, какую обложку он загрузит. И для себя тяжело, но обязательно надо было принять то, что качество этой обложки будет ужасное... Но UGC есть UGC. Первый экран важен и содержит самую важную информацию. При разработке я ссылался на AliExpress, FetLife и Etsy.

Функционал поиска

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

Выпадающий поиск

Далее идет переход на отдельную страницу поиска

Личные сообщения

Раздел личных сообщений реализован с помощью VUE + VUEX в качестве стора. Помимо этого реалтайм функционала не планировалось и потому все было сделано через Pusher. При желании посетителя купить товар экшн происходит через личные сообщения: с помощью "#" парсер подставляет ссылки на товары на сайте.

Личный кабинет, создание магазина и публикация товаров

Личный кабинет стандартен и имеет кучу классических элементов. Для простоты все было максимально выделено:

Пример редактирования личной информации

Ну и наконец, создание магазина и работа с товарами - самая активная часть...

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

Первоначальная настройка магазина

В целом создание магазина занимает не более одной минуты

Создание и редактирование товаров выглядит вот так. При этом доступно быстрое меню для экономии кликов и ускорения работы:

Блок работы с товарами

В динамике это выглядит так:

Быстрое редактирование товара

Если с товаром есть какие-то проблемы, то посетитель это не пропустит:

Страница товара при нарушении

Само же создание товара максимально линейно и завалидировано. Вот фрагмент:

Фрагмент страницы создания товара

Бэкэнд

Со стороны бэкэнда реализовано следующее:

  • Авторизация, разделение прав пользователей
  • Система категорий/подкатегорий
  • Создание/редактирование магазинов/товаров с заданными характеристиками и изображениями
  • Личные сообщения между пользователями с пагинацией-скроллом
  • Кэширование
  • Мультиязычность и мультивалютность
  • Фильтрация товаров, магазинов и пользователей
  • Полнотекстовый поиск с использованием TNT SEARCH
  • API для поиска, валидации и прочего
  • Интеграция с Pusher, MailGun
  • Интеграция с Telegram ботом, который отслеживает публикацию товаров и прочее (бот тоже сделан мной)
404 страница

Make an order
or Hire us