Главная » Хабрахабр » Shopkeeper 4.0 — Интернет-магазин на Symfony + Angular + MongoDB

Shopkeeper 4.0 — Интернет-магазин на Symfony + Angular + MongoDB

История

Немного предыстории. Первая версия Shopkeeper вышла в 2009 году. Тогда это был модуль для CMS MODX, а точнее для первой его ветки, которая сейчас называется Evolution. В то время у MODX был всего один подобный модуль, но его качество меня не устраивало, поэтому я решил написать свой. Плюс нужен был какой-то проект для наращивания опыта в программировании на PHP. Т.к. конкуренции почти не было, мой компонент стал самым популярным для той версии MODX.

Страшная картинка

Сначала Shopkeeper это был только компонент для создания корзины товаров и управления заказами. Позже добавился функционал для управления каталогом (создание и редактирование товаров и т.п.).

Для него я тоже разработал новую версию своего компонента. Позднее вышел MODX Revolution.

Так выглядел интерфейс управления заказами Shopkeeper 2.0

Затем я немного отошел от разработки на MODX и углубился во Front-end разработку. В основном в то время я работал на AngularJS 1.x. Когда пришло время обновить свой компонент для создания интернет-магазина, я принял решение разрабатывать его на AngularJS.

Shopkeeper 3.0

3.2.7-pl3 — Последняя на данный момент версия Shopkeeper из ветки 3.x.

0+ и MongoDB, поэтому новую версию SHK я разрабатываю с использованием этих инструментов. На основной работе я часто использую Symfony, Angular 2.

Обзор возможностей

Shopkeeper 4.0 — это не просто компонент для CMS, это самостоятельный движок. Данное приложение я стараюсь сделать максимально простым, но в то же время гибким. Планируется возможность интеграции с другими CMS. В первую очередь будет сделана интеграция для MODX Revolution. Я считаю, что нет смысла создавать узкоспециализированный компонент для одной CMS. Ведь всё равно приходится реализовывать не только корзину товаров, но ещё и управление каталогом и т.д. Нужно стараться создавать приложения максимально универсальными.

0 находится в разработке, недавно вышла бета-версия. На данный момент Shopkeeper 4. Уже реализованы почти все основные возможности, которые были запланированы, но есть мелкие недоработки, а так же планирую добавить больше Ajax.

Возможности:

Для каждого поля можно выбрать тип ввода и вывода (как в MODX).
— Товары можно сохранять в разные коллекции (таблицы) базы данных MongoDB.
— Управление пользователями для администратора.
— Управление заказами для администратора.
— Интерфейс для управления валютами, способами доставки, способами оплаты товаров и т.д.
— Для покупателя есть личный кабинет, где он может отслеживать статус заказа и редактировать свои контактные данные.
— Вывод товаров с возможностью фильтрации по параметрам.
— Параметры товаров, которые могут влиять на цену.
— Шаблон с отзывчивой версткой с использованием Bootstrap 4.
… другое. — Можно создавать разные типы товаров с разными наборами параметров (полями).

Но его реализация мне лично не очень понравилась. Да, я знаю, что на Symfony уже есть как минимум один движок для создания интернет-магазина — Sylius. Например, там нет Angular, TypeScript и MongoDB, а для меня это важно. Я думаю, что вы сразу увидите разницу в подходе.

Техническая информация

В свойствах типа контента можно добавить поле и выбрать тип ввода и тип вывода для этого поля. Есть интерфейс для создания своих типов ввода и вывода.

Данные полей товаров в шаблоне сайта можно выводить несколькими способами.

Вывод сырых данных:

<span class="text-secondary">
}
</span>

Вывод данных с использованием шаблона типа вывода:

{{ renderOutputTypeField(currentPage, fields, 'price') | raw }}

Аргументы:

Массив со всеми данными страницы.
2. 1. Системное имя поля. Массив с данными полей типа контента.
3.

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

Вывод данных поля по названию чанка:

{{ renderOutputTypeChunk(currentPage, fields, 'price') | raw }}

Чанк — понятие взято из MODX. Здесь чанк используется не только как название шаблона, но так же как метка для поиска нужных полей. Например, по этой метке определяется из какого поля нужно брать цену товара при добавлении в корзину.

Вывод всех полей, в свойствах которых включен флажок «Показывать в списке».

{{ renderOutputTypeArray(currentPage, fields, 'prefix_') | raw }}

Для удобства сделано много Twig-функций. Например, так выводится меню категорий каталога:

{{ categoriesTree(0, 'menu_dropdown', null, true) }}

Здесь 4-й аргумент отвечает за управление кэшированием (по умолчанию выключено).

Но при этом есть возможность отмечать текущий пункт меню. Если включено кэширование, то весь HTML код меню будет сохранен в файле. Более подробно в документации.

Так в шаблоне выводится корзина товаров:

{{ shopCart('shop_cart_edit', 'shop_cart_edit_empty') }}

Здесь первый параметр — название шаблона, второй — название шаблона пустой корзины (указывать не обязательно).

Так выглядит код шаблона простой корзины, где выводится только число выбранных товаров и общая цена:

<div class="shop-cart-bottom"> <div class="shop-cart-bottom-b"> <div class="container"> <div class="float-md-left"> {{ 'Selected' | trans }}: <span class="badge badge-pill badge-light big mx-2"> {{ countTotal }} </span> {{ 'product with a total cost|products with a total cost' | transchoice(countTotal) }} <span class="badge badge-light big mx-2"> {{ priceTotal | price }} </span> {{ currency }} </div> <div class="float-md-right mt-3 mt-md-0"> <a class="btn btn-outline-light" href="{{ path('shop_cart_edit') }}"> {{ 'Proceed to checkout' | trans }} </a> <a class="btn btn-outline-light ml-1" href="{{ path('shop_cart_clear') }}" data-toggle="tooltip" data-placement="top" title="{{ 'Empty cart' | trans }}"> <i class="icon-cross"></i> </a> </div> <div class="clearfix"></div> </div> </div>
</div>

Для автоматического изменения размеров изображений используется LiipImagineBundle. Пример вывода изображения товара:

<img src="{{ imageUrl(data) | imagine_filter('thumb_small') }}" alt="">

Здесь «thumb_small» — это название одного из наборов фильтров, которые созданы в файле конфигурации. По умолчанию созданы три таких набора: thumb_small, thumb_medium, thumb_big. Подробнее в документации.

Пример настроек набора фильтров:

thumb_small: quality: 85 filters: relative_resize: widen: 200 thumbnail: { size: [200, 200], mode: inset } background: { size: [200, 200], position: center, color: '#ffffff' }

Ссылку на демо-сайт давать не буду, т.к. боюсь «хабра-эффекта». Но при желании её легко найти.
Буду благодарен за ваши комментарии, критику и пулл-реквесты.

Последняя версия на данный момент: beta3.
Проект на GitHub
Документация


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Разминка для тех, кто умеет в Python

Мы обожаем квизы, посвященные языкам программирования. Привет! Сегодняшний квиз посвящен исключительно Python. В нашем блоге мы разместили уже целых три: первый — по Python, PHP, Golang, DevOps, второй — полностью по Go, третий — только по PHP. (Кстати, кто едет? ...

Финтех-дайджест: финансовым регуляторам нужен ИИ для того, чтобы работать в современных условиях

Сегодня в выпуске: Привет, Хабр! В США считают, что финансовым регуляторам необходимо использовать ИИ; Банки РФ обязали уведомлять ЦБ перед тем, как рассказывать прессе о произошедших хакерских атаках; Биткоин двинулся вперед, есть оптимистичные прогнозы; Несмотря на запрет биткоинов, в Китае ...