classic plan new styling
This commit is contained in:
parent
3b8eea9c14
commit
656b59904c
1 changed files with 98 additions and 39 deletions
|
|
@ -7,6 +7,26 @@
|
|||
{% block extra_js %}
|
||||
<script defer src="{% static "js/price-calculator.js" %}"></script>
|
||||
<link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
|
||||
<script>
|
||||
// Function to select a plan in the dropdown when clicking "Select This Plan"
|
||||
function selectPlan(element) {
|
||||
const planId = element.getAttribute('data-plan-id');
|
||||
const planName = element.getAttribute('data-plan-name');
|
||||
|
||||
// Find the plan dropdown in the contact form
|
||||
const planDropdown = document.getElementById('id_choice');
|
||||
if (planDropdown) {
|
||||
// Find the option with matching plan id and select it
|
||||
for (let i = 0; i < planDropdown.options.length; i++) {
|
||||
const optionValue = planDropdown.options[i].value;
|
||||
if (optionValue.startsWith(planId + '|')) {
|
||||
planDropdown.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -400,40 +420,90 @@
|
|||
</div>
|
||||
{% elif offering.plans.all %}
|
||||
<!-- Traditional Plans -->
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
|
||||
<div class="row">
|
||||
{% for plan in offering.plans.all %}
|
||||
<div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
|
||||
<div class="bg-purple-50 rounded-16 border-all p-24">
|
||||
<div class="bg-white border-all rounded-7 p-20 mb-20">
|
||||
<h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
|
||||
{% if plan.plan_description %}
|
||||
<div class="text-black mb-20">
|
||||
{{ plan.plan_description.text|safe }}
|
||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Choose your Plan</h3>
|
||||
<div class="bg-light rounded-4 p-4 mb-4">
|
||||
<div class="row">
|
||||
{% for plan in offering.plans.all %}
|
||||
<div class="col-12 {% if offering.plans.all|length == 1 %}col-lg-8 mx-auto{% elif offering.plans.all|length == 2 %}col-lg-6{% else %}col-lg-4{% endif %} mb-4">
|
||||
<div class="card h-100 border-primary shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary mb-3">
|
||||
<i class="bi bi-box me-2"></i>{{ plan.name }}
|
||||
</h5>
|
||||
|
||||
<!-- Plan Description -->
|
||||
{% if plan.plan_description %}
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">Description</small>
|
||||
<div class="text-dark">
|
||||
{{ plan.plan_description.text|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if plan.description %}
|
||||
<div class="mb-3">
|
||||
<small class="text-muted">Details</small>
|
||||
<div class="text-dark">
|
||||
{{ plan.description|safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Pricing Information -->
|
||||
{% if plan.plan_prices.exists %}
|
||||
<div class="border-top pt-3 mt-3">
|
||||
<div class="mb-2">
|
||||
<small class="text-muted">Pricing</small>
|
||||
</div>
|
||||
{% for price in plan.plan_prices.all %}
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Monthly Price</span>
|
||||
<span class="fs-5 fw-bold text-primary">{{ price.currency }} {{ price.amount }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<small class="text-muted mt-2 d-block">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
Prices exclude VAT. Monthly pricing based on 30 days.
|
||||
</small>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="border-top pt-3 mt-3">
|
||||
<div class="text-center text-muted">
|
||||
<i class="bi bi-envelope me-2"></i>Contact us for pricing details
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Plan Action Button -->
|
||||
<div class="text-center mt-4">
|
||||
<a href="#plan-order-form" class="btn btn-primary btn-lg px-4 py-2 fw-semibold w-100" data-plan-id="{{ plan.id }}" data-plan-name="{{ plan.name }}" onclick="selectPlan(this)">
|
||||
<i class="bi bi-cart me-2"></i>Select This Plan
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if plan.description %}
|
||||
<div class="text-black mb-20">
|
||||
{{ plan.description|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if plan.pricing %}
|
||||
<div class="text-black mb-20">
|
||||
{{ plan.pricing|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12" id="interest" style="scroll-margin-top: 30px;">
|
||||
<div class="alert alert-info">
|
||||
<p>No plans available yet.</p>
|
||||
<h4 class="mb-3">I'm interested in this offering</h4>
|
||||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="col-12" id="interest" style="scroll-margin-top: 30px;">
|
||||
<div class="alert alert-info">
|
||||
<p>No plans available yet.</p>
|
||||
<h4 class="mb-3">I'm interested in this offering</h4>
|
||||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
||||
</div>
|
||||
|
||||
<!-- Plan Order Forms -->
|
||||
<div id="plan-order-form" class="pt-40" style="scroll-margin-top: 30px;">
|
||||
<h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Plan</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- No Plans Available -->
|
||||
|
|
@ -443,17 +513,6 @@
|
|||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if offering.plans.exists and not pricing_data_by_group_and_service_level %}
|
||||
<div id="form" class="pt-40">
|
||||
<h4 class="fs-22 fw-semibold lh-1 mb-12">I'm interested in a plan</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{% embedded_contact_form source="Plan Order" service=offering.service offering_id=offering.id choices=offering.plans.all choice_label="Select a Plan" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue