Question

This seems like an odd problem. Maybe it’s also the wrong approach. But I have to do this:

• there are a few menu items on a page
• the content for each page is stored in some .phtml files
• when the page loads the default content is displayed (using require)
• all other content should be loaded too and should be stored in a JavaScript-array
• when a user clicks a link, the content is swapped

The problem is:

• AJAX should not be used
• all content can’t be appended in the beginning, for the good old SEO

All parts are easy, except for: How do I get the content into a JavaScript array. Something like content.push('<?php print require 'page.phtml'; ?>'); won’t work of course, because it will return a multi line string, which does not work with JavaScript. All ideas are welcome. Maybe I’m overlooking something very simple.

Answer 1

<script>
<?php

ob_start();
require 'page.phtml';
$contents = ob_get_clean();

echo "var content = ".json_encode($contents);
?>
</script>

if there is no php code in your page.phtml file you can make it even easier

<script>
<?php
echo "var content = ".json_encode(file_get_contents('page.phtml'));
?>
</script>

obviously you can use it in this way too:

echo "content.push(".json_encode($contents).");";

why not function

<?php
function json_require($filepath) {
  ob_start();
  require($filepath);
  return json_encode(ob_get_clean());
}
?>
...
content.push(<?=json_require('page_1.phtml');?>);
content.push(<?=json_require('page_2.phtml');?>);
content.push(<?=json_require('page_3.phtml');?>);
content.push(<?=json_require('page_4.phtml');?>);