- Заказчик
- Titan Fittings - это Американская компания, которая производит гидравлические изделия под своим собственным брендом Titan и продает их офлайн и онлайн через свой интернет-магазин
- Задача
- 1. Перейти с Volusion CMS на CS-Cart платформу; 2. оптимизировать скорость загрузки сайта; 3. доработать функционал сайта; 4. обновить дизайн интернет-магазина.
Кратко о проекте
В 2023 году наш постоянный клиент доверил нам еще один свой проект под названием Titan Fittings. Это интернет-магазин, где продаются гидравлические изделия под собственным брендом Titan. Основные клиенты сайта жители США.
В данном интернет-магазине можно найти:
- 2000 категорий товаров
- 20 000 товаров
Интернет-магазин Titan fittings был создан на платформе Volusion CMS в 2014 году.
Основные проблемы, с которыми столкнулся клиент:
- Неудобная платформа CMS Volusion;
- Серьезные проблемы с настройкой Volusion из-за выросших потребностей бизнеса;
- Медленная работа поиска и фильтров на витрине;
- Иногда на сайте происходит сбой во время импорта и экспорта;
- Старый дизайн сайта, который необходимо обновить.
Выбор технологии
Использовать Lightning Commerce
- Next.js
- Tailwind
- Vercel
Lightning Commerce - это наше собственное решение, построенное на современной архитектуре Jamstack, что позволяет нам создавать очень быстрые, стабильные, легко масштабируемые интернет-магазины, которые сложно взломать.
Использовать CS-Cart только для панели администратора
CS-Cart CMS удобна для администрирования несколькими витринами интернет-магазинов. У данного клиента 4 интернет-магазина по продаже гидравлических изделий для промышленности. Также клиент уже знаком с данной CMS. Несмотря на богатый функционал CS-Cart платформы, у данной CMS есть проблемы со скоростью загрузки страниц на витрине. Мы приняли решение отделить витрину от админ-панели, витрину создали на Next js, а админ-панель взяли от CS-Cart.
Интеграции со сторонними сервисами
В результате работы мы получили настоящий модульный веб-сайт для интернет-магазина, который интегрирован со следующими сервисами:
- Meilisearch — невероятно быстрая поисковая система с открытым исходным кодом, которая улучшит процесс поиска.
- ShipStation — веб-решение для реализации доставки, которое оптимизирует процесс выполнения заказов для вашего онлайн-бизнеса. ShipStation объединяет заказы из более чем 70 каналов электронной коммерции.
Интересные "задачки" в процессе работы
1. Переход от Volusion к CS-Cart
Процесс перехода с одной системы управления контентом на другую всегда представляет собой задачу со скрытыми подводными камнями. На этот раз нам предстояло перенести данные клиента из системы Volusion на CS-Cart. Volusion CMS не дает доступ к хэшам паролей. Таким образом, пароли всех клиентов невозможно было перенести на новую систему управления контентом.
2. Разработка функции сверхбыстрого поиска на витрине
Очень медленный поиск был одной из главных проблем для клиента. Перед нами стояла задача улучшить скорость поиска до менее 3 мс.
3. Статическая генерация 20000 страниц товаров с их динамической регенерацией
Статические сайты загружаются быстро, и нашей целью было достичь максимальной производительности сайта, учитывая большое количество страниц товаров в магазине.
Результаты: Быстрый интернет-магазин с панелью администратора на CS-Cart
1. Проект, созданный с помощью Lightning Commerce
Мы запустили наш первый проект с использованием Lightning Commerce, который получился очень быстрым, супер безопасным и масштабируемым.
Старый сайт слишком медленно загружал страницы. Производительность мобильной версии всегда находилась в красной зоне на Google Page Speed.
А новый веб-сайт работает быстро, производительность на мобильных устройствах и планшетах находится в зеленой зоне.
2. Успешный переход с Volusion на CS-Cart
Разработчики Alt-team перенесли из системы Volusion на CS-Cart все данные о:
- клиентах;
- заказах.
Заказчик самостоятельно перенес информацию о товарах и категориях товаров, используя функцию импорта/экспорта CS-Cart, поскольку заказчик решил изменить категории всех товаров в своем новом интернет-магазине.
3. Перенос данных сайта – 301 редирект
Все URL-адреса на старом веб-сайте (на Volusion) имели формат .html.
Заказчик решил создать новую структуру категорий товаров и всех URL-адресов сайта.
Нашей задачей было правильно настроить 301 редирект. Большое количество редиректов было настроено на сервере Vercel для сокращения времени загрузки страниц.
По многим причинам некоторые 301 редиректы были настроены с помощью стандартной функции CS-Cart в панели администратора.
4. Статический сайт с регенерацией динамических страниц
Быстрая загрузка страниц и удобство пользователя являются важными составляющими работы крупных интернет-магазинов.
Трафик сайта данного интернет-магазина постоянно растет. Мы использовали ISR (инкрементная статическая регенерация) для страниц с контентом и CSR (клиентская обработка) для страниц оформления и оплаты заказов. Эти методы позволяют нам обновлять контент без необходимости перемещения на другую страницу, что приводит к улучшению производительности и безопасности, а также к сокращению времени на генерацию.
5. Мгновенный поиск по товарам — менее 3 мс
В данном интернет-магазине поиск по сайту осуществляется мгновенно. Вряд ли вы сможете найти другие магазины с такой быстрой функцией поиска или сортировки/фильтрации.
Поиск по сайту – одно из слабых мест любого интернет-магазина. Медленный поиск, сортировка или фильтрация характеристик товаров обычно являются причинами высокого показателя отказов в магазине.
Мы использовали интеграцию с сервисом Meilisearch, чтобы увеличить скорость поиска на сайте данного заказчика.
Также мы использовали наше решение Lightning Commerce, чтобы улучшить функции сортировки и фильтрации товаров на сайте.
6. Интеграция с ShipStation
На сайте заказчика использовался сторонний модуль для CS-Cart, приобретенный на маркетплейсе, но этот модуль пришлось доработать под требования заказчика. И нашей задачей было переписать почти весь код модуля, чтобы сделать его совместимым с CS-Cart.
7. Архитектура AWS
Шаг 1
Когда мы сделали фронтенд на NextJS и отделили его от CS-Cart, это значительно улучшило скорость загрузки страниц на витрине. Бэкенд на CS-Cart работал стабильно, и мы могли остановиться и больше не оптимизировать скорость сайта, так как он и так был быстрым. Но мы решили сделать полностью отказоустойчивую систему, чтобы работа сайта в административной панели не нарушалась при большом количестве заказов в период высокого спроса.
Шаг 2.
Мы настроили хостинг Amazon, который автоматически масштабируется для бэкенда CS-Cart, чтобы обеспечить высокую доступность сайта при высоких нагрузках на бэкенд.
Если загрузка CS-Cart превышает 10%, для обработки запросов мгновенно добавляется дополнительный сервер. Эта архитектура AWS делает систему отказоустойчивой и гарантирует, что она никогда не выйдет из строя из-за высокого трафика или большого количества заказов.
Общий результат:
В итоге мы сделали очень быстрый интернет-магазин, где совсем не заметен переход от одной страницы к другой, благодаря нашему Lightning Commerce решению. Это позволило достичь почти 100% результатов на Google PageSpeed на десктопах. Скорость на мобильных тоже вначале была в зеленой зоне, но после того, как клиент установил на сайт код Google TagManager и всевозможные дополнительные теги пикселей, скорость на мобильных немного замедлилась.
Также с помощью интеграции с Meilisearch нам удалось сделать моментальный поиск по товарам в интернет-магазине.
Мы сделали модульный сайт, где витрина отделена от административной панели, и "админка" CS-Cart работает быстро при любой нагрузке. Данный интернет-магазин очень сложно взломать. Даже при высоком трафике в период распродаж сайт будет стабильно работать.
Мы рады и вам создать подобный интернет-магазин, пишите нам:
- Почта: manager@alt-team.com
- vk.com/club55883111
- Telegram: @alt_team