Всем привет!
Довольно длительное время всем, кто спрашивал про ShopModxBox, я говорил, что пока не стоит на него тратить время, потому что все это очень сложно, а у меня почти нет времени на информационную поддержку. Но сегодня все меняется :) Новая версия уже гораздо ближе к массам и теперь кастомизировать внешнее оформление и логику стало гораздо проще и ниже по тексту я покажу как.
Тут сразу оговорюсь, что в современной веб-разработке понятие проще - очень-очень относительное. В целом веб стал очень сложный со всеми его зависимостями и т.п. Кто с этим уже столкнулся, со мной согласятся. А кто не столкнулся, советую все-таки столкнуться, потому что велик риск того, что вы застряли в прошлом и скоро можете остаться не у дел (просто сравните средние зарплаты для php- и JS/Go/Rust- разработчиков). То есть данная версия стала значительно легче по сравнению с предыдущей версией, так как я достаточно много точек для кастомизации заложил, но если вы с JS+WebPack не работали, то конечно же будет очень сложно все.
В шапке увидите переключатель Тестовый магазин. Пощелкайте его и, что называется, найдите 10 отличий :)
Ну, на самом деле отличий не так уж и много (чуть-чуть шапка, миникорзина и конечная страница товара), но это все потому что мне лень было сильно переверстывать эти блоки. На самом же деле полностью переопределяются эти блоки, так что оформление можно изменить полностью. Ну а смена скина без какой-либо запросов на сервер и т.п., согласитесь - весьма интересная.
Ну а теперь разберем более предметно как это работает...
Для удобства, чтобы проще было разбираться в коде, свой демо-магазин я вынес в отдельную ветку test https://github.com/MODX-Club/ShopModxBox/commits/test
В нее я буду коммитить кастомные изменения, которые не попадут в основную ветку (на то они и кастомные), но тем не менее помогут отделить эти самые кастомные изменения от основной ветки, чтобы было понятней где что менять, чтобы получить эффект, так как иначе проект очень объемный и можно слишком долго в нем разбираться.
Первое, с чего стоит начать, это с разбора вот этого коммита, а именно переопределенного класса AppMain. Тут же уточню, что этот класс находится в компоненте app/modules/Site. Этот компонент специально заложен для своих кастомных доработок и является частью сборки-заготовки ShopModxBox. Называю ShopModxBox заготовкой, потому что она не рассчитана на дальнейшее обновление полностью, после того как вы в ней уже что-то свое сделали. Обновляются только отдельные модули, но нельзя просто так взять и обновить весь ShopModxBox. Говорю это для тех, кто еще не в курсе, на всякий случай. Так вот, в модуле Site мы и будем всякие свои хотелки реализовывать, а вот другие базовый компоненты типа shopmodx-react, modx-react, react-cms и т.п. трогать нельзя (и вообще они в node_modules находятся), но зато их можно будет в дальнейшем легко обновлять через npm и получать новые функции для магазина.
Итак, наш AppMain расширяет другой AppMain, только из компонента shopmodx-react, который, в свою очередь, расширяет самый главный класс App из компонента react-cms. В этом нет ничего удивительного, react-cms - это в целом заготовка под веб-проекты, shopmodx-react добавляет методы работы с корзиной, ну а Site, как я и говорил, добавляет какие-то кастомный плюшки. В нашем случае это логический флаг isDemo (определяющий отдавать кастомный скин или оригинальный) и метод toggleIsDemo (переключающий этот флаг), а так же подключает переопределенный класс Renderer (это, по сути, самая главная точка в шаблонизации) и переопределенный класс корзины Basket. Здесь обратите внимание на то, что isDemo и toggleIsDemo отдаются через метод getChildContext. Это позволяет получить доступ к этим переменным во всех дочерних компонентах, стоит только в них объявить эти переменные в специальных свойствах contextTypes, как это сделано, к примеру, в кастомном компоненте Header, вызываемом в кастомном компоненте Renderer.
Давайте еще раз разберем эту цепочку: AppMain подключает переопределенный класс Renderer, в котором подключается переопределенный класс Header, в котором уже выводится переключатель скина, и в зависимости от скина отдается оригинальная шапка или измененная.
Очень внимательно изучите класс Header и его метод render. Если вам все будет понятно как и что там работает, то можно будет двигаться дальше. Если нет, то нет.
На сегодня, думаю, достаточно. Если кто освоит это и захочет идти дальше, пишите комментарии, буду отвечать, а объемные моменты буду выносить в новые топики.
Если кому-то интересно посмотреть более комплексный пример реализации, то можете посмотреть вот это: https://happybaby2000.ru/
За внешний вид сайта прошу строго не судить, Фабрика Сайтов, наверно, лучше ничего и не могла после себя оставить, но теперь это работает на shopModx. Многое из этого проекта попало в обновленную сборку ShopModxBox и довольно хорошо показало себя в плане кастомизации. Примечателен вот какой момент: если попробовать добавить товар в корзину, то многие сразу узнают shopkeeper. Да, изначально магазин работал на шопкипере, но для внедрения нового функционала было решено внедрить shopModx. Но так как не хотелось что-то придумывать с оформлением (то есть обновлять оформление надо, но полностью, а не частично), то было решено использовать JS-скрипты и верстку шопкипера, подтянув их в сборщик shopModx. В итоге очень даже срослось. То есть верстка шопкипера, но обратотчики все и логика - shopModx. Вот таки дела...
P.S.: скачать сборку можно по этой ссылке: https://shopmodx.ru/assets/v4.shopmodxbox.tar.gz Там 400+ метров, потому что сразу со всей папкой node_modules. Так надежней, потому что зависимостей очень много и велик шанс, что установится какой-нибудь не тот пакет (версия не так) и фронт просто не соберется. К примеру, вот бага в graphql из-за которой продакт-версия не работает и из-за которой много кто пока вынужденно откатились до graphql-11+ (и это при том, что уже 12.3 версия). Так что лучше так качайте, и лучше на ubuntu-17 (хотя можно пробовать и на более ранние версии, но не гарантирую).
Запуск фронта выполняется командой npm start. Для запуска в боевом режиме переключаемся в прод-ветку git checkout prod, выполняем сборку npm run build, после чего npm run start:prod. Если кто прод-победит и форевер надо будет запустить, спрашивайте, я скажу как, там тоже все это заложено.
Если кто-то ставил предыдущую версию сборки (4.1.0) и хотите обновиться, то обновляйте MODX-пакеты shopmodx и modxsite, сливайте с гита во фронт упомянутую папку Site, обновляйте через npm пакеты react-cms@1.5.5 (не 1.6.0+, во всяком случае пока вышеупомянутая бага с графом не будет закрыта) и shopmodx-react.