move code to static files

hub/services/static/css/price-calculator.css

@@ -34,3 +34,36 @@
         opacity: 1;
     }
 }
+
+
+/* Subtle styling for the best plan */
+.card.border-success.border-2 {
+    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.1) !important;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.card.border-success.border-2:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15) !important;
+}
+
+/* Best choice badge styling */
+.badge.bg-success {
+    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
+    border: 2px solid white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    min-width: max-content;
+}
+
+/* Subtle enhancement for best plan button */
+.btn-success.shadow {
+    transition: all 0.2s ease-in-out;
+}
+
+.btn-success.shadow:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important;
+}

hub/services/static/js/price-calculator.js

@@ -1835,3 +1835,21 @@ document.addEventListener('DOMContentLoaded', () => {
         new PriceCalculator();
     }
 });
+
+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;
+            }
+        }
+    }
+}

hub/services/templates/services/offering_detail.html

@@ -9,62 +9,7 @@
 <script defer src="{% static "js/price-calculator.js" %}"></script>
 <link rel="stylesheet" type="text/css" href='{% static "css/price-calculator.css" %}'>
 
-<!-- JSON-LD Structured Data -->
 {% json_ld_structured_data %}
-
-<style>
-/* Subtle styling for the best plan */
-.card.border-success.border-2 {
-    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.1) !important;
-    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-}
-
-.card.border-success.border-2:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0.5rem 1rem rgba(25, 135, 84, 0.15) !important;
-}
-
-/* Best choice badge styling */
-.badge.bg-success {
-    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
-    border: 2px solid white;
-    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
-    white-space: nowrap;
-    font-size: 0.75rem;
-    padding: 0.5rem 0.75rem;
-    min-width: max-content;
-}
-
-/* Subtle enhancement for best plan button */
-.btn-success.shadow {
-    transition: all 0.2s ease-in-out;
-}
-
-.btn-success.shadow:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 0.25rem 0.75rem rgba(25, 135, 84, 0.2) !important;
-}
-</style>
-<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 %}
 
 {% block content %}

hub/services/templatetags/json_ld_tags.py

@@ -225,7 +225,9 @@ def json_ld_structured_data(context):
         # Add offers if available
         if hasattr(offering, "plans") and offering.plans.exists():
             # Get all plans with pricing
-            plans_with_prices = offering.plans.filter(plan_prices__isnull=False).distinct()
+            plans_with_prices = offering.plans.filter(
+                plan_prices__isnull=False
+            ).distinct()
 
             if plans_with_prices.exists():
                 # Create individual offers for each plan
@@ -245,10 +247,7 @@ def json_ld_structured_data(context):
                             "priceCurrency": first_price.currency,
                             "availability": "https://schema.org/InStock",
                             "url": offering_url + "#plan-order-form",
-                            "seller": {
+                            "seller": {"@type": "Organization", "name": "VSHN"},
-                                "@type": "Organization",
-                                "name": "VSHN"
-                            }
                         }
                         offers.append(offer)
 
@@ -258,10 +257,7 @@ def json_ld_structured_data(context):
                     "availability": "https://schema.org/InStock",
                     "offerCount": len(offers),
                     "offers": offers,
-                    "seller": {
+                    "seller": {"@type": "Organization", "name": "VSHN"},
-                        "@type": "Organization",
-                        "name": "VSHN"
-                    }
                 }
 
                 # Add lowPrice, highPrice and priceCurrency if we have prices
@@ -289,10 +285,7 @@ def json_ld_structured_data(context):
                     "@type": "AggregateOffer",
                     "availability": "https://schema.org/InStock",
                     "offerCount": offering.plans.count(),
-                    "seller": {
+                    "seller": {"@type": "Organization", "name": "VSHN"},
-                        "@type": "Organization",
-                        "name": "VSHN"
-                    }
                 }
 
     else: