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 %}
|
{% block extra_js %}
|
||||||
<script defer src="{% static "js/price-calculator.js" %}"></script>
|
<script defer src="{% static "js/price-calculator.js" %}"></script>
|
||||||
<link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
@ -400,40 +420,90 @@
|
||||||
</div>
|
</div>
|
||||||
{% elif offering.plans.all %}
|
{% elif offering.plans.all %}
|
||||||
<!-- Traditional Plans -->
|
<!-- Traditional Plans -->
|
||||||
<h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
|
<h3 class="fs-24 fw-semibold lh-1 mb-12">Choose your Plan</h3>
|
||||||
<div class="row">
|
<div class="bg-light rounded-4 p-4 mb-4">
|
||||||
{% for plan in offering.plans.all %}
|
<div class="row">
|
||||||
<div class="col-12 col-lg-6 {% if not forloop.last %}mb-20 mb-lg-0{% endif %}">
|
{% for plan in offering.plans.all %}
|
||||||
<div class="bg-purple-50 rounded-16 border-all p-24">
|
<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="bg-white border-all rounded-7 p-20 mb-20">
|
<div class="card h-100 border-primary shadow-sm">
|
||||||
<h3 class="text-purple fs-22 fw-semibold lh-1-7 mb-0">{{ plan.name }}</h3>
|
<div class="card-body">
|
||||||
{% if plan.plan_description %}
|
<h5 class="card-title text-primary mb-3">
|
||||||
<div class="text-black mb-20">
|
<i class="bi bi-box me-2"></i>{{ plan.name }}
|
||||||
{{ plan.plan_description.text|safe }}
|
</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>
|
</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>
|
||||||
</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>
|
</div>
|
||||||
{% empty %}
|
</div>
|
||||||
<div class="col-12" id="interest" style="scroll-margin-top: 30px;">
|
|
||||||
<div class="alert alert-info">
|
<!-- Plan Order Forms -->
|
||||||
<p>No plans available yet.</p>
|
<div id="plan-order-form" class="pt-40" style="scroll-margin-top: 30px;">
|
||||||
<h4 class="mb-3">I'm interested in this offering</h4>
|
<h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Plan</h4>
|
||||||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
<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>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<!-- No Plans Available -->
|
<!-- No Plans Available -->
|
||||||
|
|
@ -443,17 +513,6 @@
|
||||||
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
{% embedded_contact_form source="Offering Interest" service=offering.service offering_id=offering.id %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue