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

Для начала поставим точки над I. QuickForm – это расширение для разработки форм. В отличие от скриптов интернет магазинов, он не имеет многих требующихся для них интерфейсов, в первую очередь, каталога товаров. Вместо этого предлагается использовать любой другой каталог, например, стандартный менеджер материалов в Joomla! или WordPress. Можно использовать любые другие каталоги, в том числе специализированные: VirtueMart, JoomShopping, WooCommerce. Можно дописать функционал каталога самому. Это не сложно, просто не хочется перегружать конструктор функциями, которые будут редко использоваться.

Что есть в QuickForm? Здесь есть функционал крутой корзины. Есть кнопка "добавить в корзину". Есть возможность использовать формы компонента в качестве товаров, включая весь их мощный набор возможностей - зависимые поля, калькулятор и так далее.

Для начала нужно зайти в глобальные настройки компонента и включить там режим магазина. При этом в меню QuickForm появится новая ссылка "настройки корзины". Рассмотрим их ниже по тексту, а сейчас я вывожу модуль миникорзины.

Корзина пуста

Сделать это легко. В Joomla нужно вывести на страницу модуль mod_qf3 в режиме корзины. В WordPress используется хештег [qfminicart]. Теперь добавим на страницу какую-нибудь форму, это будет наш товар. Вместо кнопки "submit" в этой форме должна быть кнопка "addToCart". Я сделал два товара в качестве примера и добавил на страницу. Вот так просто всё в QuickForm.

Корпус ATX ACCORD P-28B (1 390 rub.)
0руб.
НАБОР ОБЕД КАПРИЗ
Состав (1020г): Ролл Печеный Лосось, Ролл Калифорния Темпура, Ролл Тори Терияки, Ролл Мураками.
0руб.

Корзину можно протестировать. Хорошо видно как зависимые поля и неограниченная математика калькулятора передают товару гибкость QuickForm. Если сравнивать с типичным скриптом интернет магазина, очевидно, что QuickForm будет более удобным при небольшом количестве товаров - до нескольких десятков. Создать товар на нем сложнее, но возможностей у товара больше. Плюсом будет скорость работы магазина, так как QuicForm не тормозит сайт.

Теперь хочу немного рассказать о настройках самой корзины. Они включают несколько вкладок, которые мы рассмотрим по порядку.

1. Первая вкладка отвечает за вывод модуля миникорзины. Описывать тут нечего, вы можете задать положение валюты и форматирование цены. Сама валюта задаётся в товаре полем calculatorsum и может быть разной для разных товаров. Будьте внимательны, "руб." и "руб" - это разные валюты. Валютами могут быть амперы, километры и так далее. Кроме того, один товар может иметь несколько сумм или вообще не иметь. Если QuickForm не сможет посчитать итоговую сумму, он покажет количество позиций товаров.

shop 1

2. Вторая вкладка формирует отображение окна корзины. Вверху три поля для вставки html кода, сейчас я их не задействовал.
Дальше идут три встраиваемые формы: оплата, доставка, контактные данные. В принципе, это может быть что угодно, названия условные. Разница заключается в том, что первые две будут выведены в нижней части корзины, а третья откроется в модальном окне. Если она задействована, вместо кнопки "отправить" будет кнопка "оформить". Что касается функциональности встраиваемых форм, то она сохраняется в полном объеме. В примере я использую зависимые поля, калькулятор и даже динамическое встраивание одной позиции цены (оплата банковской картой). Таким образом можно очень гибко настраивать итоговую калькуляцию корзины, практически без ограничений возможности.
Внизу проставлены текстовые переменные (мой сайт на двух языках). Вы можете их заменить на русский текст.

shop 2

3. Третья вкладка отвечает за E-mail сообщение. Вверху два поля текстовых вставок для дизайнерского оформления письма. Ниже поле E-mail, можно ввести несколько адресов через запятую. Дальше идет тема письма. Как и в самом компоненте, в тему можно добавить переменные замены: {replacerName}, {replacerId}, {replacerDate}.

shop 3

4. Четвертая вкладка развивает функциональность корзины. Она включает интерфейс загрузки файлов и скидки. Чтобы активировать загрузку файлов, в глобальных настройках компонента нужно включить пункт "загрузка файлов на сервер". После этого будет доступен функционал и то, как прикреплять файлы - внизу корзины или в каждой товарной позиции. В моем примере файлы прикрепляются внизу, но иногда бывает необходимо прикреплять файлы к каждому товару. Например, для магазина полиграфической продукции, потому что к каждому товару прикрепляются макеты.

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

Чтобы активировать скидки, достаточно заполнить соответствующее поле. При этом в корзине появится скидка от общей суммы, скидка по промокоду, либо и то и другое. Скидка по промокоду имеет приоритет и подавляет скидку от суммы. Описание есть в самом компоненте.

shop 4

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

shop 5

В качестве рекомендации могу посоветовать всегда использовать миникорзину на страницах с товарами, даже если магазин работает без неё. Не используйте встроенный файл стилей default.css. Он перезапишется при обновлении, и ваши правки слетят. Создайте в той же папке собственный css файл, скопируйте стили и правьте их. Выбор этого файла будет доступен в настройках.