Skip to content

Issue #17: Использование data-* вместо классов#81

Merged
biz87 merged 5 commits intobetafrom
feat/issue-17-data-attributes
Feb 16, 2026
Merged

Issue #17: Использование data-* вместо классов#81
biz87 merged 5 commits intobetafrom
feat/issue-17-data-attributes

Conversation

@Ibochkarev
Copy link
Copy Markdown
Member

@Ibochkarev Ibochkarev commented Feb 13, 2026 •
edited
Loading

Описание

Введение data-атрибутов data-ms3-* для логики (селекция в JS), классы остаются для вёрстки и стилей (Issue #17).

  • Шаблоны: во все перечисленные в плане чанки и шаблоны добавлены атрибуты data-ms3-form, data-ms3-form="order"|"customer", data-ms3-qty="input"|"inc"|"dec", data-ms3-product-card, data-ms3-cart-options, data-ms3-error (на полях с ошибкой). Классы не удалялись.
  • Web JS: селекция переведена на data-атрибуты в ms3.js, OrderUI, CustomerUI, CartUI, ProductCardUI; для обратной совместимости сохранён fallback на старые классы (.ms3_form, .ms3_order_form, .ms3_customer_form, .ms3-product-card, .qty-input и т.д.).
  • CSS: в default.css добавлены селекторы [data-ms3-error] для подсветки ошибок; селекторы по .ms3_field_error оставлены.
  • Документация: в ms3.js добавлен комментарий со схемой именования data-атрибутов.

Менеджер (ExtJS) не трогался.

Тип изменений

  • Исправление бага (non-breaking change)
  • Новая функциональность (non-breaking change)
  • Breaking change (изменение, ломающее обратную совместимость)
  • Рефакторинг (без изменения функциональности)
  • Документация
  • Другое (опишите):

Связанные Issues

Closes #17

Как это было протестировано?

  • Логика проверена по плану: формы заказа/клиента/корзины, карточки товара, количество, опции, валидация (data-ms3-error).
  • Старые чанки без data-атрибутов продолжают работать за счёт fallback по классам.
  • Ручное тестирование (по сценариям плана)
  • Автоматические тесты (ESLint для изменённых JS-файлов)
  • Тестирование на разных версиях PHP/MODX

Конфигурация тестирования:

  • MiniShop3: текущая ветка
  • MODX: —
  • PHP: —

Скриншоты (если применимо)

Не применимо — визуально без изменений.

Чеклист

  • Код соответствует стилю проекта
  • Добавлены/обновлены комментарии в сложных местах (схема data-атрибутов в ms3.js)
  • Изменения не ломают существующую функциональность (fallback по классам)
  • Лексиконы добавлены на двух языках (ru/en) — не требуются
  • PHPStan проходит без новых ошибок — JS/шаблоны/CSS, не затрагивали PHP
  • ESLint проходит без ошибок (для JS/Vue изменений)
  • Обновлён CHANGELOG.md (при необходимости — можно добавить пункт в рамках релиза)

Дополнительные заметки

  • В OrderUI переменные из ответа API переименованы в camelCase при деструктуризации (cart_cost → cartCost) для соответствия ESLint; в хук по-прежнему передаются ключи cart_cost/delivery_cost.

@Ibochkarev Ibochkarev requested a review from biz87 February 13, 2026 03:44
@Ibochkarev Ibochkarev self-assigned this Feb 13, 2026
@biz87
Copy link
Copy Markdown
Member

biz87 commented Feb 13, 2026

Ревью PR #81

Подход правильный — разделение логики (data-атрибуты) и стилей (классы). Есть несколько проблем, которые нужно исправить перед мержем.

1. БАГ: ms3_customer.tpl — data-ms3-error добавлен как класс, а не атрибут

Сейчас data-ms3-error попадает внутрь class="":

class="form-control{($field in list $errors) ? ' error' : ''}{($field in list $errors) ? ' data-ms3-error' : ''}"

Результат в HTML: <input class="form-control error data-ms3-error"> — это CSS-класс, а не data-атрибут.

Нужно вынести в отдельный атрибут:

class="form-control{($field in list $errors) ? ' error' : ''}" {($field in list $errors) ? 'data-ms3-error' : ''}

2. CartUI.js — нет fallback для кнопок количества

// CartUI — нет fallback
document.querySelectorAll('[data-ms3-qty="inc"], [data-ms3-qty="dec"]').forEach(btn => {

Старые шаблоны с .qty-btn / .inc-qty / .dec-qty без data-атрибутов перестанут работать в корзине. При этом в ProductCardUI fallback реализован корректно — нужен аналогичный подход в CartUI.

3. OrderUI.highlightErrors — не очищает старый класс .ms3_field_error

// Очищается только [data-ms3-error], но .ms3_field_error — нет
document.querySelectorAll('[data-ms3-error]').forEach(el => {
  el.removeAttribute('data-ms3-error')
})

Если ошибки были проставлены через класс (серверный рендер, сторонние плагины), они не очистятся. Нужно очищать оба варианта.

4. iziToast.js — 2400 строк шума (85% diff)

Переформатирование сторонней библиотеки не относится к data-атрибутам и сильно затрудняет ревью. Лучше вынести в отдельный коммит или PR.

5. Несвязанные изменения

  • ApiClient.js — удалён try/catch
  • .eslintrc.json — переформатирование
  • auth-forms.js — добавлен /* global bootstrap */

Не относятся к issue #17, лучше вынести отдельно.

6. Непоследовательный fallback

Модуль Fallback
ms3.js (формы) ✅ [data-ms3-form] или .ms3_form
ProductCardUI (кнопки) ✅ [data-ms3-qty] → .qty-btn
CartUI (кнопки) ❌ Только [data-ms3-qty]
CartUI (input) ✅ [data-ms3-qty="input"], .qty-input
OrderUI (highlightErrors) ❌ Только [data-ms3-error]

Рекомендую привести fallback к единому паттерну во всех модулях.

Ivan Bochkarev added 3 commits February 14, 2026 09:33
Merge remote-tracking branch 'origin/beta' into feat/issue-17-data-at…
b56ff45 
…tributes

# Conflicts:
#	assets/components/minishop3/js/web/ui/CartUI.js
#	assets/components/minishop3/js/web/ui/ProductCardUI.js
Refactor: Update ESLint configuration and improve error handling in A…
380172e 
…piClient

- Reformatted .eslintrc.json for consistency.
- Enhanced error handling in ApiClient by wrapping fetch call in a try-catch block.
- Updated error highlighting in OrderUI to include additional error class.
- Improved quantity button and input initialization in QuantityUI to avoid duplicate event listeners.
- Adjusted data attribute handling in ms3_customer.tpl for better error display.
Enhance CartUI: Improve product option select initialization to suppo…
e648678 
…rt both data attributes and class selectors, ensuring unique event listeners are added.
@biz87 biz87 merged commit cfaeb39 into beta Feb 16, 2026
@biz87 biz87 deleted the feat/issue-17-data-attributes branch February 16, 2026 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@biz87 biz87 Awaiting requested review from biz87

@GulomovCreative GulomovCreative Awaiting requested review from GulomovCreative

Assignees

@Ibochkarev Ibochkarev

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Использование data-* вместо классов

2 participants

@Ibochkarev @biz87