Разработка портала: веб сервис с интернет магазином на WordPress

Разработка портала: веб сервис с интернет магазином на WordPress

Создали литературную платформу на WordPress и WooCommerce: paywall, продажа переводов поштучно, личный кабинет, OAuth и синхронизация без перезагрузки.

perevodka.club

Задача проекта

{ Цель }

Разработка сервиса для публикации и монетизации авторских переводов. Мы спроектировали и разработали сайт как продуктовый веб-сервис: с платным доступом к отдельным материалам, личным кабинетом, социальной авторизацией, комментариями, реакциями и синхронизацией данных между устройствами.

В основе web-разработки — WordPress и WooCommerce, с кастомной темой и собственной бизнес-логикой. Читатель может открыть бесплатный фрагмент, купить полный доступ в несколько кликов и продолжить чтение с того же места на телефоне, планшете или компьютере.

Что мы сделали:

{ Проектирование }

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

Отдельное внимание уделили личному кабинету. Он стал центром управления: покупки, избранное, уведомления, профиль и настройки оформления собраны в одном месте. Стандартную навигацию WooCommerce заменили на кастомную, чтобы кабинет выглядел как часть медиа-платформы, а не как типовой магазин.

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

Разработка

{ Верстка и программирование }
HTML5 SCSS jQuery JavaScript Ajax REST API CMS Worpress WooCommerce ЮKassa Stripe API Swiper Fancybox

Разработали кастомную тему WordPress под бизнес-логику проекта и расширили WooCommerce под продажу цифрового контента. Каждый материал может быть бесплатным, платным с фиксированной ценой или платным с автоматическим расчетом стоимости.

Для автоматического ценообразования система учитывает объем текста и базовую ставку из настроек сайта. Редактору не нужно вручную назначать цену для каждой публикации: достаточно подготовить материал и выбрать нужный режим монетизации.

Первые 15% текста открыты как бесплатный фрагмент. Это помогает читателю оценить материал перед покупкой, а платформе — аккуратно подводить пользователя к оплате без резкого закрытия контента.

Для динамических сценариев использовали AJAX и WordPress Heartbeat API. Избранное, купленные материалы, уведомления и реакции обновляются без перезагрузки страницы. Если пользователь работает с платформой на нескольких устройствах, данные синхронизируются по времени последнего изменения.

Тестирование

{ Адаптивность, баги }

Ключевые решения

  1. Умный paywall для платного контента

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

  2. Автоматический расчет цены от объема текста

    Для части публикаций цена формируется автоматически. Это снижает ручную работу редакции и делает процесс публикации стабильнее: материалы можно добавлять быстрее, без постоянной настройки стоимости вручную.

  3. Личный кабинет на базе WooCommerce

    Мы расширили стандартный аккаунт WooCommerce и добавили разделы, которые нужны именно медиа-платформе: покупки, избранное, уведомления, настройки профиля и оформления. Пользователь видит свои материалы и возвращается к ним без лишних действий.

  4. Синхронизация между устройствами

    Через Heartbeat API и AJAX платформа обновляет состояние пользователя в фоне. Если материал куплен на одном устройстве, доступ открывается и на других. Избранное, уведомления и реакции также остаются актуальными без перезагрузки.

  5. Авторизация через VK ID, Яндекс

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

  6. Социальный слой вокруг материалов

    Под публикациями реализованы комментарии с ответами, реакциями, упоминаниями и уведомлениями. Это превращает портал из простой библиотеки материалов в площадку с элементами сообщества.

Брендинг

{ Wireframe }

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