Интернет-магазин органичной косметики Glossary.ua

О проекте

С июня 2019 года веб-агентство «Красный хамелеон» поддерживает сайт уникального интернет-магазина GLOSSARY Organic Products. Здесь представлены органические товары: продукты питания, профессиональные косметические и уходовые средства.

GLOSSARY — это первая компания на территории Украины, активно работающая в сфере производства и продажи экологичных продуктов и средств для ухода.

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

Точка старта

У компании GLOSSARY уже был опыт сотрудничества с другими веб-студиями до обращения в «Красный хамелеон». Однако состояние сайта оставляло желать лучшего.

Первичными проблемами проекта, которые предстояло решить, были:

• устаревший дизайн;

• минимальный функционал;

• плохой пользовательский опыт.

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

• не работал композитный кеш, который был установлен на сайте, однако один из компонентов блокировал его;

• присутствовали ошибки в консоли;

• в коде выводились отладочные сообщения, увеличивавшие время на генерацию страницы сервером;

• на страницах были неоптимизированные изображения;

• не был оптимизирован вывод видео в YouTube-плеере;

• использовались две различные версии jQuery;

• подключалось большое количество JS-библиотек

• на страницах каталогов производилось около 12 тысяч запросов, что существенно тормозило загрузку.

Аудит показал и другие проблемы, которые негативно сказывались на работе ресурса, его отображении, индексации, юзабилити:

• некорректно настроена функция «Купить в 1 клик»;

• неверно организована фильтрация товаров и вывод результатов;

• не работала функция быстрого заказа при добавлении товара в корзину;

• неправильно работала функция выбора города и отделения «Новой почты» при оформлении заказа;

• для оформления заказа использовался устаревший модуль;

• не срабатывала авторизация на сайте через соцсети;

• в файле sitemap.xml присутствовали некорректные ссылки, ведущие на страницу ошибки – 404;

• «Битрикс» указывал на ошибки настройки системы;

• в файловой структуре сайта присутствовали лишние файлы, папки, были установлены ненужные модули и мастера;

• нестандартная организация мультиязычности (могла создавать проблемы при поддержке и доработке сайта);

• использовалась нестандартная модификация компонента каталога;

• в коде были выявлены места некорректного или излишнего использования функций;

• ехала верстка в режиме отладки.

Основные задачи

Круг проблем и цели заказчика определили основной перечень задач по обновлению, поддержке и доработке проекта. Их разделили между собой разработчики «Красного хамелеона» и наш партнер – компания Promodo.

Последняя взяла на себя вопросы дизайна, маркетинга и SEO по проекту. Наша команда работает в таких направлениях:

• оптимизация сайта (ускорение, уменьшение объема занимаемого пространства, исправление ошибок);

• доработка функционала и интеграций;

• верстка страниц по макетам наших партнеров Promodo.

Оценить среднюю сложность реализации проекта практически невозможно, так как встречаются и весьма проблемные задачи, которые вполне заслуживают максимального балла, и довольно тривиальные, решаемые быстро и просто.

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

Все доработки и правки тестировались на всех копиях сайта. Лишь после этого они переносились на рабочий сайт, где снова тестировались. Так нам удалось минимизировать вероятность возникновения проблем и простоя торговой площадки.

Слаженность нашей команды и высокий уровень коллег из Промода позволяют справляться с заданиями любой сложности в рамках работ с интернет-магазином GLOSSARY Organic Products.

Что было сделано

Верстка

В рамках проекта верстка обновлялась на страницах:

• каталога;

• карточки товара;

• корзины;

• оформления заказа.

Кроме этого, дорабатывались меню, слайдеры и прочие элементы.

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

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

• 320 px;

• 768 px;

• 1024 px;

• > 1024 px.

Верстка тестировалась на разных устройствах и платформах:

Результат попиксельно сверялся с предоставленными макетами для реализации Pixel Perfect верстки. Это особая техника создания html-кода и набора стилей, при которой создаваемая страница на 100% совпадает с оригинальным дизайном. При таком подходе специалист добивается, чтобы все графические элементы и текст верстки и исходных изображений отображались идентично.

Для полной адаптивности и комфортной работы с сайтом frontend developer в связке с программистом провели ряд работ с меню:

• обеспечили корректный вывод всех пунктов меню на различных размерах экрана;

• зафиксировали меню в шапке для мобильных устройств;

• замедлили появление выпадающих элементов меню;

• переверстали подменю «Бренды» и организовали сортировку элементов в нем.

Доработали важный для юзабилити и SEO элемент – «хлебные крошки». Обеспечили вывод всех необходимых его частей и корректное отображение на страницах сайта, а также сохранение верстки при любой его длине.

Оптимизация

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

• добавили тег dns-prefetch, который уведомляет браузер о наличии внешних ресурсов на странице и готовит его к их загрузке – в некоторых случаях (примедленном интернет-соединении) такой способ позволяет сэкономить до 0,2 секунды для каждого внешнего ресурса;

• выявлены и исправлены ошибки консоли на страницах сайта;

• пересмотрели скрипты на cron и отключили неиспользуемые;

• очистили журнал событий и удалили старые сессии, что позволило уменьшить размер базы данных с 25 Гб до 500 Мб, оптимизировали таблицы после удаления чтобы сократить занимаемое ими физическое место, отключили журналирование изменений товаров, настроили выполнение агентов;

• провели ревизию JS-скриптов в коде сайта, убрали лишние неиспользуемые, организовали вызов только тех скриптов, которые реально используются на странице.

Чтобы исправить одну из наиболее значимых проблем со скоростью загрузки сайта было принято решение заменить компонент каталога, написанный предыдущими разработчиками, на стандартный «Битрикса». В ходе работы была определена настоящая причина крайне медленной работы компонента.

Разработчики определили, что скорость загрузки страницы каталога напрямую зависела от количества товаров в разделе. Поэтому более наполненные категории открывались медленнее, чем те, в которых меньше номенклатура.

В исходной версии сайта для реализации сортировки товаров был отключен параметр пагинации (постраничной навигации). В компонент загружались все товары раздела, сортировались, и только после этого отбиралась их часть для вывода на страницу. Это некорректный подход к к организации сортировки в списке и отказ от таковой позволил существенно ускорить процесс загрузки.

При подключенном стандартном компоненте bitrix:catalog.section вместо переделанного значительно сократилось время загрузки страницы и количество генерируемых запросов.

А после включения кеширования компонента время и количество запросов сокращалось еще больше.

В итоге, заменой вызова компонента на стандартный и включением кеширования удалось достичь уменьшения времени загрузки самой медленной страницы каталога с 12.5 секунд до 0.3 секунды (в 40 раз), и количества запросов с 11776 до 61 (почти в 200 раз).

Функционал

Новая верстка и необходимость замены устаревших компонентов на сайте требовали немалого участия разработчика «Битрикс». Среди выполненных задач:

• организация оформления заказа на сайте;

• выбор способов доставки, города при заказе посылки курьером, отделения «Новой Почты»;

• учет скидок и акций при расчете цены (исправление функционала дисконтной программы, промо-коды, организация корректного подсчета общей стоимости заказа с учетом доставки и скидок);

• реализация онлайн-оплаты с помощью сервиса FONDY;

• интеграция «Корзины» и функционала «Избранного»;

• создание интерактивного слайдера логотипов на главной;

• настроены фильтры и сортировки товаров на страницах каталогов для мобильных и десктопных версий сайта.

Юзабилити

Были внесены изменения для повышения юзабилити сайта:

• упрощена форма оформления заказа;

• возможность добавления товаров в «Избранное» включена только для авторизованных пользователей;

• организована возможность оформления заказа без предварительной регистрации и авторизации на сайте;

• настроен вывод информации на странице успешного оформления покупки.

Поиск

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

Дисконтная программа

На сайте предусмотрена дисконтная программа, которая не всегда корректно работала. Этот функционал разрабатывался еще до начала нашего сотрудничества с GLOSSARY. Программистам пришлось серьезно поработать, чтобы разобраться с тонкостями ее функционирования и настроек и внести необходимые коррективы.

Основная проблема была в том, что дисконт привязывался к ящику электронной почты клиента, а не все участники программы указывали таковой. В таком случае скрипт импорта из 1С ничего не делает, а просто сообщает что пользователь не найден.

В качестве решения было выбрано автоматическое создание пользователя с отсылкой на почту письма с данными регистрации и привязка к нему дисконта. Для покупателей, у которых не указан e-mail, регистрация и привязка организованы в момент оформления заказа.

Фид

Созданы и настроены фиды для передачи данных в рекламные сети для формирования динамических товарных объявлений:

• Dynamic Search Ads;

• Facebook.

Настроено ежедневное автообновление фидов с учетом новых позиций на сайте.

Создан XML-фид данных для Google Merchant.

Черная пятница и кибер понедельник

Своеобразным челенджем для команды «Красного хамелеона» стала подготовка сайта к распродаже в «Черную пятницу» и «Кибер-понедельник».

В кратчайшие сроки были сверстаны страницы для проведения акции и внедрен соответствующий функционал:

• вывод акционных товаров в слайдере на главной;

• правильный подсчет скидки при оформлении заказов;

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

Несмотря на слаженность работы команды и многократные тесты, не удалось избежать казусов. Что и не удивительно при таких сжатых сроках. В ходе акции уже на действующем сайте заметили, что на 50% скидки в «Черную пятницу» добавилась еще и скидка новичка. Ошибка была немедленно исправлена. И в целом сайт достойно выстоял непростое для коммерческих проектов время распродаж.

Выводы

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

Сейчас сайт обзавелся новым изящным оригинальным дизайном, работает быстро и без сбоев.

Наиболее сложным или, скорее, ответственным моментом для нашей команды в проекте GLOSSARY была и остается работа с функционалом, от которого зависит конверсия сайта – продажи.

Мы стараемся использовать максимум потенциала CMS, модулей и шаблона для создания по-настоящему комфортного, удобного и, конечно, продающего проекта.

Хотите, чтобы и Вашим проектом занимались настоящие профессионалы, звоните нам, обсудим все детали.