Калькулятор визиток для WordPress

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

Демо: https://z1nex-1.github.io/wp-vizitki-calc/

Что умеет

• Живое превью: фактура картона (лён, хлопок, крафт, перламутр, фелт), ламинация, фольга пяти цветов, конгрев, объёмный и плоский УФ-лак, скруглённые углы, евроформат. Визитку можно перевернуть на оборот, и она наклоняется за курсором, чтобы был виден блеск фольги и лака.
• 100 картонов в демо-каталоге: категория → коллекция → цвет, плюс плашки цветов текущей коллекции. На тёмном картоне текст в превью автоматически становится светлым.
• Расчёт стоимости: картон, печать (цифра — за сторону, шелкография — за цвет плюс формы), отделка, клише и подготовка макетов на каждое ФИО. Скидка за тираж задаётся таблицей и интерполируется между точками, есть минимальный заказ.
• Срок изготовления считается по самой долгой операции.
• Каталог картонов — обычный CSV, который можно вести в Excel. Цены — JSON. Оба меняются в админке без правки кода.
• Заявка уходит на почту менеджеру с полной раскладкой заказа.

Установка в WordPress

1. Скачать архив репозитория (Code → Download ZIP) и загрузить его в «Плагины → Добавить новый → Загрузить плагин».
2. Активировать «Калькулятор визиток».
3. Вставить шорткод [vizitki_calc] на нужную страницу.
4. В «Настройки → Калькулятор визиток» загрузить свой каталог картонов, поправить цены и указать почту для заявок.

Загруженные файлы хранятся в wp-content/uploads/vizitki-calc/, поэтому обновление плагина их не затирает.

Демо без WordPress запускается любым статическим сервером:

python3 -m http.server 8000

Формат каталога картонов

data/cartons.csv, разделитель — точка с запятой:

id;category;collection;color;hex;texture;density;price
1;Дизайнерская бумага;Fancy;Слоновая кость;#efe6cf;felt;300;4.2

• hex — цвет картона в превью;
• texture — smooth, felt, cotton, kraft, linen или pearl;
• density — плотность, г/м²;
• price — цена картона на одну визитку, ₽.

Формат цен

data/prices.json:

• qtyFactor — пары «тираж → множитель», между ними линейная интерполяция;
• print.digital.perSide, print.silk.perColor и print.silk.screen — цена печати и форма на каждый цвет;
• options — для каждой отделки perCard, разовый setup (клише, формы) и days;
• perName — подготовка макета на одно ФИО, minOrder — минимальная сумма заказа, euroFactor — наценка за евроформат.

Как устроено

Фронтенд написан на чистом JavaScript без сборки и зависимостей: assets/calc.js рисует весь интерфейс внутри одного <div class="vzc"> и берёт адреса каталога и цен из data-атрибутов. Поэтому один и тот же код работает и на GitHub Pages, и в WordPress.

Превью собрано на CSS:

• размеры в cqw от ширины карточки, поэтому визитка масштабируется без JavaScript;
• фактуры — SVG-шум feTurbulence;
• фольга — градиент с background-clip: text, конгрев — пара теней;
• оборот — 3D-поворот.

vizitki-calc.php регистрирует шорткод и страницу настроек. Загруженный CSV проверяется по заголовку, а JSON цен — на обязательные разделы. Заявки принимает обработчик admin-ajax с проверкой nonce и отправляет их через wp_mail.

Плагин проверен в WordPress Playground: шорткод, страница настроек и отправка заявки.

Лицензия

MIT