NovMac.com онлайн магазин за Apple продукти

NovMac.com е онлайн магазин на едноименния официален риселър на Apple продукти, услуга на Екзисто ООД.  В него всеки един потребител може да избере индивидуална конфигурация за своя нов Mac, както и да се възползва от възможностите за отстъпки и промоции за студенти, преподаватели и лоялни клиенти и не на последно място да кандидатства за онлайн кредит, с който да закупи избраните от него продукти.

С развитието на мобилните технологии и нарастването на потребителския трафик от мобилни устройства, възникна нуждата да се проектира, разработи и внедри ново поколение онлайн ecommerce платформа, отговаряща на динамично променящата се среда.

Сред резултатите, които си бяхме поставили като цел бяха:

  • Да отговорим на mobile-first подхода (особено в контекста на mobile-first индексирането, въведено от Google през 2018 година)
  • Да осигурим бързо зареждане на уеб сайта, дори и при наличието на слаба интернет връзка, което от своя страна ще окаже положително влияние на класирането му в резултатите на водещите интернет търсачки.
  • Да създадем универсален онлайн магазин, лесен и удобен за използване от всички устройства и операционни системи (Android, iOS, Windows и macOS)
  • Да осигурим надеждност и сигурност на платформата, отделяйки фронтенда от бекенда, което намаля риска от нежелани усложнения в ключови процеси при работата на потребителя със сайта

След обширно проучване на вариантите за подбор на технологии, които да използваме, се спряхме на:

  • VueJS (често наричан просто Vue) е модерен Model-View-ViewModel JavaScript фреймуърк с отворен код, предназначен за изграждане на потребителски интерфейси и single-page приложения, който към днешна дата набира все по-голяма популярност сред уеб разработчиците.
  • Lumen – зашеметяващо бърз PHP фреймуърк, написан от създателите на Laravel, предназначен за разработка на уеб базирани APIs.
  • Elastic Search – най-популярната база данни за full-text търсене, която избрахме да съхранява в структуриран вид цялата информация, необходима за функционирането на продуктовия каталог.
  • PWA (Progressive Web App) – уеб технология, носеща със себе си безброй предимства, сред които мултиплатформеност, responsive дизайн, offline подръжка, push notifications и други.

Разглеждайки редица готови решения, базирани на изброените технологии, открихме, че Vue Storefront е платформата, която пасва идеално на нашите нужди и в крайна сметка се спряхме на нея.

Vue Storefront e production-ready PWA (Progressive Web App), който може лесно да бъде интегриран и синхронизиран с много от популярните e-commerce платформи, включително Magento и shopware.

Едно от най-значимите нововъведения на уеб сайта е, че той може да работи дори и офлайн, без наличието на интернет връзка:

  • За кеширането на статичните ресурси (изображения, CSS и JavaScript) в Service worker използваме sw-precache плъгина.
  • Данните от сайта и продуктовия каталог съхраняваме в IndexedDB и Local Storage. Освен това, веднъж щом потребителят е прегледал дадена продуктова категория, ние извличаме предварително цялата информация за нея и от този момент нататък тя остава достъпна дори и устройството да няма връзка с интернет.
  • Част от кешираната информация показваме на потребителя, дори когато е онлайн – това олекотява значително мрежовия трафик, необходим за зареждането на уеб сайта и е една от причините NovMac да работи толкова бързо.
  • Ако потребител на сайта изпрати поръчка без наличието на интернет връзка, поръчката се записва в опашка за изпълнение и бива изпратена веднага щом интернет връзката се възобнови.
Завършването на поръчка е възможно дори и офлайн.

Резултатите от стартирането на новата платформа през април тази година не закъсняха. PWA имплементацията повлия положително на класирането на уеб сайта в класациите на интернет търсачките, а средната скорост на зареждане се вдигна с между 20 и 30%, което от своя страна значително подобри потребителския престой в сайта.

Нуждаете се от нова платформа за онлайн магазин, отговаряща на динамично развиващата се уеб среда? Не се колебайте, а ни изпратете запитване за оферта за подобен проект.