Небольшая демонстрация реально работающего магазина на базе VamShop PWA.
Движок, CMS для создания онлайн магазинов на базе React + NodeJS + MongoDB.
![](http://blog.vamshop.ru/wp-content/uploads/vamshop-box-512.png)
PWA онлайн магазин, никакого PHP, MySQL, никаких монолитов.
Полное разделение frontend и backend.
100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).
API-центричное веб-приложение на микросервисах.
Современный дизайн на базе Figma.
Обратите внимание, как быстро работает сайт.
Например попробуйте фильтр по цене на странице — https://plasha.ru/kategoriya-3
Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.
Посмотрите в консоли разработчика в браузере хром, как всё выглядит и как работает.
В отличии от монолитов типа WordPress, OpenCart, нет лишних запросов и прорисовок.
Через API получаем «сырые» данные в JSON формате и отрисовываем их в React.
Попробуйте поиск товара.
В интернет магазине должно быть максимально простое, быстрое и удобное оформление заказа, управляемое из админки.
Какие задачи были решены:
1. Максимально не напрягать посетителя при оформлении заказа.
2. Привязать поля с данными о доставке не к общей форме, а к модулям доставки.
3. Всё работает на react + api, без перезагрузок страницы в браузере.
Например, я доставляю только по городу.
Зачем мне заставлять покупателя указывать почтовый индекс, страну, регион.
Я просто в форме оформления заказа отключаю все поля (через Админку — Настройки — Оформление заказа), оставляю только 2 поля — Имя и Телефон.
Всё.
![screencapture-vamhost-ru-checkout-2020-01-26-19_12_34.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-vamhost-ru-checkout-2020-01-26-19_12_34.thumb.png.3f24eee0f5997c98298a1a1c38ab7198.png)
Дальше уже на выбор покупателя.
Если выбирает доставку по городу, то при выборе доставки появляются поле Адрес, Метро и т.д.
Вот выбрал доставку курьером, появилось поле Адрес
![screencapture-vamhost-ru-checkout-2020-01-26-19_12_52.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-vamhost-ru-checkout-2020-01-26-19_12_52.thumb.png.089047a0f1a5f3f8390859ccff7cf933.png)
При выборе доставки почтой — появляются поля Адрес,Индекс.
![screencapture-vamhost-ru-checkout-2020-01-26-19_13_03.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-vamhost-ru-checkout-2020-01-26-19_13_03.thumb.png.bdb63a177640d87031c244db04156fc6.png)
У Вас есть возможность быстро и удобно выводить поля формы в зависимости от выбранной доставки.
Всё это настраивается в Админке — Настройки — Доставка.
![screencapture-admin-vamhost-ru-settings-shipping-2020-01-26-19_14_43.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-admin-vamhost-ru-settings-shipping-2020-01-26-19_14_43.thumb.png.0c4f1cb87c9d22b32de1d1c9d8931a8c.png)
В разделе Поля оформления заказа.
Вот пример для модуля курьерская доставка:
![screencapture-admin-vamhost-ru-settings-shipping-5dadd22796976428b7903944-2020-01-26-19_14_52.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-admin-vamhost-ru-settings-shipping-5dadd22796976428b7903944-2020-01-26-19_14_52.thumb.png.f464d5d42c638e308c8528501ddd282c.png)
Вот пример для модуля доставки почтой:
![screencapture-admin-vamhost-ru-settings-shipping-5de1a7ae2ca88f41d10024ee-2020-01-26-19_15_02.png](https://forum.vamshop.ru/uploads/monthly_2020_01/screencapture-admin-vamhost-ru-settings-shipping-5de1a7ae2ca88f41d10024ee-2020-01-26-19_15_02.thumb.png.3ba97cb9000103ee8f1b43d48d118f4f.png)
Кроме того, Вы можете ограничивать модули доставки в зависимости от указанной страны, города, региона.
В зависимости от суммы заказа, либо от веса заказа.
В итоге, оформления заказа получается простым и удобным, у покупателя запрашивается только необходимая информация и только тогда когда это нужно.
А не так как обычно, что нужно заполнить кучу форм с десятками полей, условий.
Всё быстро, просто и удобно.
Живой пример можно посмотреть в онлайн-демке: