added payment links to prices
This commit is contained in:
@@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -53,6 +53,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stripe Payment Links -->
|
||||
{% if plan.monthly_stripe_link or plan.annual_stripe_link %}
|
||||
<div class="mb-3">
|
||||
<strong>Payment Links:</strong>
|
||||
<div class="mt-2">
|
||||
{% if plan.monthly_stripe_link %}
|
||||
<div class="mb-1">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-credit-card me-1"></i>Monthly:
|
||||
<a href="{{ plan.monthly_stripe_link }}" target="_blank" class="text-primary">
|
||||
Stripe Payment Link
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if plan.annual_stripe_link %}
|
||||
<div class="mb-1">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-credit-card me-1"></i>Annual:
|
||||
<a href="{{ plan.annual_stripe_link }}" target="_blank" class="text-primary">
|
||||
Stripe Payment Link
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="mb-3">
|
||||
<strong>Features:</strong>
|
||||
<ul class="list-unstyled mt-2">
|
||||
@@ -220,11 +249,24 @@
|
||||
value="Get Started">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stripe Payment Links Section -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="buttonUrl" class="form-label">Button URL</label>
|
||||
<input type="text" class="form-control" id="buttonUrl" name="button_url"
|
||||
value="#">
|
||||
<label for="monthlyStripeLink" class="form-label">Monthly Stripe Payment Link</label>
|
||||
<input type="url" class="form-control" id="monthlyStripeLink" name="monthly_stripe_link"
|
||||
placeholder="https://buy.stripe.com/...">
|
||||
<small class="text-muted">Stripe payment link for monthly billing</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="annualStripeLink" class="form-label">Annual Stripe Payment Link</label>
|
||||
<input type="url" class="form-control" id="annualStripeLink" name="annual_stripe_link"
|
||||
placeholder="https://buy.stripe.com/...">
|
||||
<small class="text-muted">Stripe payment link for annual billing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -367,10 +409,24 @@
|
||||
<input type="text" class="form-control" id="editButtonText" name="button_text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stripe Payment Links Section -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editButtonUrl" class="form-label">Button URL</label>
|
||||
<input type="text" class="form-control" id="editButtonUrl" name="button_url">
|
||||
<label for="editMonthlyStripeLink" class="form-label">Monthly Stripe Payment Link</label>
|
||||
<input type="url" class="form-control" id="editMonthlyStripeLink" name="monthly_stripe_link"
|
||||
placeholder="https://buy.stripe.com/...">
|
||||
<small class="text-muted">Stripe payment link for monthly billing</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editAnnualStripeLink" class="form-label">Annual Stripe Payment Link</label>
|
||||
<input type="url" class="form-control" id="editAnnualStripeLink" name="annual_stripe_link"
|
||||
placeholder="https://buy.stripe.com/...">
|
||||
<small class="text-muted">Stripe payment link for annual billing</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user