110 lines
4.3 KiB
Twig
110 lines
4.3 KiB
Twig
|
{% extends 'layouts/base.twig' %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<p class="mb-5 position-relative fs-4 fw-bold sp-module-title">{{ post.title }}</p>
|
||
|
|
|
||
|
|
<div class="container mt-4">
|
||
|
|
<div class="row">
|
||
|
|
<!-- Columna izquierda: títulos -->
|
||
|
|
<div class="col-md-4 border-end">
|
||
|
|
<ul id="post-list" class="list-group">
|
||
|
|
{% for pagina in SubpaginasAcercaCnt %}
|
||
|
|
<li class="list-group-item {% if loop.first %}active-acerca{% endif %}" data-page-id="{{ pagina.id }}">
|
||
|
|
<a href="#"
|
||
|
|
data-page-id="{{ pagina.id }}"
|
||
|
|
class="text-decoration-none d-block w-100 {% if loop.first %}text-white{% else %}text-black{% endif %}">
|
||
|
|
{{ pagina.title }}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
{% endfor %}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Columna derecha: contenido del post -->
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div id="content-area">
|
||
|
|
{% if SubpaginasAcercaCnt|length > 0 %}
|
||
|
|
{% set primera = SubpaginasAcercaCnt|first %}
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="card-title">{{ primera.title }}</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body" style="padding-bottom: 60px;">
|
||
|
|
<div class="card-text">
|
||
|
|
{{ primera.content }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const postList = document.getElementById('post-list');
|
||
|
|
const contentArea = document.getElementById('content-area');
|
||
|
|
|
||
|
|
postList.addEventListener('click', function(e) {
|
||
|
|
const link = e.target.closest('a');
|
||
|
|
if (!link) return;
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const pageId = link.getAttribute('data-page-id');
|
||
|
|
|
||
|
|
// Remover clase active de todos
|
||
|
|
postList.querySelectorAll('.list-group-item').forEach(item => {
|
||
|
|
item.classList.remove('active-acerca');
|
||
|
|
const a = item.querySelector('a');
|
||
|
|
if (a) {
|
||
|
|
a.classList.remove('text-white');
|
||
|
|
a.classList.add('text-black');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Añadir clase active al clickeado
|
||
|
|
const listItem = link.closest('.list-group-item');
|
||
|
|
listItem.classList.add('active-acerca');
|
||
|
|
link.classList.add('text-white');
|
||
|
|
link.classList.remove('text-black');
|
||
|
|
|
||
|
|
// Mostrar loader
|
||
|
|
contentArea.innerHTML = '<div class="text-center p-5"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
|
||
|
|
|
||
|
|
// Cargar contenido via AJAX
|
||
|
|
fetch('{{ site.url }}/wp-admin/admin-ajax.php', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
|
},
|
||
|
|
body: 'action=get_page_content&page_id=' + pageId
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
contentArea.innerHTML = `
|
||
|
|
<div class="card mb-3">
|
||
|
|
<div class="card-header">
|
||
|
|
<h5 class="card-title">${data.data.title}</h5>
|
||
|
|
</div>
|
||
|
|
<div class="card-body" style="padding-bottom: 60px;">
|
||
|
|
<div class="card-text">
|
||
|
|
${data.data.content}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
contentArea.innerHTML = '<div class="alert alert-danger">Error al cargar el contenido</div>';
|
||
|
|
console.error('Error:', error);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{% endblock %}
|