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 комнаты.

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

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

Exception

Error

We're sorry, but an unhandled error occurred. Please see the details below.

file_put_contents(/home/admin/web/alex.dzen-code.ru/public_html/storage/framework/cache/11/de/11de31e1eabb2682cf62ee9c9ccb0630f1019006): failed to open stream: Permission denied

/home/admin/web/alex.dzen-code.ru/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php line 122

     * @param  string  $contents
     * @param  bool  $lock
     * @return int
     */
    public function put($path, $contents, $lock = false)
    {
        return file_put_contents($path, $contents, $lock ? LOCK_EX : 0);
    }
 
    /**
     * Prepend to a file.
     *
     * @param  string  $path

Stack trace

# Called Code Document Line
30 file_put_contents(…) ~/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php 122
29 Illuminate\Filesystem\Filesystem->put(…) ~/vendor/october/rain/src/Filesystem/Filesystem.php 217
28 October\Rain\Filesystem\Filesystem->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/FileStore.php 65
27 Illuminate\Cache\FileStore->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/Repository.php 191
26 Illuminate\Cache\Repository->put(…) ~/vendor/october/rain/src/Halcyon/MemoryRepository.php 61
25 October\Rain\Halcyon\MemoryRepository->put(…) ~/vendor/laravel/framework/src/Illuminate/Cache/Repository.php 323
24 Illuminate\Cache\Repository->remember(…) ~/vendor/laravel/framework/src/Illuminate/Cache/CacheManager.php 304
23 Illuminate\Cache\CacheManager->__call(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 158
22 October\Rain\Database\QueryBuilder->getCached(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 121
21 October\Rain\Database\QueryBuilder->getDuplicateCached(…) ~/vendor/october/rain/src/Database/QueryBuilder.php 92
20 October\Rain\Database\QueryBuilder->get(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php 481
19 Illuminate\Database\Eloquent\Builder->getModels(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Builder.php 465
18 Illuminate\Database\Eloquent\Builder->get(…) ~/vendor/laravel/framework/src/Illuminate/Database/Concerns/BuildsQueries.php 77
17 Illuminate\Database\Eloquent\Builder->first() ~/modules/system/behaviors/SettingsModel.php 114
16 System\Behaviors\SettingsModel->getSettingsRecord() ~/modules/system/behaviors/SettingsModel.php 76
15 System\Behaviors\SettingsModel->instance() ~/modules/system/behaviors/SettingsModel.php 135
14 System\Behaviors\SettingsModel->get(…)
13 call_user_func_array(…) ~/vendor/october/rain/src/Extension/ExtendableTrait.php 414
12 October\Rain\Database\Model->extendableCall(…) ~/vendor/october/rain/src/Database/Model.php 647
11 October\Rain\Database\Model->__call(…) ~/vendor/laravel/framework/src/Illuminate/Database/Eloquent/Model.php 1489
10 Illuminate\Database\Eloquent\Model::__callStatic(…) ~/modules/system/models/EventLog.php 37
9 System\Models\EventLog::useLogging() ~/modules/system/ServiceProvider.php 286
8 System\ServiceProvider->System\{closure}(…)
7 call_user_func_array(…) ~/vendor/october/rain/src/Events/Dispatcher.php 233
6 October\Rain\Events\Dispatcher->dispatch(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 295
5 Illuminate\Log\Writer->fireLogEvent(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 201
4 Illuminate\Log\Writer->writeLog(…) ~/vendor/laravel/framework/src/Illuminate/Log/Writer.php 114
3 Illuminate\Log\Writer->error(…) ~/vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php 221
2 Illuminate\Support\Facades\Facade::__callStatic(…) ~/vendor/october/rain/src/Foundation/Exception/Handler.php 66
1 October\Rain\Foundation\Exception\Handler->report(…) ~/vendor/laravel/framework/src/Illuminate/Foundation/Bootstrap/HandleExceptions.php 81
0 Illuminate\Foundation\Bootstrap\HandleExceptions->handleException(…)