С вами снова WEB-AiM
В прошлый мы подробно описали этапы работы над проектом. А сейчас расскажем про функционал портала.
Функционал
Начнем с более-менее типовых вещей.
Интернет-магазин товаров
Страница каталога
Страница раздела:
Страница конкретного товара:
Из интересного – товары в этом магазине можно лайкать/ дизлайкать, добавлять в избранное (о нем в разделе про Личный кабинет), комментировать.
Собирается также статистика по количеству просмотров, которая в дальнейшем будет использоваться в настройке рекламы.
Все цены в магазине автоматически пересчитываются в зависимости от того, какую валюту хочет использовать покупатель – рубль, доллара или евро. В зависимости от курса, цены у товаров обновятся автоматически.
А еще валюта автоматически выбирается в зависимости от выбранной языковой версии сайта.
Раздел религиозных объектов
Страница конкретного объекта:
Суть проекта – рассказывать заинтересованным пользователям о религиозных объектах в разных уголках мира. В некоторых объектах еще и услуги предоставлять.
Поскольку таких объектов в мире очень много, необходимо было настроить удобную, логичную и понятную фильтрацию.
На основе свойств Конфессия/ Страна/ Регион был создан нетиповой сужаемый фильтр, который можно видеть на главной странице.
Это нетипичный для 1С-Битрикс умный фильтр, который мы привыкли видеть на страницах товарных каталогов. Его отличие как во внешнем виде, так и в работе.
Он сделан на основе взаимозависимых выпадающих списков для того, чтобы можно было, выбирая одно из значений, получить сужение списков в остальных 2-х окнах для выбора.
Это нужно для того, чтобы сделать максимально удобным поиск объекта по любому из его параметров.
Например, можно искать все объекты, относящиеся к католичеству, или все объекты, относящиеся к католичеству и находящиеся в Румынии. Или просто посмотреть, какие религиозные объекты есть в Румынии, и увидеть, к каким конфессиям они относятся.
Лучше увидеть, чем 10 раз прочитать. На видео показано, как это работает на главной странице в связке с выводом точек на глобусе.
На странице списка объектов более привычная выборка из общего списка (почти как фильтр в каталоге товаров, но только для другого типа объектов).
Страница конкретного религиозного объекта на примере
С помощью свойств реализуется привязка GPS-координат объекта для того, чтобы его можно было вывести на глобусе на главной странице и на вкладке Контакты в карточке объекта.
В галерее объекта могут выводиться фото с описаниями и видео.
К объекту могут привязываться:
- новости, относящиеся к этому объекту;
- услуги, которые оказываются в этом объекте и которые можно заказать удаленно;
- товары, которые могут быть куплены удаленно и освящены в этом объекте;
- 3D-тур, если он был создан для этого объекта.
Тут также стоит отметить то, что в других типах контента эти же привязки также работают. В новостях будет выведен блок со ссылкой на религиозный объект, а в товарах появится ссылка с возможностью освятить этот товар в привязанном храме.
Также карточка объекта содержит блок с комментариями, блок социализации (можно лайкнуть, добавить в избранное, увидеть количество просмотров и тд), блок «поделиться».
Новостной раздел
Страница списка новостей
Страница конкретной новости
На странице списка новостей есть несколько функциональных блоков:
- Рубрикатор − сортировка по темам
- Прямой эфир – перечень последних комментариев
Вывод анонсов новостей сделан «блочным». Каждый блок содержит изображение анонса, название, дату, блок статистики и быстрого взаимодействия (можно лайкнуть, сохранить в избранное, просмотреть количество комментариев и просмотров).
Лента новостей имеет «бесконечную прокрутку» – как и в современных социальных сетях «долистать» до самого конца ее практически невозможно :). При этом, контент не загружается сразу и весь, а запрашивается с сервера по мере пролистывания страницы к нижним материалам.
На данном проекте, конкретно в новостях, отказались от пагинации (разбивки на страницы) – для большинства пользователей хватило функционала рубрикатора для редкого случая, в котором необходим поиск какой-то конкретной новости из «прошлого». Также на сайте есть штатный поиск, которым также можно воспользоваться.
На странице конкретной новости есть галерея (фото+видео, в галерее можно задавать подписи для каждого фото, а на странице может быть любой вид контента)
Как и было уже сказано немного раньше, если новость связана с каким-либо объектом, то в ней будет показан блок для перехода на страницу этого объекта. Каждую новость можно прокомментировать. Возможность оставить комментарий есть только у зарегистрированных и авторизованных пользователей, но пройти авторизацию можно тут же – в блоке комментирования.
Также отлично работает автоматическая регистрация+авторизация через соцсети и популярные сервисы (Б24, Google, Yandex, Одноклассники, VK, Facebook и mail.ru)
Пользователю нет необходимости проходить полную процедуру регистрации/ авторизации на сайте, достаточно «разрешить» сайту использовать его данные, например, из социальной сети VK или Facebook, и сайт автоматически «подтянет» все, что ему необходимо для создания аккаунта и мгновенной авторизации.
Также у новости, равно как и у любого другого объекта, на сайте есть вот такой блок:
Он сочетает в себе элементы социализации контента (лайк/дизлайк), статистику (количество просмотров объекта и количество комментариев) и возможность добавления в «Избранное».
Элементы статистики и социализации нужны для того, чтобы показывать пользователям, какой именно контент на сайте пользуется большей популярностью.
В дальнейшем на базе данного функционала планируется создание инструмента рейтинговой выдачи на основе популярности. Также эти данные могут быть использованы в качестве переменной для создания «умной персонализированной выдачи», в которой популярные материалы могут «подмешиваться» в выдачу построенную на личных предпочтениях (опираются на like/dislike+рубрикация).
Эти элементы добавляют интерактивность − реакция на новость без необходимости оставлять текстовый комментарий, что также важно для социально направленных проектов.
Еще одна возможность − использование статистик Яндекс.Метрики в контентных отчетах для анализа эффективности и популярности контента. Эти данные помогают в составлении более результативных контентных и маркетинговых планов.
Еще один элемент этого блока – добавление в избранное. При нажатии на эту кнопку, сайт сохраняет эту новость/статью/объект/товар в личном кабинете пользователя. Это реализовано максимально удобным и наглядным образом и многие пользователи успешно пользуются такими «закладками»:
Все типы контента на сайте имеют корректно сгенерированную микроразметку schema.org (Breadcrumb, product, article) и OpenGraph. В основном она нужна для составления корректных сниппетов при «расшаривании» материалов в социальных сетях. Но также она полезна и для более быстрой и корректной индексации поисковыми системами.
Корзина и процедура оформления заказа
Поскольку проект задуман, в первую очередь, как просветительско-информационный, на сайте вы не найдете привычной корзины.
Она появляется только в том случае, если пользователь захочет купить или заказать какую-либо услугу.
Также доработана процедура оформления заказа – на сайте есть и услуги и товары, которые пользователь может приобрести. Если пользователь заказывает только услугу, для нее не нужны доставка. Соответственно, форма заказа сокращается – из нее убираются все поля связанные с доставкой.
Если в корзине появляется физический товар, который необходимо будет доставлять, в чекауте автоматически появляется весь необходимый функционал для расчета и оформления этой доставки.
Кстати, на сайте реализован расчет доставки Почтой Израиля, корректно считаются зональные тарифы по странам, реализованы наценки за объем и вес по тарифам этого перевозчика.
Подробнее о малой и большой корзине и о том как работает модифицированная страница оформления в этом коротком видео
В качестве модулей оплат выбраны и интегрированы PayPal и Яндекс.Деньги.
Paypal интегрировали, чтобы удобно было оплачивать пользователям из Европы и США. Оплатой через Яндекс.Деньги больше пользуются жители СНГ.
Мобильное приложение
Для обработки заказов на услуги, которые пользователи заказывают на сайте, необходимо было создать простое и функциональное приложение для исполнителей-волонтеров, которые работают по всему миру.
По этому было создано мультиязычное приложение, работающее на iOS и Android, в котором волонтеры получают и обрабатывают заказы.
Приложение переведено на те языки, которые используют волонтеры в разных странах – русский, английский и испанский. При дальнейшем развитии проекта планируется добавление и других языков.
Для авторизации в приложении используется несколько методов: с помощью QR-кода и через СМС.
Для получения доступа в приложение, волонтер должен находиться в специальной группе пользователей на сайте, в которую его может добавить только администратор.
QR-код
После назначения пользователя волонтером, в его личном кабинете на сайте начинает отображаться специальный QR-код, который можно использовать для авторизации в приложении. Его просто нужно показать камере мобильного телефона, на котором установлено это приложение и авторизация произойдет автоматически.
СМС
Получение кода на номер, указанный в личном кабинете. В этом случае на сервере приложения будет сделана проверка того, что пользователь находится в нужной группе, после этого на его контактный телефон будет выслан код, при вводе которого он будет успешно авторизован в приложении.
Оба метода работают надежно и прозрачно для пользователей, сохраняя необходимый уровень безопасности и упрощая процесс авторизации для волонтеров.
В приложение выгружаются все оплаченные заказы заказы, которые необходимо обработать.
Для удобства волонтеров заказы разбиты на 3 отдельных вкладки:
2 вкладки − это 2 основных услуги
1 вкладка – это заказы с физическими товарами, которые требуют доставки.
Внутри каждого отдельного заказа содержится вся необходимая волонтеру информация для его выполнения.
Волонтер может принять заказ или игнорировать его:
- Если волонтер принял заказ, информация об этом автоматически отображается в панели управления заказами на стороне сайта. А пользователь, который оформил заказ, получает уведомление, что его заказ начал обрабатываться.
- Если волонтер не принял заказ, он возвращается в общий список заказов и его может принять другой волонтер.
Исполнение заказа предполагает фотоотчет услуги и сохранение GPS-координат места исполнения.
Если заказ содержит товар, то в качестве исполнения предполагаются стадии сбора заказа и его отправка с присвоением трек-номера, который волонтёр вводит в приложении. После трек-номер автоматически появляется в заказе на сайте, а уведомление об это отправляется клиенту. Вот такая не простая, но надежно работающая схема.
Для создания этого двустороннего взаимодействия был разработан API для передачи всей информации о волонтерах, заказах, товарах, услугах, статусах в обе стороны – с сайта в приложение и из приложения обратно на сайт.
В данный момент все поступающие на сайт заказы обрабатываются волонтерами именно через приложение, в «админке» сайта работают только администраторы и координаторы.
Серверная часть сайта и посещаемость
Сайт работает на облачном сервере в предустановленной виртуальной среде Битрикс. Облачный сервер был выбран для динамического распределения нагрузки в моменты пиковых посещений, которые бывают во время религиозных праздников.
Сайт и сервер оптимизированы и справляются с ежедневной нагрузкой 1 миллион пользователей:
Оптимизировали и расходы на аренду облачного решения – в моменты пиковой нагрузки сервер стоит дороже, но когда нагрузка падает, мощность сервера снижается для минимизации денежных затрат по его аренде.