Wie kann man dynamische Inhalte und Query-Parameter in Onepage verwenden?

<script>
    function fetchTotalPrice(form) {
        form.var.asyncData = 'loading...'
        fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?price=${form.field.myPrice}&count=${form.field.myCount}`)
            .then(res => res.text())
            .then(data => form.var.asyncData = data)
    }
</script>

<script>
    function fetchTotalPrice(form) {
        fetch(`https://broad-smoke-df46.onepage-io.workers.dev/?count=${ form.field.myCount }&price=${ form.field.myPrice }`)
            .then(res => res.text())
            .then(data => form.var.asyncData = data)
            .then(() => form.state.nextFrame())
        
    }
</script>

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
  "Access-Control-Max-Age": "86400",
}

const wait = (time) => new Promise(r => setTimeout(r, time))

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url)
    const query = new URLSearchParams(url.search)
    
    const price = +query.get('price') || 1
    const count = +query.get('count') || 1

    await wait(1000)
    return new Response(`${ price * count }`, { headers: corsHeaders });
  },
};

{% if form.field.energyConsumption.values %}{% if form.field.energyConsumption.values == "Small house (1-2 kW)" %}Small house selected: Ideal for basic energy needs. {% endif %}{% if  form.field.energyConsumption.values == "Mid-sized / Duplex (3-5 kW)" %}Mid-sized / Duplex selected: Perfect for moderate household usage.{% endif %}{% if form.field.energyConsumption.values == "Large house (6-10 kW)" %}Large house selected: Recommended for large homes with high consumption. {% endif %} {% endif %}

<script>
  function applyDiscount(code) {
    const originalPrice = 300;
    if (code.trim().toLowerCase() === 'minusfifty') {
      return (originalPrice - 50).toFixed(2);
    }
    return originalPrice.toFixed(2);
  }
</script>

<script>
  function calculateFinalPrice(form) {
    let base;

    // Get base price by property type
    switch (form.field.propertyType.values) {
      case "Apartment":
        base = 60;
        break;
      case "House":
        base = 80;
        break;
      case "Office":
        base = 100;
        break;
      default:
        base = 70; // fallback
    }

    // Start fresh each time
    let total = base;

    const bedrooms = Number(form.field.bedrooms || 0);
    const bathrooms = Number(form.field.bathrooms || 0);
    const area = Number(form.field.area || 0);

    total += bedrooms * 10;
    total += bathrooms * 5;
    total += area * 0.5;

    // Add-on 1: Window cleaning
    if (form.field.addon1?.values === "Yes") {
      total += 20;
    }

    // Normalize addon2 values
    const rawValues = form.field.addon2?.values || [];
    const selectedServices = Array.isArray(rawValues) ? rawValues : [rawValues];

    // Add service prices
    for (const service of selectedServices) {
      if (typeof service !== "string") continue;
      if (service.includes("Deep carpet cleaning")) total += 30;
      if (service.includes("Fridge cleaning")) total += 15;
      if (service.includes("Laundry service")) total += 25;
    }

    // Promo code
    if (form.field.promoCode === "SAVE20") {
      total *= 0.8;
    }

    // Output
    form.var.basePrice = `$${base.toFixed(2)}`;
    form.var.totalPrice = `$${total.toFixed(2)}`;
  }
</script>