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 |
Scrivere componenti Alpine.js compatibili con CSP per temi Hyvä in Magento 2. Questa abilità dovrebbe essere utilizzata quando l'utente desidera creare componenti Alpine, aggiungere interattività ai modelli Hyvä, scrivere JavaScript per temi Hyvä o ha bisogno di aiuto con i modelli Alpine.js che funzionano con la politica di sicurezza dei contenuti. Le frasi trigger includono "crea componente alpine", "aggiungi interattività", "alpine per hyva", "componente x-data", "compatibilità csp", "javascript compatibile con csp". Fonte: hyva-themes/hyva-ai-tools.