https://www.dockpharmacy.com/wp-content/themes/dockpharmacy/assets/js/consultation-form.js

1document.addEventListener("DOMContentLoaded", function () {
2    const form = document.getElementById("consultation-form");
3	let nextButtons = false;
4	let prevButtons = false;
5	if (form) {
6		nextButtons = form.querySelectorAll(".next-step");
7		prevButtons = form.querySelectorAll(".prev-step");
8	}
9    const stepHeading = document.getElementById("step-heading");
10    const addToCartButton = document.getElementById("add-to-cart-btn");
11
12    // Function to go to a specific step
13    function goToStep(step) {
14        // Hide all steps
15        document.querySelectorAll(".question-step, .product-step").forEach(stepDiv => {
16            stepDiv.style.display = "none";
17        });
18
19        // Show the target step if it exists
20        const targetStep = document.querySelector(`[data-step="${step}"]`);
21        if (targetStep) {
22            targetStep.style.display = "block";
23            stepHeading.textContent = `Step ${step}`; // Update heading to reflect the current step
24        } else {
25            console.error("Step not found:", step);
26            alert("The selected step does not exist.");
27        }
28    }
29
30	if (nextButtons) {
31    nextButtons.forEach(button => {
32        button.addEventListener("click", function () {
33            const currentStep = parseInt(this.getAttribute("data-current-step"));
34            const currentStepDiv = document.querySelector(`[data-step="${currentStep}"]`);
35
36            const selectedOption = currentStepDiv.querySelector('input[type="radio"]:checked');
37            if (!selectedOption) {
38                alert("Please select an option before proceeding.");
39                return;
40            }
41
42            // Check for skip logic
43            const skipToStep = parseInt(selectedOption.getAttribute("data-skip-to-step"));
44            // Validate extra input if required
45            const requiresTextInput = selectedOption.getAttribute("data-requires-text") === "1";
46            if (requiresTextInput) {
47                const extraInputDiv = currentStepDiv.querySelector(".extra-input");
48                extraInputDiv.style.display = "block";
49
50                const extraInput = extraInputDiv.querySelector("textarea");
51                if (!extraInput.value.trim()) {
52                    alert("Please provide additional information.");
53                    return;
54                }
55            }
56            const isFinalStep = selectedOption.getAttribute('data-final') === "1";
57            const advice = selectedOption.getAttribute('data-advice');
58
59            if (isFinalStep) {
60                const adviceMessage = currentStepDiv.querySelector('.advice-message');
61                adviceMessage.textContent = advice;
62                adviceMessage.style.display = 'block';
63            } else {
64
65            // Validate the skip step
66            if (!isNaN(skipToStep)) {
67                goToStep(skipToStep); // Go to the target step
68                stepHeading.textContent = `Step ${skipToStep}`; // Update heading
69            } else {
70                alert("Invalid step specified.");
71            }
72            }
73
74            
75        });
76    });
77	}
78	if (prevButtons) {
79    prevButtons.forEach(button => {
80        button.addEventListener("click", function () {
81            const currentStep = parseInt(this.getAttribute("data-current-step"));
82            goToStep(currentStep - 1); // Move to the previous step
83        });
84    });
85	}
86    // Handle Add to Cart button click
87    if (addToCartButton) {
88        addToCartButton.addEventListener("click", function () {
89            const selectedProductInput = form.querySelector('input[name="selected_product"]:checked');
90            if (!selectedProductInput) {
91                alert("Please select a product.");
92                return;
93            }
94
95            const selectedProductId = selectedProductInput.value;
96
97            // Use AJAX to add the product to the WooCommerce cart
98            const data = {
99                action: "add_to_cart",
100                product_id: selectedProductId,
101            };
102
103            jQuery.post(ajaxurl, data, function (response) {
104                if (response.success) {
105                    //window.location.href = "https://dockpharmacy.mydevfactory.com/sudip-roy/dockpharmacy/consultation-form/cart"; // Adjust cart URL as needed
106                    // Save form answers via AJAX before redirecting to the cart
107                const answers = {};
108                const pageName = $('#page_name').val();
109                form.querySelectorAll("input, textarea").forEach(input => {
110                    answers[input.name] = input.value;
111                });
112
113                jQuery.post(ajaxurl, {
114                    action: "save_consultation_answers",
115                    answers: JSON.stringify(answers),
116                    page_name: pageName,
117                }, function (saveResponse) {
118                    if (saveResponse.success) {
119                        // Redirect to the cart page
120                        window.location.href = "https://dockpharmacy.mydevfactory.com/sudip-roy/dockpharmacy/consultation-form/cart";
121                    } else {
122                        alert(saveResponse.data?.message || "Failed to save form answers.");
123                    }
124                }).fail(function () {
125                    alert("An error occurred while saving form answers.");
126                });
127                } else {
128                    alert("Failed to add product to cart.");
129                }
130            });
131        });
132    }
133
134	if (form) {
135    // Handle conditional input display
136    form.addEventListener("change", function (e) {
137        if (e.target.type === "radio") {
138            const currentStepDiv = e.target.closest(".question-step");
139            const requiresTextInput = e.target.getAttribute("data-requires-text") === "1";
140
141            const extraInputDiv = currentStepDiv.querySelector(".extra-input");
142            if (extraInputDiv) {
143                extraInputDiv.style.display = requiresTextInput ? "block" : "none";
144            }
145
146            // Clear advice message when a new radio button is selected
147            const adviceMessage = currentStepDiv.querySelector(".advice-message");
148            if (adviceMessage) {
149                adviceMessage.style.display = "none";
150                adviceMessage.textContent = "";
151            }
152        }
153    });
154	}
155});