Skip to content

Diego Prieto / landingpage_gpi

Go to a project
Commit 9131b769 by Angel Fco
Options

fix: error data null

parent 4d3eb2ce
Inline Side-by-side
Showing with 114 additions and 123 deletions
faq.html
...@@ -384,59 +384,47 @@ ...@@ -384,59 +384,47 @@
<div id="preloader"></div> <div id="preloader"></div>
<script> <script>
const toggles = document.querySelectorAll('.cardToggle');
toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) {
e.preventDefault();
const pfCard = this.closest('.pf-card');
const contentCard = pfCard.querySelector('.content-card');
const iconDown = pfCard.querySelector('.icon-down');
const iconUp = pfCard.querySelector('.icon-up');
const titleCard = pfCard.querySelector('.titleCard');
contentCard.classList.toggle('open');
iconDown.classList.toggle('close');
iconUp.classList.toggle('open');
pfCard.classList.toggle('open');
titleCard.classList.toggle('open');
});
});
</script>
<script>
fetch('https://promofenix.com/api/module_landing/getModuleLanding') fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
const faqsContainer = document.querySelector( const faqsContainer = document.querySelector('.preguntas-frecuentes-2');
'.preguntas-frecuentes-2'
); if (
faqsContainer.innerHTML = ''; // Limpiamos el contenedor faqsContainer &&
Array.isArray(data.data.faqs) &&
const faqsOrdenadas = data.data.faqs data.data.faqs.length > 0
.filter((faq) => faq.status === true) ) {
.sort((a, b) => a.id - b.id); // Orden por ID ascendente faqsContainer.innerHTML = ''; // Limpiar solo si vienen datos
faqsOrdenadas.forEach((faq) => { const faqsOrdenadas = data.data.faqs
const pfCard = document.createElement('div'); .filter((faq) => faq.status === true)
pfCard.classList.add('pf-card'); .sort((a, b) => a.id - b.id);
pfCard.innerHTML = ` faqsOrdenadas.forEach((faq) => {
<div> const pfCard = document.createElement('div');
<h1 class="titleCard">${faq.question}</h1> pfCard.classList.add('pf-card');
<a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i> const pregunta = faq.question || 'Sin título';
<i class="bi bi-caret-up-fill icon-up"></i> const respuesta = faq.answer
</a> ? faq.answer.replace(/\n/g, '<br>')
</div> : 'Sin respuesta disponible';
<span class="content-card">${faq.answer.replace(/\n/g, '<br>')}</span>
`; pfCard.innerHTML = `
<div>
faqsContainer.appendChild(pfCard); <h1 class="titleCard">${pregunta}</h1>
}); <a href="#" class="cardToggle">
<i class="bi bi-caret-down-fill icon-down"></i>
// Volver a agregar los listeners para el toggle <i class="bi bi-caret-up-fill icon-up"></i>
</a>
</div>
<span class="content-card">${respuesta}</span>
`;
faqsContainer.appendChild(pfCard);
});
}
// 🔁 Esta parte se ejecuta SIEMPRE (ya sea que vengan FAQs o se muestren los estáticos)
const toggles = document.querySelectorAll('.cardToggle'); const toggles = document.querySelectorAll('.cardToggle');
toggles.forEach((toggle) => { toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) { toggle.addEventListener('click', function (e) {
...@@ -446,7 +434,7 @@ ...@@ -446,7 +434,7 @@
const iconDown = pfCard.querySelector('.icon-down'); const iconDown = pfCard.querySelector('.icon-down');
const iconUp = pfCard.querySelector('.icon-up'); const iconUp = pfCard.querySelector('.icon-up');
const titleCard = pfCard.querySelector('.titleCard'); const titleCard = pfCard.querySelector('.titleCard');
contentCard.classList.toggle('open'); contentCard.classList.toggle('open');
iconDown.classList.toggle('close'); iconDown.classList.toggle('close');
iconUp.classList.toggle('open'); iconUp.classList.toggle('open');
...@@ -457,8 +445,29 @@ ...@@ -457,8 +445,29 @@
}) })
.catch((error) => { .catch((error) => {
console.error('Error al obtener las FAQs:', error); console.error('Error al obtener las FAQs:', error);
// 🔁 Aseguramos que los toggles funcionen incluso si hay error en la API
const toggles = document.querySelectorAll('.cardToggle');
toggles.forEach((toggle) => {
toggle.addEventListener('click', function (e) {
e.preventDefault();
const pfCard = this.closest('.pf-card');
const contentCard = pfCard.querySelector('.content-card');
const iconDown = pfCard.querySelector('.icon-down');
const iconUp = pfCard.querySelector('.icon-up');
const titleCard = pfCard.querySelector('.titleCard');
contentCard.classList.toggle('open');
iconDown.classList.toggle('close');
iconUp.classList.toggle('open');
pfCard.classList.toggle('open');
titleCard.classList.toggle('open');
});
});
}); });
</script> </script>
<!-- Vendor JS Files --> <!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
...@@ -470,22 +479,6 @@ ...@@ -470,22 +479,6 @@
<script src="assets/vendor/php-email-form/validate.js"></script> <script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File --> <!-- Template Main JS File -->
<script>
// Realizamos la petición a la API usando fetch
fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json())
.then((data) => {
// Actualizamos las imágenes dinámicamente
document.getElementById('portada-img').src =
data.data.portada.image_path;
document.getElementById('seccion1-img').src =
data.data.seccion1.image_path;
document.getElementById('seccion2-img').src =
data.data.seccion2.image_path;
})
.catch((error) => {
console.error('Error al obtener los datos de la API:', error);
});
</script> </script>
<script src="assets/js/main.js"></script> <script src="assets/js/main.js"></script>
<script> <script>
......
index.html
...@@ -70,20 +70,6 @@ ...@@ -70,20 +70,6 @@
<!-- End Header --> <!-- End Header -->
<!-- End Header --> <!-- End Header -->
<!-- Menú desplegable -->
<nav id="sideMenu" class="side-menu">
<div class="side-menu-content">
<div class="side-options"
><a href="index.html">¿Qué es PROMOFÉNIX?</a></div
>
<div class="side-options"
><a href="#">Programa de bonificaciones</a></div
>
<div class="side-options"><a href="#">Experiencias PROMOFÉNIX</a></div>
<div class="side-options"><a href="#">Registrar referido</a></div>
</div>
</nav>
<!-- ======= Hero Section ======= --> <!-- ======= Hero Section ======= -->
<section id="hero" class="hero"> <section id="hero" class="hero">
<div class=""> <div class="">
...@@ -329,16 +315,6 @@ ...@@ -329,16 +315,6 @@
<div id="preloader"></div> <div id="preloader"></div>
<script>
const toggleButton = document.getElementById('menuToggle');
const sideMenu = document.getElementById('sideMenu');
toggleButton.addEventListener('click', function (e) {
e.preventDefault();
sideMenu.classList.toggle('open');
});
</script>
<!-- Vendor JS Files --> <!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/aos/aos.js"></script> <script src="assets/vendor/aos/aos.js"></script>
...@@ -353,50 +329,72 @@ ...@@ -353,50 +329,72 @@
fetch('https://promofenix.com/api/module_landing/getModuleLanding') fetch('https://promofenix.com/api/module_landing/getModuleLanding')
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
// ✅ Actualiza imágenes y videos // ✅ Validación segura para cada sección
document.getElementById('portada-img').src =
data.data.portada.image_path; const portadaImg = document.getElementById('portada-img');
document.getElementById('seccion1-img').src = if (data.data.portada?.image_path) {
data.data.seccion1.image_path; portadaImg.src = data.data.portada.image_path;
document.getElementById('seccion2-img').src = }
data.data.seccion2.image_path;
const seccion1Img = document.getElementById('seccion1-img');
if (data.data.seccion1?.image_path) {
seccion1Img.src = data.data.seccion1.image_path;
}
const seccion2Img = document.getElementById('seccion2-img');
if (data.data.seccion2?.image_path) {
seccion2Img.src = data.data.seccion2.image_path;
}
const videoTestimonial = document.getElementById('video-testimonial'); const videoTestimonial = document.getElementById('video-testimonial');
videoTestimonial.src = data.data.videotestimonio.image_path; if (data.data.videotestimonio?.image_path) {
videoTestimonial.poster = data.data.testimonio.image_path; videoTestimonial.src = data.data.videotestimonio.image_path;
}
if (data.data.testimonio?.image_path) {
videoTestimonial.poster = data.data.testimonio.image_path;
}
const videoTutorial1 = document.getElementById('video-tutorial1'); const videoTutorial1 = document.getElementById('video-tutorial1');
videoTutorial1.src = data.data.videotutorial1.image_path; if (data.data.videotutorial1?.image_path) {
videoTutorial1.poster = data.data.tutorial1.image_path; videoTutorial1.src = data.data.videotutorial1.image_path;
}
if (data.data.tutorial1?.image_path) {
videoTutorial1.poster = data.data.tutorial1.image_path;
}
const videoTutorial2 = document.getElementById('video-tutorial2'); const videoTutorial2 = document.getElementById('video-tutorial2');
videoTutorial2.src = data.data.videotutorial2.image_path; if (data.data.videotutorial2?.image_path) {
videoTutorial2.poster = data.data.tutorial2.image_path; videoTutorial2.src = data.data.videotutorial2.image_path;
}
if (data.data.tutorial2?.image_path) {
videoTutorial2.poster = data.data.tutorial2.image_path;
}
// ✅ INSERTAR SOLO LAS 3 PRIMERAS FAQS // ✅ Mostrar FAQs si existen
const faqsContainer = document.querySelector('.faq-s-2'); const faqsContainer = document.querySelector('.faq-s-2');
faqsContainer.innerHTML = ''; if (Array.isArray(data.data.faqs) && data.data.faqs.length > 0) {
faqsContainer.innerHTML = '';
const faqs = data.data.faqs.slice(0, 3); // Solo 3 preguntas
faqs.forEach((faq) => { const faqs = data.data.faqs.slice(0, 3);
const div = document.createElement('div'); faqs.forEach((faq) => {
div.classList.add('faq-s-table'); const div = document.createElement('div');
div.classList.add('faq-s-table');
const h1 = document.createElement('h1'); const h1 = document.createElement('h1');
h1.textContent = faq.question; h1.textContent = faq.question || 'Sin título';
const p = document.createElement('p'); const p = document.createElement('p');
const respuestaCorta = const respuestaCorta =
faq.answer.length > 240 faq.answer && faq.answer.length > 240
? faq.answer.slice(0, 240) + '...' ? faq.answer.slice(0, 240) + '...'
: faq.answer; : faq.answer || 'Sin respuesta';
p.textContent = respuestaCorta; p.textContent = respuestaCorta;
div.appendChild(h1); div.appendChild(h1);
div.appendChild(p); div.appendChild(p);
faqsContainer.appendChild(div); faqsContainer.appendChild(div);
}); });
}
}) })
.catch((error) => { .catch((error) => {
console.error('Error al obtener los datos de la API:', error); console.error('Error al obtener los datos de la API:', error);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment