fix: pricing section toggle and translation fallbacks

1. Fix monthly/annual toggle:
   - Price suffix now changes between /month and /year using Alpine.js
   - Added € currency symbol to prices

2. Fix language translations:
   - Section title/subtitle now fall back to locale files when CMS
     content doesn't have translations for the selected language
   - Uses cms.platform.pricing.title and .subtitle from locale files

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-02 19:53:42 +01:00
parent b7a70d2ac6
commit 1965e22faf

View File

@@ -12,23 +12,23 @@
{% if pricing and pricing.enabled %}
<section id="pricing" class="py-16 lg:py-24 bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{# Section header #}
{# Section header - tries CMS content first, falls back to locale files #}
<div class="text-center mb-12">
{% set title = pricing.title.translations.get(lang) or pricing.title.translations.get(default_lang) or '' %}
{% if title %}
{% set title = (pricing.title.translations.get(lang) if pricing.title and pricing.title.translations else none)
or (pricing.title.translations.get(default_lang) if pricing.title and pricing.title.translations else none)
or _('cms.platform.pricing.title') or 'Simple, Transparent Pricing' %}
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{{ title }}
</h2>
{% endif %}
{% if pricing.subtitle and pricing.subtitle.translations %}
{% set subtitle = pricing.subtitle.translations.get(lang) or pricing.subtitle.translations.get(default_lang) %}
{% set subtitle = (pricing.subtitle.translations.get(lang) if pricing.subtitle and pricing.subtitle.translations else none)
or (pricing.subtitle.translations.get(default_lang) if pricing.subtitle and pricing.subtitle.translations else none)
or _('cms.platform.pricing.subtitle') or '' %}
{% if subtitle %}
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
{{ subtitle }}
</p>
{% endif %}
{% endif %}
</div>
{# Pricing toggle (monthly/annual) #}
@@ -73,11 +73,13 @@
{# Price #}
<div class="mb-6">
<span class="text-4xl font-extrabold text-gray-900 dark:text-white"
x-text="annual ? '{{ tier.price_annual or (tier.price_monthly * 10)|int }}' : '{{ tier.price_monthly }}'">
{{ tier.price_monthly }}
<span class="text-4xl font-extrabold text-gray-900 dark:text-white">
<span x-text="annual ? '{{ tier.price_annual or (tier.price_monthly * 10)|int }}' : '{{ tier.price_monthly }}'">{{ tier.price_monthly }}</span>
</span>
<span class="text-gray-500 dark:text-gray-400"
x-text="annual ? '{{ _('cms.platform.pricing.per_year') or '/year' }}' : '{{ _('cms.platform.pricing.per_month') or '/month' }}'">
{{ _('cms.platform.pricing.per_month') or '/month' }}
</span>
<span class="text-gray-500 dark:text-gray-400">{{ _('cms.platform.pricing.per_month') or '/month' }}</span>
</div>
{# CTA button #}