Call another php snippet from within another
-
I have a page where I call a snippet from a Gutenberg shortcode block for the top section of the page which creates the titles and tabs. Then I have 2 more Gutenberg blocks which call both a Spectra Image gallery then Nextgen gallery respectively. Then underneath that have a further Gutenberg block which calls another php snippet, to create a further set of tabs at the bottom- not seen on the link as the snippets won’t compile. With just the tabs creation it compiles active no problem, but when I try to call another snippet within this snippet, it fails with a ‘We encountered an error activating your snippet, please check the syntax and try again. Error message:
syntax error, unexpected identifier s, expecting , or ;’ error. The snippet is fairly straightforward but calling a ‘nested’ snippet seems to break it. This is the bit of the snippet code that fails –// ----------------------------
// Bottom Tabs PHP Snippet
// ----------------------------
// Maps snippet ID
$maps_snippet_id = "71216";
?>
<style>
.moth-tabs-bottom { margin-top: 20px; }
.tab-buttons-bottom { list-style: none; padding: 0; display: flex; border-bottom: 2px solid #ccc; margin-bottom: 15px; }
.tab-buttons-bottom li { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; margin-right: 5px; border-radius: 5px 5px 0 0; background: #f7f7f7; }
.tab-buttons-bottom li.active { background: #fff; font-weight: bold; }
.tab-content-bottom { display: none; border: 1px solid #ccc; padding: 15px; border-radius: 0 5px 5px 5px; background: #fff; }
.tab-content-bottom.active { display: block; }
</style>
<div class="moth-tabs-bottom">
<!-- Tab buttons -->
<ul class="tab-buttons-bottom">
<li class="active" data-tab="maps">Maps</li>
<li data-tab="charts">Charts</li>
<li data-tab="data">Data</li>
</ul>
<!-- Maps tab -->
<div id="maps" class="tab-content-bottom active">
<?php
// Safely call the Maps snippet
echo do_shortcode('[wpcode id="' . $maps_snippet_id . '"]');
?>
</div>
<!-- Charts tab -->
<div id="charts" class="tab-content-bottom">
<p>Charts content goes here.</p>
</div>
<!-- Data tab -->
<div id="data" class="tab-content-bottom">
<p>Data content goes here.</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const tabs = document.querySelectorAll(".tab-buttons-bottom li");
tabs.forEach(function(button){
button.addEventListener("click", function(){
const tab = button.getAttribute("data-tab");
tabs.forEach(btn => btn.classList.remove("active"));
document.querySelectorAll(".tab-content-bottom").forEach(tc => tc.classList.remove("active"));
button.classList.add("active");
document.getElementById(tab).classList.add("active");
});
});
});
</script>The page I need help with: [log in to see the link]
You must be logged in to reply to this topic.