Fox calc

wp-content/themes/ostal_WP/custom.scss

@@ -136,7 +136,7 @@
 					}
 
 					.marketing {
-            input[type="checkbox"] {
+						input[type='checkbox'] {
 							&::before {
 								border-radius: 0;
 							}
@@ -265,7 +265,7 @@
 						}
 
 						&::before {
-              content: "";
+							content: '';
 							position: absolute;
 							width: 100%;
 							height: 100%;
@@ -305,7 +305,7 @@
 									&.selected {
 										.radio {
 											&::before {
-                        content: "";
+												content: '';
 												position: absolute;
 												top: 50%;
 												left: 50%;
@@ -368,7 +368,7 @@
 
 									/********** Range Input Styles **********/
 									/*Range Reset*/
-                  input[type="range"] {
+									input[type='range'] {
 										-webkit-appearance: none;
 										appearance: none;
 										background: transparent;
@@ -377,13 +377,13 @@
 									}
 
 									/* Removes default focus */
-                  input[type="range"]:focus {
+									input[type='range']:focus {
 										outline: none;
 									}
 
 									/***** Chrome, Safari, Opera and Edge Chromium styles *****/
 									/* slider track */
-                  input[type="range"]::-webkit-slider-runnable-track {
+									input[type='range']::-webkit-slider-runnable-track {
 										background-color: #ddd;
 										border-radius: 0.5rem;
 										height: 0.5rem;
@@ -391,7 +391,7 @@
 									}
 
 									/* slider thumb */
-                  input[type="range"]::-webkit-slider-thumb {
+									input[type='range']::-webkit-slider-thumb {
 										-webkit-appearance: none;
 										/* Override default look */
 										appearance: none;
@@ -407,7 +407,7 @@
 
 									/******** Firefox styles ********/
 									/* slider track */
-                  input[type="range"]::-moz-range-track {
+									input[type='range']::-moz-range-track {
 										background-color: #ddd;
 										border-radius: 0.5rem;
 										height: 0.5rem;
@@ -416,7 +416,7 @@
 									}
 
 									/* slider thumb */
-                  input[type="range"]::-moz-range-thumb {
+									input[type='range']::-moz-range-thumb {
 										border: none;
 										/*Removes extra border that FF applies*/
 										border-radius: 0px;
@@ -538,7 +538,7 @@
 	background: #fff;
 
 	&::before {
-    content: "";
+		content: '';
 		position: absolute;
 		width: 100%;
 		height: 100%;

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

@@ -20,10 +20,10 @@ function enableScroll() {
 //Gallery lightbox
 document.addEventListener("DOMContentLoaded", () => {
     // ===> DOM elements <=== //
-
     const $imagesContainer = document.getElementById('gallery-lightbox');
     const $lightbox = document.getElementById('lightbox');
 
+    if ($imagesContainer && $lightbox) {
         // ===> Event listeners and triggers <=== //
 
         // Show lightbox
@@ -46,8 +46,8 @@ document.addEventListener("DOMContentLoaded", () => {
         });
 
         // Loading...
-    setTimeout(() =>
+        setTimeout(() => {
-        $imagesContainer.classList.remove('loading')
+            $imagesContainer.classList.remove('loading');
-        , 1500);
+        }, 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,12 +300,19 @@
         }
       }
     },
-    beforeMount() {
+    async beforeMount() {
-      this.getWindowWidth()
+      this.getWindowWidth();
-      fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`)
+      try {
-        .then(res => res.json())
+        const res = await fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`);
-        .then(data => this.acfData = data)
+        const data = await res.json();
-        .then(this.isLoaded = true)
+        this.acfData = data;
+        this.isLoaded = true;
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        this.isLoaded = true;
+      }
+
+      console.log(this.acfData);
       
     },
     methods: {
@@ -308,6 +320,7 @@
         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