Разработка сайта «Фиш Ритейл Плюс»
На базе «1С-Битрикс: Управление сайтом - Стандарт» был создан информационный сайт «Фиш Ритейл Плюс» для компании ритейлеров, занимающихся реализацией рыбы и морепродуктов.
Цель проекта: Разработка нового сайта на индивидуальном шаблоне, интеграция сайта с Битрикс24.
Описание системы
Система управления контентом и программное обеспечение
- Операционная система: Linux CENTOS
- Язык программирования: PHP8+
- База данных: MariaDB 10.4.28
- CMS 1С-Битрикс
- REST API Bitrix24
Основные работы
- Разработано Техническое задание
- Разработаны блок схемы страницы сайта
- Установлено ПО 1С-Битрикс: Стандарт на сервер Заказчика
- Свёрстаны страницы сайта, расставлены компоненты и модули по блок схеме шаблона
- Установлена цветовая гамма шаблона по согласованию с Заказчиком
- Настроена адаптивность страниц для различных устройств
- Создано и выведено меню сайта
- Наполнены информационные разделы сайта
- Настроена интеграция веб-форм с лидами Битрикс24
Этапы проведения работ
- Первый этап:
- Анализ требований и составление спецификации:
- Взаимодействие с заказчиком для понимания его потребностей
- Определение основных функциональных и нефункциональных требований
- Разработка технического задания
- Разработка прототипов пользовательского интерфейса для обсуждения и утверждения с заказчиком
- Создание дизайна сайта, соответствующего корпоративному стилю заказчика:
- Разработка блок схемы главной страницы
- Разработка блок схемы страницы "Наша продукция"
- Разработка блок схемы карточки товара
- Разработка блок схемы страницы "Карьера"
- Разработка блок схемы страницы "О нас"
- Покупка и развертывание системы управления сайтом 1С-Битрикс: Стандарт
- Анализ требований и составление спецификации:
- Второй этап:
- Вёрстка страниц сайта, расстановка компонентов по блок схемам
- Настройка адаптивность страниц для различных устройств
- Настройка компонентов и модулей сайта
- Настройка модулы перевода сайта на английский язык
- Третий этап:
- Разработка компонентов и логики работы с пользовательским интерфейсом:
- Настройка веб-форм
- Настройка интеграция веб-форм с лидами Битрикс24
- Тестирование и отладка:
- Проведение тестирования функционала сайта на соответствие требованиям
- Внесение необходимых исправлений и улучшений
- Установка и настройка сайта на сервере
- Разработка компонентов и логики работы с пользовательским интерфейсом:
Шаблон сайта
Разработаны блок схемы расположения основных блоков сайта:
- Блок схема главной
- Блок схема страницы "Наша продукция"
- Блок схема карточки товара
- Блок схема страницы "Карьера"
- Блок схема страницы "О нас"
На основе шаблона определены кнопки управления (навигация сайта). С каждой страницы сайта обеспечен переход (установлена гиперссылка) на главную страницу сайта.
Объём и состав текстовой и графической информации в электронном виде
Наполнение каталога товаров осуществлено на основе присланных Заказчиком материалов.
Сделаны меню сайта:
ВЕРХНЕЕ МЕНЮ
- Главная
- Продукция
- Преимущества
- Карьера
- О нас
- Контакты
Меню футера
- --Первая колонка--
- Главная
- Продукция
- Преимущества
- --Вторая колонка--
- Карьера
- О нас
- Контакты
Информацию для размещения предоставлена Заказчиком.
Структура сайта
Сайт состоит из следующих разделов:
- Главная страница сайта
- Продукция
- Преимущества
- Карьера
- О нас
- Контакты
- Новости
- Политика конфиденциальности
Главная страница сайта
Главная страница сайта содержит следующий список блоков:
- Шапка сайта (сквозной блок по всему сайту):
- Логотип
- Мессенджеры
- Телефон
- Кнопка "Сделать заказ" (открывает модальное окно с формой)
- Выбор языка (русский и английский)
- Горизонтальное меню сайта (главное меню)
- Поиск по сайту
- Контентная часть:
- Слайдер
- Блок "Преимущества"
- Блок "Услуги"
- Блок "Популярные товары"
- Блок "Новости"
- Блок "Наши партнеры" (список логотипов партнеров)
- Подвал сайта (сквозной блок по всему сайту):
- Логотип
- Блок копирайта
- Нижнее меню 1
- Главная
- Продукция
- Преимущества
- Нижнее меню 2
- Карьера
- О нас
- Контакты
- Контакты
- Блок мессенджеров
- Политика конфиденциальности
Наша продукция
Каталог товаров сформирован на основе присланных Заказчиком материалов.
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Блок списка продукции
- Список продукции содержит возможность заказать продукцию через кнопку "Заказать" (открывается форма заказа товара)
- Блок постраничной навигации
- Блок "Услуги"
- Блок "Знакомьтесь с компанией Фиш Ритейл плюс" (краткое описание компании)
- Подвал сайта
Страница карточки товара содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок навигации слайдера с миниатюрами картинок товара
- Слайдер с картинками товара (с возможностью увеличения)
- Заголовок, наименование товара
- Кнопку "Поделиться"
- Блок "Характеристики товара" (вывод свойств товара)
- Кнопку "Заказать сейчас" (открывает форму заказа товара)
- Кнопку "Запросить прайс" (открывает форму запроса прайса)
- Описание товара
- Подвал сайта
Преимущества
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Список преимуществ с картинками и описаниями
- Блок "Наши партнеры" (список логотипов партнеров)
- Подвал сайта
Карьера
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Блок со вступительным текстом
- Блок "Почему именно мы"
- Список вакансий (выпадающие блоки с описанием ваканисий: "Обязанности", "Требования", "Условия" и кнопкой "Оставить заявку" (открывает форму заявки))
- Блок "Наши партнеры" (список логотипов партнеров)
- Подвал сайта
О нас
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Описание компании
- Блок "Наша команда" со списком сотрудников (фотографии и данные сотрудников) и общей фотографией команды
- Подвал сайта
Контакты
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Блок с контактами офиса компании, её реквизитами
- Блок со списком складов
- Блок с Яндекс.Картой, на которой указаны метки геолокации офиса и складов
- Подвал сайта
Новости
Страница содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Блок заголовка с фоновой картинкой данной страницы
- Список новостей компании
- Блок постраничной навигации
- Блок "Наши партнеры" (список логотипов партнеров)
- Подвал сайта
Детальная страница новости содержит следующие элементы:
- Шапка сайта
- Блок хлебных крошек (отображения пути от корня сайта)
- Заголовок новости
- Детальную картинку новости
- Текст новости
- Блок "Наши партнеры" (список логотипов партнеров)
- Подвал сайта
Настройка веб-форм
В соответствии с ТЗ были созданы веб-формы для каждой услуги:
- Заказать звонок (форму открывают кнопка "Заказать звонок" в подвале сайта и кнопка с иконкой телефона в мобильной версии)
- Заказать товар (форму открывают кнопки "Заказать" в списках товаров и кнопка "Закзать сейчас" в карточке товара)
- Связаться с менеджером (форму открывают кнопка "Сделать заказ" в шапка сайта и на странице "Наша продукция" и кнопка "Оставить заявку" в блоке "Услуги", услуга "Оптовые поставки рыбы")
- Связаться с компанией (форму открывает кнопка "Оставить заявку" в блоке "Услуги", услуга "Поиск рыбы под клиента")
- Запросить «Прайс» (форму открывает кнопка "Запросить прайс" в карточке товара)
- Отправить заявку (сотрудник) (форму открывает кнопка "Оставить заявку" в выпадающем блоке описания вакансии на странице Карьера)
Во всех веб-формах есть 4 поля:
- Фамилия Имя Отчество
- Адрес электронной почты
- Телефон
- Информация/Примечание
В веб-формах "Заказать товар" и "Отправить заявку (сотрудник)" есть дополнительные поля:
- У формы "Заказать товар" - поле "Товар" (в него автоматически подставляется название выбранного товара)
- У формы "Отправить заявку (сотрудник)" - поле "Вакансия" (в него автоматически подставляется название выбранной вакансии)
Интеграция веб-форм с лидами Битрикс24
На портале Битрикс24 компании "Фиш ритейл плюс" в CRM были создания пользовательские поля лидов:
- Услуга
- Товар
- Вакансия
Сайт и портале Битрикс24 компании "Фиш ритейл плюс" синхронизированы. В веб-формах настроена передача значений полей форм в соответствующие поля лидов.
Таблица соотвествий полей CRM и полей форм
| Поле CRM | Поле формы |
|---|---|
| Заголовок | Фамилия Имя Отчество |
| Имя | Фамилия Имя Отчество |
| Частный e-mail | Адрес электронной почты |
| Мобильный телефон | Телефон |
| Услуга | Название формы |
| Комментарий | Информация/Примечание |
| Вакансия | Вакансия |
| Товар | Товар |
В CRM добавлены роботы, которые перенаправляют лиды определенным группам сотрудников компании в зависимости от значения поля "Услуга":
- Лиды с услугой "Отправить заявку (сотрудник)" перенаправляются группе "Руководство"
- Лиды с остальными услугами перенаправляются группе "Сотрудники"
Также в CRM добавлен робот, отправляющий уведомления о новых лидах ответственному сотруднику.
Ожидаемые результаты
- Увеличение эффективности работы компании «Фиш Ритейл Плюс».
- Улучшенное обслуживание клиентов.
- Оптимизация бизнес-процессов.
- Увеличение прибыли компании.
Заключение
- Разработка сайта является важным шагом в развитии компании «Фиш Ритейл Плюс».
- Проект позволяет повысить эффективность бизнеса.
- Наша компания готова предоставить все необходимые ресурсы для тех. поддержки и продвижения проекта.
Примеры страниц сайта
Мы используем cookie. Они помогают нам понять, как вы взаимодействуете с сайтом. При посещении страниц сайта вы даете согласие на использование и хранение файлов cookie на вашем устройстве. Подробнее