Search the Community

Hello. I have recently adopted PW markup regions and really like this way of working. However, I am also trying to learn how to use Ajax and I am not sure of a good way to use the two together. Has anyone got any experience, tips or hints on using them together? For ajax - I've used a simple scheme where I have a "webservice" template and page that handles Ajax requests and returns the appropriate content wrapped with some markup for the requesting page. I have markup regions enabled and all my pages (bar webservice) include a _main.php which brings in the headers, a default body and the footer. My javascript intercepts the page links and does my ajax call to webservice and that sends back the appropriate markup which is then placed by in the div #body defined in _main.php. Does this seem a reasonable way to work? I guess I am looking for some advice before I invest too much time going the wrong way! Any guidance, remarks, comments, or a nudge in the right direction greatly appreciated. Paul

Greetings! For our PW project we use markup regions and, for one template, url segments. The documentation recommends throwing a new Wire404Exception() from the template when the code concludes that the url segments from the request are invalid, and so we do. However, the 404 page is not displayed properly. Viewing the page source in the browser we can see that the original, unmodified markup region contents from our _init.php file is prepended to the correct html output, messing the whole page up. Any advice is greatly appreciated.

lets say, in _main.php I have some placeholder regions for content/sidebar <div id="content">foo</div> <div id="sidebar">bar</div> in my home.php template, maybe i don't want the sidebar div at all. But when I put in the intentionally blank code <region id="sidebar"></region> I simply make my sidebar div blank, it doesn't remove it. Q: Is there a slick way to simply nuke that div#sidebar entirely from markup?

I as have been a bit confused for some time about how the "Markup Regions" functionality in Processwire worked. But i have know read a bit more and think that i am getting to grips with it. And Markup Regions is going to be huge. To aid me in understanding Markup Regions better i started to read the Source code for the new "Regular" theme in conjunction with the Blog about the markup regions. It helped me a great deal to understand the basics and more fine details of it. A tip is to open both links and use the Source code of the "Regular" theme while reading the blog post. The Source code: https://github.com/processwire/processwire/blob/dev/site-regular/templates/_main.php The Blog post: https://processwire.com/blog/posts/processwire-3.0.62-and-more-on-markup-regions/ Markup Regions in ProcessWire (New - 2022-09-08) https://processwire.com/docs/front-end/output/markup-regions/ I hope this could help others starting out with markup regions. Just take it slow and read it a couple a times and soon you will see the greatness of markup regions. /EyeDentify

Hi, Yesterday I found out about the relatively new markup regions functionality and I love it. The ease of use and simplicity is just what I think is typically ProcessWire and is why Im still happy I chose for PW four years ago when changing CMS/CMF. So thanks Ryan for your vision and all you put into it. That said, Im running into an issue I'm not sure what to think of it. I have enabled markup regions in config.php and it does what I suppose it should: it replaced and all. Very neatly. The only thing I discovered is that while Im debugging some issues and I use var_dump to echo some stuff, it does that two times in a row. And this only happens when useMarkupRegions is enabled. I dont get this, does it mean the template file gets called twice (and thus the script is run twice?) or is it only displayed twice, where the first time most output is erased and /or replaced by the substituted output? I don't really get whats going on there. Is this behavior normal when using markup regions? Thanks!

The recent introduction of the Markup Regions has caused some excitement in our community, mainly for the simplicity of the proposal to output our markup, but for the various opinions about how to select and modify the regions, maybe it should not be the definitive solution. Perhaps the most correct option is to think this output strategy in the "Processwire style". Something open and versatile. The solution could be: Have the layouts files (main.php) as our "Markup Database" and then with the templates files (home.php) we can do "CRUD operations" on it before the output, using for that a jquery/processwire like API. This could be a powerful way like the current excellent API solution to manipulate the data. Where $markup come from the layout file "_main.php", in our templates files we'll can do: <?php $markup->find('#sidebar').prepend(' ?> <div class="foobarcontainer"> <h3>Hello <?php echo $page->foo ?></h3> <p><?php echo $page->bar ?></p> </div> <?php '); ?> <?php if ($hidecomments) $markup->find('.comment').addclass('close'); ?> <?php $markup->find('#sidebar .contact ul').remove(); ?> Etc. Think about the possibilities, it will no longer be necessary to define regions, the regions are any part of the document It's just an idea, maybe is a really hard to-do solution, but will be perfect for the Processwire ecosystem as the direct-delayed output workflow. In GitHub already are several php libraries for select DOM elements using any css selector in a jquery like style.

As a graphic designer I like the new options to output markup with the templates (region function and regions markup strategy) but testing them I think they could adapt a little more for ease of use. In this proposal I modify the syntax and the way of assigning the values, while I try to maintain the concept. Next the common example, in "_main.php" <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[pw headseo]--> <!--[/pw]--> <!--[pw headstyles]--> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> <!--[/pw]--> <script src="js/vendor/modernizr-2.8.3.min.js"></script> <!--[pw headscripts]--> <!--[/pw]--> </head> <body> <!--[pw header]--> <h1><?php echo $page->title(); ?></h1> <!--[/pw]--> <!--[pw body]--> <?php echo $page->body(); ?> <!--[/pw]--> <!--[pw footer]--> <!--[/pw]--> <!--[pw footerscripts]--> <script src="js/jquery.min.js"></script> <!--[/pw]--> </body> </html> then in the template file "home.php" <!--[pw headstyles+]--> <link rel="stylesheet" href="css/home.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <!--[/pw]--> <!--[pw head+]--> <h2><?php echo $page->headline(); ?></h2> <!--[/pw]--> <!--[pw footer]--> <h3>About Homepage</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur dignissim nisi nec consequat.</p> <!--[/pw]--> Well I'm not a programmer, I hope you understand the above. But the idea is: Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag. Using the open/close tag system allow the use of IDE features for html as auto-completion, code coloring, code validation, visual previews and more. Allowing populate the initial values for regions without variables concatenation and with the previous advantage (auto-completion, code coloring, etc) The pages can be render without additional Ids and class, maybe useful for debugging and can be cleaned in production with something like $config->cleanRegions = true; It can support the current prepend, append, before, after etc regions strategy, I think its a mix of the current Region Markup. As I said I am not programmer but I think it can be implemented using Output Buffering ob_start (); ob_end_clean (); capturing the code between open/close comments tag and assigning them to the corresponding region ... If someone likes and have time to analyze and improve this idea, are welcome because I don't know how to implementing it .. sorry

I've been switching a site from using the Twig Template module to using the new Markup Regions and it's been fantastic! @ryan have you considered a placement attribute that will append/prepend/replace just the content of the attributed element, rather then the element itself? For example, my head tag is <head pw-id="head"> On one of my templates, I have some scripts and styles I need to append to the <head> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script> <script src="https://unpkg.com/esri-leaflet@2.0.7"></script> As it stands I need to add pw-append="head" to every element: <link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> <link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" /> <link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" /> <script pw-append="head" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script pw-append="head" src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script> <script pw-append="head" src="https://unpkg.com/esri-leaflet@2.0.7"></script> It would be great if I could wrap these with a <div> or similar, and use a placement attribute that would add all the children of the div, without adding the div itself. <div pw-append-contents="head"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script> <script src="https://unpkg.com/esri-leaflet@2.0.7"></script> </div> Or maybe this is already possible with some other technique I'm not aware of?