Loewe Showroom

#js #front #tree.js #webpack

https://showroom.loewe.tv

О проекте

Небольшой проект немецкой компании, которая занимается производство Телевизионной техники. Имелся основной сайт и отдельный сайт для Showroom. Эта такая 3D комната, по которой можно перемещаться по определенным точкам, а так же смотреть в 360. Все это было реализовано на движке Tree.js.

Сама комната была отдельным модулем. Вторым модулем являлся небольшой next.js сервер. Его задача была отдавать главную страничку и страничку карточек товаров. Дело в том, что в движке комнаты было мало верстки и она осуществлялась по средству js, а основная верстка была на сервере, которая получалась через Iframe.

Сам сервер состоял не только из node.js, но React библеотеки. Она осуществляла рендер контента.

Задача

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

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

Решение

Мне было выдано три репозитория. Я ознакомился с каждым из них. Один не использовался. Другой был сервером, а третий собственно являлся движком Shoowroom. Код был довольно не простой, но постепенно удалось в нем разобраться и понять, что куда к чему. До это была уже реализована админка и мне требовалось подтянуть данные из API.

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

Я понял, что для этой реализации сервер с React-ом довольно нагроможденный стек, плюс к тому не хотелось разбираться в массиве, который делал просту задачу, довольно сложным способом. Я решил это быстро переделать и переверстать. Думал подключить простую Vue в библиотечной версии, но для такого простого фронтенда решил, что хватит и jQuery.

Более того, я предложил объединить реализацию данной структуры из трех составляющих в одну. 1.Сервер для комнаты 2.Комната 3.Сервер API - все это перешло в один репозиторий Симфони, на котором был написан бэкенд.

Так и поступили, количество репозиториев уменьшилось до одного. Но мне пришлось переверстать серверную часть а так перестроить билд 3D комнаты.

В итоге все было удачно пристыковано.

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

Posted in 2021, frontend, interesting, js, node.js on Jul 16, 2021.