MiniShop3 для MODX3. Отчет за месяц

Всем привет. В своей традиционной, ежемесячной заметке, рассказываю о том как идут дела с разработкой нашего нового компонента MiniShop3.


Сентябрь целиком был посвящен работе с корзиной. Давайте рассмотрим подробнее, чего удалось добиться и что вообще нового.

Отказ от хранения корзины в сессии.

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

Теперь, при добавлении первого товара в корзину, в базе данных сразу создается пустой заказ с товаром и все последующие действия просто пополняют этот заказ. Мы уже знакомы с этой системой. Мы с @Павел Гвоздь придумали ее еще в MiniShop2 3.0.0. С тех пор удалось накопить опыт работы с этим вариантом и сделать некоторый апгрейд для MS3

Токен покупателя.

В MODX есть довольно мерзкая проблема, которую я в силу своего небольшого опыта и образования так и не смог решить. Каждая авторизация генерирует новый сессионный токен. Крайне сложно опознавать покупателя, когда он переходит из анонима в авторизованного покупателя, когда он меняет браузер или устройство. У меня на практике бывало такое, что корзина терялась совсем или наоборот получалось вернуть чужую корзину клиенту.

А если разработка проекта более сложная, ведется отдельно в каком нибудь VUE приложении и запросы к серверу с заказами происходят удаленно из другого домена. Здесь вообще ад начинается.

Для решения подобных проблем раз и навсегда, и однозначного опознавания пользователя, независимо от его статуса придумал следующее.

В MiniShop3 добавлен новый контроллер Customer, который будет отвечать за все действия связанные с покупателем. Ровно тот же принцип, по котором работают контроллеры Корзины, Заказа, Доставки, Оплаты. Конечно же его можно будет расширять и обвешивать собственной логикой.

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

Все запросы к главным контроллерам подписываются персональным токеном, который должен передаваться в заголовке запроса. Это дает гарантию защиты от ботов, а также однозначного определения клиента и его текущего заказа. Задумка позволяет кидать запросы откуда угодно. Непосредственно с фронта сайта, из мобильного приложения, из DEV версии, находящейся на другом домене. Запрос независимо от cookies, от капризов сессий дойдет до контроллеров MiniShop3 и вернет данные о нужном заказе.

Серверный рендер корзины.

Это страшное и сложное выражение, на самом деле нам всем хорошо известно своей сутью. Все вы знаете как работает фильтр mFilter2. По мере выбора того или иного фильтра на сервер улетает запрос, который возвращает результат в виде готового html. Тот же принцип работы в pdoPage.

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

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

Для реализации этой задачи нам всегда не хватало именно серверного рендера. Потому решив одну задачу, я смог добиться и решения второй.

Каждый вызываемый в шаблоне сниппет корзины регистрирует себя в системе, генерируя глобальный ключ.
JS скрипт, передавая эти ключи в запросе серверу в параметре render, показывает системе какие именно корзины нужно отрендерить и вернуть.

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

Этот пункт доступен и через PHP API. Появился новый метод

$ms2->cart->changeOption($product_key, $options)

JS API
Важное достижение, которого не было раньше это возможность работать совсем без форм, без DOM элементов, добавляя или изменяя товары в корзине через API. К примеру используя консоль.

const formData = new FormData()
formData.append('id', 5)
formData.append('count', 2)
ms3.cart.add(formData)

Как можно заметить, была проделана достаточно большая работа. Мы приближаемся к релизу, осталось отладить систему оформления заказа, и кое-какие моменты, связанные с покупателем.

Хочу сказать большое спасибо за вашу финансовую поддержку. Без нее работа не получалась бы такой эффективной.