servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

better display of mandatory addons in calculator

Browse source
This commit is contained in:
Tobias Brunner 2025-07-11 16:52:03 +02:00
parent 2178427cf3
commit ba64d24c7a
No known key found for this signature in database
2 changed files with 82 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

54
hub/services/static/js/price-calculator.js
View file

@ -54,6 +54,7 @@ class PriceCalculator {
// Addon elements
this.addonsContainer = document.getElementById('addonsContainer');
this.addonPricingContainer = document.getElementById('addonPricingContainer');
this.managedServiceIncludesContainer = document.getElementById('managedServiceIncludesContainer');
// Result display elements
this.planMatchStatus = document.getElementById('planMatchStatus');
@ -1832,6 +1833,59 @@ Please contact me with next steps for ordering this configuration.`;
}
}
// Override the updateAddonPricingDisplay method to use improved layout
PriceCalculator.prototype.updateAddonPricingDisplay = function(mandatoryAddons, selectedOptionalAddons) {
// Handle mandatory addons - show them in the managed service includes section
if (this.managedServiceIncludesContainer) {
this.managedServiceIncludesContainer.innerHTML = '';
if (mandatoryAddons && mandatoryAddons.length > 0) {
mandatoryAddons.forEach(addon => {
const addonRow = document.createElement('div');
addonRow.className = 'd-flex justify-content-between mb-1 small text-success';
addonRow.innerHTML = `
<span><i class="bi bi-check-circle me-1"></i>${addon.name}</span>
<span class="text-muted">(CHF ${addon.price})</span>
`;
this.managedServiceIncludesContainer.appendChild(addonRow);
});
} else {
// Show basic compute resources when no specific addons
const basicRow = document.createElement('div');
basicRow.className = 'small text-success mb-1';
basicRow.innerHTML = `
<i class="bi bi-check-circle me-1"></i>Compute resources & management
`;
this.managedServiceIncludesContainer.appendChild(basicRow);
}
}
// Handle optional addons - show them in the main addon pricing container
if (!this.addonPricingContainer) return;
// Clear existing addon pricing display (only for optional addons now)
this.addonPricingContainer.innerHTML = '';
// Add optional addons to pricing breakdown (these are added to total)
if (selectedOptionalAddons && selectedOptionalAddons.length > 0) {
// Add a header for optional addons
const optionalHeader = document.createElement('div');
optionalHeader.className = 'small text-muted mb-2';
optionalHeader.innerHTML = '<em>Additional add-ons:</em>';
this.addonPricingContainer.appendChild(optionalHeader);
selectedOptionalAddons.forEach(addon => {
const addonRow = document.createElement('div');
addonRow.className = 'd-flex justify-content-between mb-2';
addonRow.innerHTML = `
<span><i class="bi bi-plus-circle text-primary me-1"></i>Add-on: ${addon.name}</span>
<span class="fw-bold">CHF ${addon.price}</span>
`;
this.addonPricingContainer.appendChild(addonRow);
});
}
};
// Initialize calculator when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
// Only initialize if we're on an offering detail page with pricing calculator

29
hub/services/templates/services/offering_detail.html
View file

@ -348,18 +348,41 @@
<!-- Pricing Breakdown -->
<div class="border-top pt-3">
<div class="d-flex justify-content-between mb-2">
<!-- Managed Service Section -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<span>Managed Service (incl. Compute)</span>
<button class="btn btn-link btn-sm p-0 ms-2 text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#managedServiceIncludes" aria-expanded="false" aria-controls="managedServiceIncludes" title="Show what's included">
<i class="bi bi-info-circle" id="managedServiceToggleIcon"></i>
</button>
</div>
<span class="fw-bold">CHF <span id="managedServicePrice">0.00</span></span>
</div>
<!-- What's included in managed service (collapsible) -->
<div class="collapse" id="managedServiceIncludes">
<div class="ps-3 border-start border-2 border-success-subtle">
<div class="small text-muted mb-2">
<i class="bi bi-check-circle-fill text-success me-1"></i>
<em>Included in managed service price:</em>
</div>
<div id="managedServiceIncludesContainer">
<!-- Required add-ons will be dynamically added here -->
</div>
</div>
</div>
</div>
<!-- Storage - separate billable item -->
<div class="d-flex justify-content-between mb-2">
<span>Storage - <span id="storageAmount">20</span> GB</span>
<span class="fw-bold">CHF <span id="storagePrice">0.00</span></span>
</div>
<!-- Addons Pricing -->
<!-- Optional Addons Pricing -->
<div id="addonPricingContainer">
<!-- Addon pricing will be dynamically added here -->
<!-- Optional addon pricing will be dynamically added here -->
</div>
<hr>