Тема интернет-магазина - handyShop v1

Прошли новогодние праздники, а за ними пришел выход темы HandyShop.

HandyShop — готовая тема для интернет магазина или каталога на основе miniShop2. Основана на мини-движке magicThemes и позволяет создать сайт без глубокого погружения в программирование на MODX Revolution.
Тема достаточно универсальная и может подойти практически для любой области, где не нужен сложный функционал. Ниже распишу возможности с перечнем допустимого.

Сейчас вы можете визуально посмотреть на демо-сайте все что есть.

Тема будет развиваться и совершенствоваться. Обратная связь приветствуется по любому вопросу связанного с этим пакетом.

Навыки необходимые для работы с темой не велики. Необходимо немного знать css + html + сетку bootstrap 4 (flex). Вы как минимум должны немного знать о MODX.
Установку и настройку в этой статье затрагивать не буду, она есть в документации.

Опишу лишь некоторые моменты и интересные фишки.
• Тема поддерживает недавно-вышедшую версию minishop2 4.х.
• Есть возможность перегенерировать фото минишопа в админке сайта.

В меню MagicThemes появляется после установки. Пакеты -> MagicThemes -> перегенерировать. По умолчанию — 1 шаг это 1 товар. Решил сделать по-товарно.
Число в поле шага не указывайте сильно большим. Ориентируйтесь на свой сервер тк перегенерация фотографий на некоторых хостингах ресурсоемкая задача. Вот к примеру у меня 14 товаров — это 39 фотографий обработались за 25 сек. Скрипт выводит время начала и окончания. И сколько затрачено времени на 1 товар. Если перегенерация прервется (закроется браузер, например), не беда, просто нажмите кнопку еще раз и скрипт продолжит с места остановки. Итерация хранится в сессии.

• Для списка товаров есть возможность настроить визуальное отображение опцций товаров для каждой категории, как информацию или как возможность выбора в корзину (цвет, размер и т.п.)
Цвет в данном случае использует новый тип поля для минишопа, который планируется вскоре внедрить.


• Для страницы товара возможность вывести важные опции выше кнопки в корзину, остальные опции выводятся в характеристиках (все заполненные опции), области Описание — описание товара и Характеристики.
• Для категории с товарами предусмотрено: Картинка категории, вид обрезки фото.
• Предусмотрен шаблон Новостей или статей. Можно настроить и как Описание акций и т.п.
• Предусмотрен обычный шаблон для создания простых текстовых страниц. (доставка, договор, и прочее)
• Предусмотрен шаблон для контактов. Там выводятся Штуки: контакты, форма обратной связи, карта, текст.
• Шаблон результатов поиска или фильтрации по опциям товара. Поиск простой — по прямому совпадению. А фильтрация настраивается в админке.
Последнее дает возможность быстро настраивать СЕО страницы под определенные параметры товаров. Этакий мини-сео-ресурс на подобии знаменитого пакета.


ТВ опции для выбора – просто выбираете опция-параметр. + можно комбинировать. Выбираете параметр с нужными значениями. Помеченные галочкой товары так же сузят диапазон.
Тип документа у создаваемого ресурса может быть обычный документ. Он не привязан к категориям, я бы даже посоветовал не делать его категориями минишопа, чтобы потом не путаться.

Еще момент небольшой:

Тема не поддерживает MODX 3.x, поэтому пока ставится на 2.х

Идем далее.
Пример вкладки настроек в теме:

• Можно менять цветовую схему всего сайта сразу, а так же отдельных частей сайта. Т.е. скорректировать под свой цвет бренда.
• Возможность менять шрифт, размер на всем сайте.
• Можно поменять оформление некоторых элементов уже в самой Штуковине и разрешение миниатюр, что придаст уникальности дизайну. Часто в сборках нет этой возможности, как и других мелочей, которые облегчают жизнь пользователя.
• Можно добавлять блоки, менять местами, например делать 3х колоночный сайт.
• Слайдер имеет минимальный набор настроек для упрощения создания комерческого предложения.

Сам функционал настроек принадлежит magicThemes. Области и Штуки — его сущности.

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

Логика работы темы, да и самой «magicThemezzации».
У страницы есть шаблон. Стандартно.
У к шаблону привязываются области в которых есть ячейки (как минимум 1 ячейка).
А к каждой ячейке области можно привязывать от 0 до бесконечности Штуковин.
Таким образом можно расширять функционал и визуальное отображение всего сайта.

Штуковины в теме выводят данные, по сути это мини-чанки с настройками. Поэтому что заложено в эту штуку, то и будет работать. Разберем на примере Штуки, у которой подключается файловый чанк shop/product-list-def.tpl. где shop – папка в теме, product-list-def.tpl – файловый чанк на fenom. Нажмем на иконку – редактировать.
Вкладка Сниппет – настройки снипета внутри чанка. Тут сугубо настройки и конфигурации для сниппета. Можно добавлять дополнительные параметры для снипета, если это необходимо. Логика такая. У нас вывод на главной странице, значит нам не нужна пагинация, нам нужно ограничить кол-во до 4х, и выбрать из товаров только Новинки, и выбрать родителя категории, чтобы система знала id каталога.

А вот если нам нужна была бы пагинация, например как на странице списков товаров в категории, то тут можно выбрать подходящий вид из 3х имеющихся вариантов – стандартная, по кнопке, скролл.

Переходим в следующую вкладку ОБЩИЕ.

Фоновое изображение – список их берется из настроек темы (handyshop_fonyimg)
Обернуть в контейнер – указывает необходимо ли оборачивать блок в связку с ограничением по ширине (width). Для ограничения используется класс container. Если выбрать НЕТ, то контент займет все пространство.
Количество в ряду – выбираете кол-во товаров в 1 ряду для ПК версии. Для мобильной расчитывается автоматически и как правило это 1 шт.
Текст заголовока у блока и Оформление заголовка – Если заполнен текст, то выводится заголовок этого блока с указанным оформлением.
Изображение обрезать? – Указывает логику работы обрезания главного фото для всех миниатюр вывода, если это необходимо.
В низу для ссылки id – id или ссылка на необходимую страницу. Ставится в ручную. Если пуста, то не выводиться.
Отображение параметров в товаре – Включить или выключить отображение указаных в категории товара опций для этого блока с товарами. Например, избавить вывод от лишней информации.
Режим фотографий – интересная настройка, она же есть в выводе одного товара. Определяет какую миниатюру фото брать первой. Обычно они различаются разрешениями, но есть момент.
A) Генерировать по факту: Можно выбрать вариант генерации по image файлу товара, в этом случае вам не нужно конфигурировать источник файлов для minishop, а разрешение генерации вы можете выбрать сразу в параметре Размер изображения 12х23 в px.
Б) Сгенерированное фото ms2: Второй вариант предполагает, что вы сконфигурировали медиаисточник для минишопа и перегенерировали превьюшки всех товаров (входит в комплект поставки темы, генерация в ручную). В этом случае вы можете вписать название миниатюры в поле и оно подхватиться в msProduct. Настройка источника конфига, в котором есть List и medium варианты генерации.

list – Для списков товаров 200х200
medium – для страницы товара 480px.

{"small":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000"}, 
"webp":{"w":120,"h":90,"q":90,"zc":"1","bg":"000000","f":"webp"}, 
"list":{"w":200,"h":200,"q":75,"zc":"0","far":0}, 
"medium":{"w":480,"h":480,"q":75,"zc":"0","far":0}}

Размер изобр: 12x23 в px — настройка отвечает за размер генерируемого фото в случае с генерацией по факту.

Вкладка СТИЛИЗАЦИЯ.
Тут можно поиграться с оформлением элемента товара. Выравнивание блоков, заголовка, размер и цвет шрифта, цвет фона целого блока. Тут по сути настройки для css стилей, которые заложены в чанке. Добавление новой настройки не даст нужного эффекта, тут понадобятся навыки css и fenom. Но об этом в отдельной статье про создание тем на MT.

Если вам не нужна корзина, то вы просто не создаете страницы корзин, выключаете в штуковине header
panel.tpl мини-корзину и сохраняете. Все достаточно просто, но нужно немного изучить.

В теме заложена работа с опциями. В TV можно вписать дополнительные свойства.
А вообще расширение функционала обычное, тк все написано на Fenom. И можно по аналогии скопировать штуковину в другую папку (свою) и произвести свои манипуляции по расширению функционала и подключить свою штуку в нужное место. ;)

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

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

А впереди еще много улучшений и изменений в удобстве использования этой темы и смежных инструментов помогающих комфортно использовать систему MODX в развитии сайтостроения.

Пакет-тема handyShop c платной поддержкой и до конца января 2023 будет доступна с 50% скидкой на modstore

Посмотреть тему тут

Обновление до alpha2 18/01/2023 исправлены ошибки, внедрены новые возможности.