This skill provides guidance for writing CSP-compatible Alpine.js components in Hyvä themes. Alpine CSP is a specialized Alpine.js build that operates without the unsafe-eval CSP directive, which is required for PCI-DSS 4.0 compliance on payment-related pages (mandatory from April 1, 2025).
Key principle: CSP-compatible code functions in both standard and Alpine CSP builds. Write all Alpine code using CSP patterns for future-proofing.
| Property reads | x-show="open" | Same | | Negation | x-show="!open" | Method: x-show="isNotOpen" | | Mutations | @click="open = false" | Method: @click="close" | | Method args | @click="setTab('info')" | Dataset: @click="setTab" data-tab="info" | | x-model | Available | Not supported - use :value + @input |
Написание CSP-совместимых компонентов Alpine.js для тем Hyvä в Magento 2. Этот навык следует использовать, когда пользователь хочет создавать компоненты Alpine, добавлять интерактивность в шаблоны Hyvä, писать JavaScript для тем Hyvä или ему нужна помощь с шаблонами Alpine.js, которые работают с политикой безопасности контента. Триггерные фразы включают «создать компонент alpine», «добавить интерактивность», «alpine для hyva», «компонент x-data», «совместимость csp», «javascript, совместимый с csp». Источник: hyva-themes/hyva-ai-tools.