better display of mandatory addons in calculator

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

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