Интеграция AngularJs в Magento

Интеграция AngularJs в Magento

AngularJs один из самых мощных JavaScript MVC фреймворков в основном предназначен для разработки одностраничных приложений Single Page Application не часто используется в интернет магазинах, ввиду того, что те редко меняют бизнес логику, но есть случаи когда это сделать необходимо.

Magento которая становится или скорее всего стала прогрессивной платформой веб-приложений (Progressive Web Application platform. – PWA) не представляет собой одностраничное приложение, хотя некоторые части – страницы, которые могут иметь свое поведение, а так же динамический контент, который должен быстро изменятся и соответственно так же реагировать на действия пользователя, может представлять собой отдельный модуль или приложение состоящее из определенного стека технологий.

Проект который мы реализовали в 2016 году на платформе Magento, представляет собой сервис заказа еды, где большинство операций: выбор товара, выбор опций (которых может быть достаточно много и между опциями могут быть зависимости), вход, регистрация, оформление заказа, происходят на одной странице.

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

Мы полностью переработали фронт-енд часть, убрали Prototype который идет в базовой версии Magento , а так же jQuery. Вся JS часть реализована только на AngularJs с примесями некоторых библиотек типа Modernizr

 

Зачем мы интегрировали AngularJs в интернет магазин на Magento?

Основная функция интернет магазина это продавать, кнопка купить и все что рядом с ней, я имею ввиду элементы, которые непосредственно участвуют в принятии решения о покупке товара, а так же участвуют в самом выборе товара. В сервисе заказа еды первый из основных элементов это сам товар у которого есть достаточно большое количество опций, например для пиццы их может быть больше 50-ти, а так же есть особенности, которые характерны только для этого сервиса например, выбери это в количестве Х и получи бесплатно что-то в количестве Y, а так же выбери А и ты сможешь выбрать B – зависимые друг от друга опции с разными ценами и разными элементами выбора: да/нет, список, или/или

При наличии такого обильного количества элементов, которые должны быстро реагировать на действия пользователя и при этом все это происходит на одной странице мы приняли решение реализовать на Angular

 

Преимущества от реализации

Гибкость в управлении элементами. Изначально продуманная архитектура приложения позволит в будущем быстро вносить изменения в фронт часть, что позволит сократить время на разработку и поддержку.

Скорость. Увеличение трафика, возможность принимать больше заказов, напрямую влияет на увеличение профита. Особенно если это сервис доставки еды. Когда все должно быть понятно-просто, быстро и без лишних переходов по страницам, иначе мы рискуем остаться без клиента, который приходит к нам в основном в обеденные часы или вечером.

Связывание frontend & backend через RESTful API. Учитывая особенность Angular в связывании данных, сервис $scope который следит за изменениями в модели, отразит изменения в HTML разделе достаточно быстро, которые приходят в фронт часть, через API

 

Должны ли вы выбрать аналогичное решение с использованием этой или другой технологий

Ответ да, если:

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

Отвечает ли ваше приложение или интернет магазин основной идее PWA (Progressive Web Application platform)

  • Легко реагирующий, отзывчивый – Responsive
  • Хороший пользовательский интерфейс, даже при низком уровне подключения к сети интернет
  • Обновление контента происходит только, через сервисных работников/сервисной службы
  • Есть приложение для мобильных устройств
  • Хорошо индексируется поисковыми машинами
  • Статический контент доступен в автономном режиме, на случай отсутствия сети интернет

 

eCommerce/Magento Developer, PHP architect, based in Ukraine