Fox calc

wp-content/themes/ostal_WP/js/main.js

@@ -20,34 +20,34 @@ function enableScroll() {
 //Gallery lightbox
 document.addEventListener("DOMContentLoaded", () => {
     // ===> DOM elements <=== //
-
     const $imagesContainer = document.getElementById('gallery-lightbox');
     const $lightbox = document.getElementById('lightbox');
 
-    // ===> Event listeners and triggers <=== //
+    if ($imagesContainer && $lightbox) {
+        // ===> Event listeners and triggers <=== //
 
-    // Show lightbox 
-    $imagesContainer.addEventListener('click', e => {
-        const imageWrapper = e.target.closest('.gallery-image');
-        if (imageWrapper) {
-            const image = imageWrapper.querySelector('img');
-            if (image) {
-                $lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
-                $lightbox.classList.add('show');
+        // Show lightbox
+        $imagesContainer.addEventListener('click', e => {
+            const imageWrapper = e.target.closest('.gallery-image');
+            if (imageWrapper) {
+                const image = imageWrapper.querySelector('img');
+                if (image) {
+                    $lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
+                    $lightbox.classList.add('show');
+                }
             }
-        }
-    });
+        });
 
-    // Hide Lightbox
-    $lightbox.addEventListener('click', (e) => {
-        if (!e.target.hasAttribute('src')) {
-            $lightbox.classList.remove('show');
-        }
-    });
+        // Hide Lightbox
+        $lightbox.addEventListener('click', (e) => {
+            if (!e.target.hasAttribute('src')) {
+                $lightbox.classList.remove('show');
+            }
+        });
 
-    // Loading...
-    setTimeout(() =>
-        $imagesContainer.classList.remove('loading')
-        , 1500);
-
-});
+        // Loading...
+        setTimeout(() => {
+            $imagesContainer.classList.remove('loading');
+        }, 1500);
+    }
+});

wp-content/themes/ostal_WP/page-2101.php

@@ -130,7 +130,7 @@
                         <h2>Krok 3</h2>
                       </div>
                       <ul class="calc-radio" v-if="isLoaded">
-                        <li v-for="(step, index) in acfData.acf.step_3" :key="index" @click="setStep_3(step.text, index)" :class="{ selected: index === selected_option_3  }">
+                        <li v-for="(step, index) in acfData_step_3" :key="index" @click="setStep_3(step.text, index)" :class="{ selected: index === selected_option_3  }">
                           <div class="radio"></div>
                           <div class="radio-text">
                             <div class="radio-title">{{ step.text }}</div>
@@ -279,6 +279,11 @@
           acf: {}
         },
 
+
+        acfData_step_3: {
+
+        },
+
         configData: {
           step_1: '',
           step_2: {
@@ -295,19 +300,27 @@
         }
       }
     },
-    beforeMount() {
-      this.getWindowWidth()
-      fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`)
-        .then(res => res.json())
-        .then(data => this.acfData = data)
-        .then(this.isLoaded = true)
+    async beforeMount() {
+      this.getWindowWidth();
+      try {
+        const res = await fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`);
+        const data = await res.json();
+        this.acfData = data;
+        this.isLoaded = true;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        this.isLoaded = true;
+      }
 
+      console.log(this.acfData);
+      
     },
     methods: {
       setStep_1(value, index) {
         this.configData.step_1 = value
         this.selected_option_1 = index
         this.updateStep2Content();
+        this.updateStep3Content();
       },
       updateStep2Content() {
         // Tutaj umieszczasz logikę, która zmienia zawartość kroku 2 w zależności od wyboru w kroku 1.
@@ -321,6 +334,17 @@
         }
         // I tak dalej dla innych opcji...
       },
+
+      updateStep3Content() {
+        if (this.selected_option_1 === 0) {
+          this.acfData_step_3 = this.acfData.acf.step_3.items_1
+        } else if (this.selected_option_1 === 1) {
+          this.acfData_step_3 = this.acfData.acf.step_3.items_2
+        } else if (this.selected_option_1 === 2) {
+          this.acfData_step_3 = this.acfData.acf.step_3.items_3
+        }
+      },
+
       setStep_3(value, index) {
         this.configData.step_3 = value
         this.selected_option_3 = index