better display of mandatory addons in calculator
This commit is contained in:
parent
2178427cf3
commit
ba64d24c7a
2 changed files with 82 additions and 5 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue