Cайт международного производителя товаров для домашних животных
Производство
Украина
2022
Услуги
Технологии
Сложность
Время разработки
500 часов
Команда
1 TM, 1 PM 2 Backend, 2 Frontend, 1 QA
Статус проекта
Проект успешно реализован
О клиенте
Компания COLLAR — международный производитель инновационных продуктов для домашних животных. Продукция компании была высоко оценена экспертами на международных выставках по всему миру. В данным момент компания является изготовителем 13 всемирно известных брендов товаров для животных.
Целевой аудиторией компании являются владельцы домашних животных, таких как собаки, кошки и аквариумные рыбки, которые ценят инновационные продукты и высокое качество товаров для своих питомцев. Кроме того, целевую аудиторию также составляют профессионалы в области зоотоваров, такие как дрессировщики и кинологи, которые ищут высококачественное оборудование и инструменты для своей работы.
Компания COLLAR обратилась к нам за разработкой веб-платформы, ориентированной на потребности партнеров компании. Отсутствие такого ресурса приводило к неэффективной коммуникации с партнерами и ограничивало доступ к важной информации о продукции, брендах, новостях и событиях компании, а также каталогу товаров.
При этом для заказчика было критически важным создать сайт таким образом, чтобы была возможность формировать страницы из отдельных блоков, как конструктор. Этот функционал был очень важен для компании, поскольку он позволял бы оперативно создавать страницы, ориентированные на различные товары, категории товаров или бренды, и адаптировать контент под актуальные потребности и стратегии компании. Неимение такой гибкости затрудняло бы стратегическое развитие и маркетинговые усилия компании.
Главной задачей проекта было улучшение связи компании заказчика с их партнерами через создание веб-платформы. Им было важно обеспечить более эффективный обмен информацией о продукции, брендах, новостях и событиях компании, а также предоставить партнерам доступ к каталогу товаров. Кроме того, компания стремилась к тому, чтобы сайт был гибким в редактировании контента, позволяя оперативно адаптировать его под различные цели и маркетинговые кампании.
Важная задача — сделать сайт мультиязычным, чтобы компания могла расширить свой рынок и привлечь аудиторию из разных стран. Также заказчик хотел улучшить видимость сайта в поисковых системах, адаптировать его для мобильных устройств, сделать блог важной частью сайта для привлечения новых клиентов и установления авторитета в отрасли, а также интегрировать платформу Битрикс24 для оптимизации управления клиентами и бизнес-процессами.
Изображение проекта
Решение
Мы разработали веб-платформу, которая обеспечивает эффективный обмен информацией и доступ к каталогу товаров. Сайт получился очень гибким, позволив заказчику редактировать контент с помощью Gutenberg-редактора без участия разработчиков. Для расширения рынка и привлечения аудитории из разных стран мы реализовали мультиязычность.
Для улучшения видимости в поисковых системах мы настроили SEO и микроразметку. Особое внимание уделили странице блога, которая стала важной частью сайта для привлечения новых клиентов. И, наконец, интегрировали платформу Битрикс24 для оптимизации управления клиентами и бизнес-процессами.
Проект получился достаточно интересным. Однако были некоторые сложности в ходе выполнения проекта. В первую очередь, заказчику требовалось создать возможность заполнения страниц сайта по принципу конструктора, чтобы контент-менеджеры могли легко собирать страницы из различных блоков и секций. Решением стало использование Gutenberg редактора, что значительно облегчило процесс заполнения контента.
Вторым вызовом была интеграция с Bitrix24. После нескольких обсуждений мы выбрали простой способ через использование готового скрипта от Bitrix24, который вставили на сайт и стилизовали формы под общий внешний вид.
Наконец, третья проблема заключалась в обучении заказчика администрированию сайта. Мы разработали подробную инструкцию, чтобы даже новичку было легко разобраться, и дополнительно поддерживали заказчика на всех этапах процесса обучения. В итоге, несмотря на сложности, мы успешно реализовали все требования заказчика и предоставили ему функциональный и удобный сайт для работы.
Реализованный функционал
Англоязычная версия сайта
Мультиязычность
На сайте реализована функция мультиязычности, что означает, что вы можете просматривать контент на разных языках. Сайт поддерживает английский, русский и украинский языки. Мы реализовали мультиязычность так, что каждый язык имеет свою собственную подпапку в URL-адресе, например, /ru/ для русского языка и /ua/ для украинского языка. Это делает навигацию по сайту более интуитивной для пользователей на разных языках.
Пример Gutenberg-блоков
Gutenberg редактор
Gutenberg редактор представляет собой универсальный конструктор, который позволяет контент менеджерам самостоятельно собирать различные страницы из готовых блоков без привлечения разработчиков. Мы потратили много времени на разработку этой функциональности, чтобы обеспечить менеджерам возможность создавать страницы по своему усмотрению и делать это максимально удобно и быстро.
Сниппет сайта в поисковой системе Google
Настройка SEO
Благодаря нашей работе по техническому SEO, мы подготовили сайт к успешному продвижению по поисковым запросам. Мы внедрили несколько различных микроразметок, чтобы улучшить отображение результатов в поисковых системах. Это включало в себя разметку контактов для локального бизнеса, разметку оценок, разметку хлебных крошек, а также специальную разметку для статей, блоков FAQ и страниц авторов. Эти микроразметки помогают поисковым системам лучше понять содержание сайта и предоставить более релевантные результаты для пользователей.
Мобильная версия проекта
Мобильная версия сайта
Мы вложили много времени и усилий в разработку мобильной версии сайта, и результаты нас порадовали. Мобильная версия получилась качественной и адаптивной, что позволяет пользователям удобно просматривать сайт на любых мобильных устройствах.
Страница блога
Блог
Раздел блога оформлен в несколько разделов с различными интересными блоками для каждой отдельной записи. Был написан функционал, который собирает все заголовки в записи h2-h3, назначает им уникальные идентификаторы и собирает в единый блок-оглавление. Также реализован фунционал подсчета количества просмотров. Помимо этого внедрена функция оценки статей. Также доступен блок часто задаваемых вопросов (FAQ). Отдельно была разработана страница автора для представления информации о нем.
Интеграция форм с Bitrix24
Интеграция с Битрикс24
Изначально планировалась интеграция с Битрикс24 через API для отправки данных со всех форм в эту CRM и создания лидов. Однако, после дальнейшего обсуждения, мы решили использовать готовый скрипт, предоставленный Битрикс24, который мы внедрили в соответствующие места на сайте. Мы разместили необходимые скрипты с формами и стилизовали их в соответствии с утвержденным дизайном, чтобы обеспечить единый внешний вид.Этапы разработки
Фронтенд
На старте, получив концепцию и дизайн-макеты от заказчика, мы взялись за фронтенд, оставив бэкенд для последующего обсуждения. После оценки работы и заключения договора, мы приступили к верстке. Важно было учесть все пожелания заказчика, поэтому мы активно общались и внедряли предложения, что привело к успешному завершению этапа. Наши последующие встречи с заказчиком позволили довести детали до совершенства, гарантируя бесперебойный переход к следующему этапу проекта.
Бэкенд
Мы приступили к разработке бэкенда после тщательной подготовки ТЗ и оценки работ. Работы на тестовом сервере стартовали сразу же, однако новые вопросы требовали обсуждения с заказчиком на нескольких встречах. В ходе разработки заказчик предложил новые идеи и доработки, которые мы внедрили в проект. В завершение, мы создали подробное руководство по администрированию, постоянно обновляя его в соответствии с потребностями заказчика.
Тестирование
На этапе тестирования проводилась проверка функциональности и корректности работы как фронтенда, так и бэкенда сайта. Команда тестировщиков тщательно проверяла все элементы сайта на соответствие заявленным требованиям и дизайн-макетам. Особое внимание уделялось мультиязычности, адаптивности для различных устройств, правильности работы блога и интеграции с платформой Битрикс24. По мере обнаружения ошибок или недочетов они фиксировались и передавались разработчикам для исправления. После завершения тестирования и устранения всех выявленных проблем сайт был готов к запуску.
Релиз
На этапе переноса сайта произошло его размещение на сервере и домене заказчика. Также были добавлены необходимые метрики и скрипты для аналитики. Изначально сайт был закрыт от индексации, чтобы заказчик мог заполнить страницы контентом. После подготовки некоторых страниц, включая блог, мы открыли их для индексации. В течение месяца мы активно помогали заказчику с заполнением страниц, предоставляя инструкции и отвечая на вопросы. Параллельно с этим мы выполняли дополнительные задачи, которые возникали после переноса.
Результаты
Результаты проекта превзошли ожидания. Сайт Collar.com стал не просто витриной продуктов, а настоящим инструментом международного масштаба. Мультиязычность расширила границы аудитории, привлекая клиентов со всех континентов. Гибкий конструктор страниц сделал редактирование контента проще, чем когда-либо, освобождая команду от зависимости от разработчиков.
Оптимизация для поисковых систем подняла сайт на новый уровень видимости, адаптивный дизайн гарантирует комфортное взаимодействие с контентом на любом устройстве. Блог стал не просто дополнением, а ключевой составляющей, приковывая внимание новых клиентов и укрепляя авторитет компании.
Интеграция с платформой Битрикс24 стала импульсом для эффективного управления клиентами и бизнес-процессами. В итоге, создание сайта стало не только успехом, но и рычагом для увеличения прибыли и привлечения новых партнеров, подтверждая важность правильного онлайн-присутствия в современном бизнесе.
