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

order button implementation to send message

Browse source
This commit is contained in:
Tobias Brunner 2025-06-04 16:58:47 +02:00
parent 206e46aa6a
commit c8c224cfb8
No known key found for this signature in database
3 changed files with 115 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@ class PriceCalculator {
this.pricingData = null;
this.storagePrice = 0.15; // CHF per GB per month
this.currentOffering = null;
this.selectedConfiguration = null;
this.init();
}
@ -29,6 +30,9 @@ class PriceCalculator {
if (this.currentOffering) {
this.loadPricingData();
}
// Setup order button click handler
this.setupOrderButton();
}
// Initialize DOM element references
@ -59,6 +63,77 @@ class PriceCalculator {
this.storagePriceEl = document.getElementById('storagePrice');
this.storageAmount = document.getElementById('storageAmount');
this.totalPrice = document.getElementById('totalPrice');
// Order button
this.orderButton = document.querySelector('a[href="#order-form"]');
}
// Setup order button click handler
setupOrderButton() {
if (this.orderButton) {
this.orderButton.addEventListener('click', (e) => {
e.preventDefault();
this.handleOrderClick();
});
}
}
// Handle order button click
handleOrderClick() {
if (this.selectedConfiguration) {
// Pre-fill the contact form with configuration details
this.prefillContactForm();
// Scroll to the contact form
const contactForm = document.getElementById('order-form');
if (contactForm) {
contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
}
// Pre-fill contact form with selected configuration
prefillContactForm() {
if (!this.selectedConfiguration) return;
const config = this.selectedConfiguration;
// Create configuration summary message
const configMessage = this.generateConfigurationMessage(config);
// Find and fill the message textarea in the contact form
const messageField = document.querySelector('#order-form textarea[name="message"]');
if (messageField) {
messageField.value = configMessage;
}
// Store configuration details in hidden field
const detailsField = document.querySelector('#order-form input[name="details"]');
if (detailsField) {
detailsField.value = JSON.stringify({
plan: config.planName,
vcpus: config.vcpus,
memory: config.memory,
storage: config.storage,
serviceLevel: config.serviceLevel,
totalPrice: config.totalPrice
});
}
}
// Generate human-readable configuration message
generateConfigurationMessage(config) {
return `I would like to order the following configuration:
Plan: ${config.planName} (${config.planGroup})
vCPUs: ${config.vcpus}
Memory: ${config.memory} GB
Storage: ${config.storage} GB
Service Level: ${config.serviceLevel}
Total Monthly Price: CHF ${config.totalPrice}
Please contact me with next steps for ordering this configuration.`;
}
// Load pricing data from API endpoint
@ -374,6 +449,17 @@ class PriceCalculator {
if (this.storagePriceEl) this.storagePriceEl.textContent = storagePriceValue.toFixed(2);
if (this.storageAmount) this.storageAmount.textContent = storage;
if (this.totalPrice) this.totalPrice.textContent = totalPriceValue.toFixed(2);
// Store current configuration for order button
this.selectedConfiguration = {
planName: plan.compute_plan,
planGroup: plan.groupName,
vcpus: plan.vcpus,
memory: plan.ram,
storage: storage,
serviceLevel: serviceLevel,
totalPrice: totalPriceValue.toFixed(2)
};
}
// Show no matching plan found

19
hub/services/templates/services/embedded_contact_form.html
View file

@ -73,14 +73,29 @@
{% endif %}
<div class="mb-3">
<label for="id_message" class="form-label">Your Message (Optional)</label>
<label for="id_message" class="form-label">
{% if source == "Configuration Order" %}
Configuration Details & Additional Message
{% else %}
Your Message (Optional)
{% endif %}
</label>
{{ form.message|addclass:"form-control" }}
{% if form.message.errors %}
<div class="invalid-feedback d-block">{{ form.message.errors }}</div>
{% endif %}
{% if source == "Configuration Order" %}
<small class="form-text text-muted">Your selected configuration will be automatically filled here when you click "Order This Configuration".</small>
{% endif %}
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
<button type="submit" class="btn btn-primary">
{% if source == "Configuration Order" %}
Submit Order Request
{% else %}
Send Message
{% endif %}
</button>
</form>
</div>
</div>

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

@ -306,10 +306,20 @@
<!-- Order Button -->
<div class="text-center mt-4">
<a href="#interest" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
<a href="#order-form" class="btn btn-primary btn-lg px-5 py-3 fw-semibold">
<i class="bi bi-cart me-2"></i>Order This Configuration
</a>
</div>
<!-- Order Form Section -->
<div id="order-form" class="pt-40" style="scroll-margin-top: 30px;">
<h4 class="fs-22 fw-semibold lh-1 mb-12">Order Your Configuration</h4>
<div class="row">
<div class="col-12">
{% embedded_contact_form source="Configuration Order" service=offering.service offering_id=offering.id %}
</div>
</div>
</div>
{% elif offering.plans.all %}
<!-- Traditional Plans -->
<h3 class="fs-24 fw-semibold lh-1 mb-12">Available Plans</h3>
@ -356,7 +366,7 @@
</div>
{% endif %}
{% if offering.plans.exists %}
{% 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">