F
flowglad-pricing-ui
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.
How to use
- Zainstaluj skill Flowglad Pricing UI w swoim projekcie i upewnij się, że masz dostęp do danych modelu cenowego poprzez helper functions getProduct i getPrice.
- Poczekaj na załadowanie pricingModel przed renderowaniem komponentów — użyj usePricingModel do publicznych stron cenowych lub poczekaj na dane z API.
- Pobierz produkty i ceny za pomocą helperów, przefiltruj je według potrzeb (np. tylko aktywne plany) i wyodrębnij informacje o funkcjach dla każdego planu.
- Sformatuj ceny z centów na walutę (np. 9900 centów = 99,00 zł), wyświetl okres rozliczeniowy (miesięczny/roczny) i dodaj przełącznik do zmiany interwału.
- Wykryj aktualny plan subskrypcji użytkownika i wyróżnij go wizualnie — zablokuj przycisk CTA lub zmień styl dla aktualnego planu.
- Dostosuj layout do urządzeń mobilnych — skill zawiera wzorce responsywne dla tabel cenowych i kart planów.