Головна/WordPress Fullstack/Блупринти/Gutenberg & FSE/Розробка інтерактивного калькулятора вартості на WordPress Interactivity API
До карток розділу «Gutenberg & FSE»
Gutenberg & FSE(ТЗ 36 из 54)
ТЗ: Розробка інтерактивного калькулятора вартості на WordPress Interactivity API
Gutenberg & FSE5 шагов • +25 XP

ТЗ: Розробка інтерактивного калькулятора вартості на WordPress Interactivity API

Створення конверсійного реактивного калькулятора вартості послуг чи кредиту на базі нативного Interactivity API: нуль сторонніх бібліотек на фронтенді, миттєвий розрахунок формул та показник INP до 50мс.

~11 ч работыУровень: SeniorWordPress Interactivity APIdata-wp-interactivedata-wp-binddata-wp-on--inputdata-wp-textCore Web Vitals (INP < 15ms)View Transitions API
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~11 рабочих часов
Фриланс вилка~$495 – $825 (€440 – €770)
Оценка веб-студии~$1,045 – $1,760 (€990 – €1650)

ТЗ заказчика (исходный бриф):

Нам потрібен інтерактивний блок-калькулятор вартості, де користувач рухає повзунки (бюджет, години, опції) і одразу бачить підсумкову ціну без перезавантаження сторінки та важких плагінів опитувань.
Ключевые требования:
  • •Використання нативного Interactivity API з реактивним сховищем у файлі view.js
  • •Елементи керування: діапазонні повзунки (range), числові поля, перемикачі та списки вибору
  • •Миттєвий автоматичний перерахунок суми, податків та щомісячного платежу
  • •Форма захоплення контактів для миттєвої відправки розрахованої вартості менеджерам
  • •Оптимізація часу реакції інтерфейсу (INP) до 50мс на мобільних пристроях
Ограничения проекта:
  • •Нуль jQuery чи громіздких плагінів (без комбайнів на кшталт Calculated Fields Form)
  • •Повна клавіатурна доступність (aria-valuenow, aria-valuemin, aria-valuemax)
  • •Підтримка кількох незалежних калькуляторів на одній сторінці з ізольованими станами
Критерии приёмки (KPI):
  • Показник затримки INP < 50мс під час перетягування повзунків на мобільних
  • Зростання конверсії в заявки мінімум на 25%
  • 100% проходження тестів доступності WCAG 2.1 AA для повзунків

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Крок 1: Ініціалізація блока калькулятора та налаштування block.json

~25 минЛегкий

Практическое руководство:

Налаштуйте block.json з параметрами 'apiVersion': 3, 'supports': { 'interactivity': true } та оголосіть 'viewScriptModule': 'file:./view.js'. Визначте атрибути для базової ціни, ставки податку та валюти.

План и контрольные точки реализации:
1Включить supports.interactivity: true
2Подключить viewScriptModule: "file:./view.js"
3Привязать render: "file:./render.php"
Важные технические нюансы и подводные камни:

Переконайтеся, що залежності Script Modules API коректно обробляються в WordPress 6.5+.

Ожидаемый артефакт этапа:

Конфигурация интерактивного блока с поддержкой Script Modules.

JSON
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "agenticlab/service-calculator",
  "title": "Интерактивный калькулятор услуг",
  "category": "widgets",
  "icon": "calculator",
  "supports": {
    "interactivity": true,
    "html": false
  },
  "editorScript": "file:./index.js",
  "viewScriptModule": "file:./view.js",
  "render": "file:./render.php"
}
2
Этап 2 из 5

Крок 2: Серверна розмітка з інтерактивними директивами

~45 минСредний
3
Этап 3 из 5

Крок 3: Реактивний розрахунковий рушій у view.js

~45 минСложный
4
Этап 4 из 5

Крок 4: Інтеграція форми відправки розрахунку менеджерам

~30 минСредний
5
Этап 5 из 5

Крок 5: Профілювання затримки INP та тестування навантаження

~20 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами