Using echo with delayed layout

[pmx]

Hello, sorry if this is a noob question.
I am discovering PW and all the possibilities it offers. Thank you for this work!
I started to build my site in delayed output (with the Tailwind framework) and I was wondering if in the construction of the pages (as for example the basic-page.php page) it was possible to use "echo" rather than content .=
Below is an example of my current code for the main content below the banner. It works fine and displays correctly in _main.php but unfortunately in the IDE the code is not easy to write and proofread as it loses its colours and indentation. Also, I was wondering if I understood the method to use to code my pages. I tried to use "echo" but the content was displayed at the beginning of the page, above the banner.
The page _main.php contains the header codes (banner, menu, multilanguage buttons)

Thanks for your help!

$content .= "<div class='px-2 py-4'>";
$content .= "<p class='text-gray-400 text-2xl text-center'>".strtoupper($numero)."</p>";
$content .= "<a href='".$serie."/".substr($paper, 0, -4)."'>";
$content .= "<img class='hover:border-gray-400 border-solid border-2 border-gray-350' alt='' src='".$preview."'>";
$content .= "</a>";
$content .= "<button class='m-auto mt-2 bg-gray-400 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded inline-flex items-cente'>";
$content .= "<svg class='fill-current w-4 h-4 mr-2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z'/></svg>";
$content .= "<a href='".$paperurl."' download><span>QUICK DOWNLOAD</span></a><br>";
$content .= "</button>";
$content .= "</div>";

Translated with www.DeepL.com/Translator (free version)

[szabesz]

Hello @pmx, welcome to the PW forums

Personally I prefer using Markup Regions, as that method produces easy to read template code:

• Official docs: https://processwire.com/docs/front-end/output/markup-regions/
• My cheat sheet: https://processwire.com/talk/topic/23641-markup-regions-pw-vs-data-pw-different-behavior/#comment-201538
• Good example on the basics: https://processwire.com/talk/topic/23641-markup-regions-pw-vs-data-pw-different-behavior/?do=findComment&comment=201505
• How to debug Markup Regions tip: https://processwire.com/talk/topic/24398-markup-regions-template-strategy-is-this-normal/?do=findComment&comment=206568
• As an advanced technique, it is even possible to hook into the rendering process but you probably won't need it: https://processwire.com/talk/topic/21852-markup-regions-in-hooks/?do=findComment&comment=208104

I hope this helps.

[pmx]

Hello @szabesz
Thx a lot for your help!
This seems really powerfull! ?
Merci beaucoup ?

[kongondo]

Hi @pmx,

Welcome to the forums and to ProcessWire.

Another alternative is to use what can be referred to as template partials. I use Tailwind myself. Recently, I faced a similar situation to yours, with <div> seemingly having to be appended to $content. Below, I'll explain how I got around this. First, to answer your questions:

2 hours ago, pmx said:

I was wondering if in the construction of the pages (as for example the basic-page.php page) it was possible to use "echo" rather than content .=

Technically possible but sort of goes against the idea of a delayed output. Also, not easy to maintain if you have to chase your 'echo's when debugging.

2 hours ago, pmx said:

Also, I was wondering if I understood the method to use to code my pages. I tried to use "echo" but the content was displayed at the beginning of the page, above the banner.

This is because in the delayed output, /site/templates/_init.php is prepended to the output and /site/templates/_main.php is appended. When you echo in your template file, e.g. basic-page.php, the output of echo comes before the output of _main.php. The idea with delayed output is that you don't echo anything in basic-page.php but defer it for later echoing in _main.php, hence the name, 'delayed' output.

Back to the alternative I mentioned above, it might seem a bit complicated and also will result in extra files but it will definitely lead to the separation of the markup, so that you don't have to deal with <div>s in your templates. I have used this approach recently for a demo site for an ecommerce module that I am developing. The demo site can be found here.

Please note that the demo site will require Padloper to use. However, I am pointing you to it as an example of the 'partial templating' I am talking about. I don't know how comfortable you are with PHP so, let me know if you want me to explain things further. Below, is an example of how a template products.php is calling and getting markup for a single product.

This is the products template. 

https://github.com/kongondo/Padloper2Starter/blob/main/products.php

On this line it calls and gets the markup of a single product to be rendered and appends it to its $content. This line calls a function renderSingleProduct() available in /site/templates/_func.php, which is a shared functions file called in /site/templates/_init.php here. The important part here is that renderSingleProduct() sets a number of variables that the partial template of single product, i.e.  single-product-html.php will need. These are $product, $totalAmount, etc. This is achieved by using the ProcessWire class TemplateFile(). For example:

<?php

namespace ProcessWire;

$totalAmount = 7895;
$foo = 'foo string';
$bar = 'bar';// could even be a value from a field of some other page

$file = "single-product-html.php";
$templatePath = $config->paths->templates . "partials/" . $file;

// CREATE A NEW 'VIRTUAL' TEMPLATE FILE
/** @var TemplateFile $t */
$t = new TemplateFile($templatePath);
// SET/PASS VARIABLES TO THE TEMPLATE
// here we create variables and set their values
$t->set('foo', $foo);
$t->set('bar', $bar);
// here, the variable $testVariable will be assigned the value of $totalAmount
$t->set('testVariable', $totalAmount);


// -------------
$out = $t->render();

// ------
// in a function, return $out.
// It will be appended to $content in your template file

Written in a hurry and not tested ?.

Edited February 5, 2022 by kongondo

[pmx]

Thanks @kongondo for taking the time to explain this to me, I'll take a look.
So I have two solutions to try ?
This topic can be considered resolved ?