added payment links to prices

This commit is contained in:
2025-06-25 17:14:03 +02:00
parent 5b598f2966
commit 3a0659b63b
9 changed files with 154 additions and 13 deletions

View File

@@ -47,9 +47,27 @@
</ul>
</div>
<a href="{{ plan.button_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
<!-- Dynamic Payment Button -->
{% if plan.is_custom %}
<a href="{{ contact_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
{% else %}
{% if plan.monthly_stripe_link or plan.annual_stripe_link %}
<a href="{{ plan.monthly_stripe_link or plan.annual_stripe_link }}"
class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3 payment-button"
data-plan-id="{{ plan.id }}"
data-monthly-link="{{ plan.monthly_stripe_link or '' }}"
data-annual-link="{{ plan.annual_stripe_link or '' }}"
target="_blank">
{{ plan.button_text }}
</a>
{% else %}
<a href="{{ contact_url }}" class="btn {% if plan.is_popular %}btn-primary{% else %}btn-outline-primary{% endif %} btn-lg w-100 mt-auto px-4 py-3">
{{ plan.button_text }}
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
@@ -242,6 +260,14 @@ document.addEventListener('DOMContentLoaded', function() {
// Simply animate the number change
animateNumber(price, monthlyValue, annualValue);
});
// Update payment links to annual
document.querySelectorAll('.payment-button').forEach(button => {
const annualLink = button.getAttribute('data-annual-link');
if (annualLink) {
button.href = annualLink;
}
});
} else {
// Switch to monthly prices with animation
monthlyPrices.forEach((price, index) => {
@@ -251,6 +277,14 @@ document.addEventListener('DOMContentLoaded', function() {
// Simply animate the number change back to monthly
animateNumber(price, currentValue, originalMonthlyValue);
});
// Update payment links to monthly
document.querySelectorAll('.payment-button').forEach(button => {
const monthlyLink = button.getAttribute('data-monthly-link');
if (monthlyLink) {
button.href = monthlyLink;
}
});
}
});
});