Jump to content
snobjorn

Markup Regions pw vs data-pw different behavior

Recommended Posts

I am trying Markup Regions for the first time on a site these days. And I have read Markup Regions Front-End Docs at ProcessWire.com. There is says that "pw-" and "data-pw-" is doing the same thing. Although I get different output when I try both in the same situation.

E.g. when I am trying to append a <script>-tag, I need to add data-pw-append=footer. With just pw-append, it will output the script above <doctype> and <html>. Also, I need to use data-pw-append inside a php function, with pw-append the same as above happens.

Other places, I cannot recall exactly where, the opposite happens. Where I have to use pw-append instead of data-pw-append. (Or pw-id instead of data-pw-id).

Is this normal behavior? Is there any more documentation on usage I have missed perhaps?

Share this post


Link to post
Share on other sites

Not an answer, but question;

What is your impression, is it worth to make the change? 

I also wanted to give it a try, but not had the first step still.. 

Share this post


Link to post
Share on other sites

@huseyin I think it is worth the change for me. I used a method where i included head.php, header.php and foot.php on each template. Now I have it all in _main.php. That alone was a step for me in the right direction.

Also, I have moved a lot of code around. My site has grown over time, so it was a lot of if statements in head.php e.g.:

if ($page->template == "basic-page") { …

Now I solve it with regions in _main.php and each template file.

Still getting to know Markup Regions though.

Share this post


Link to post
Share on other sites

Hi @snobjorn, I do not use markup regions myself, but maybe doing a g**gle search like this:

?q=site:processwire.com/ Markup Regions

will reveal something relevant you don't know?

image.thumb.png.2268e569a663f58b2c620f30adcbaae4.png

Spoiler

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=2ahUKEwiribHf1rDpAhWnxMQBHf6RDcIQFjAAegQIBxAB&url=https%3A%2F%2Fprocesswire.com%2Fdocs%2Ffront-end%2Foutput%2Fmarkup-regions%2F&usg=AOvVaw1N7TDeeq0W5qtPoXfJPTMp
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=2ahUKEwiribHf1rDpAhWnxMQBHf6RDcIQFjABegQIBBAB&url=https%3A%2F%2Fprocesswire.com%2Ftalk%2Ftopic%2F19424-confused-about-markup-regions-in-pw-read-this%2F&usg=AOvVaw1yaYdOuj4f5LRbmbwT1crQ
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=2ahUKEwiribHf1rDpAhWnxMQBHf6RDcIQFjACegQIAxAB&url=https%3A%2F%2Fprocesswire.com%2Fblog%2Fposts%2Fprocesswire-3.0.62-and-more-on-markup-regions%2F&usg=AOvVaw1ZYR0Sbtz4xoRxzDgyrju1
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&uact=8&ved=2ahUKEwiribHf1rDpAhWnxMQBHf6RDcIQFjADegQIAhAB&url=https%3A%2F%2Fprocesswire.com%2Fblog%2Fcategories%2Fmarkup-regions%2F&usg=AOvVaw20BZCK-05yrxrUrdtCVbVO
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=6&cad=rja&uact=8&ved=2ahUKEwiribHf1rDpAhWnxMQBHf6RDcIQFjAFegQIBRAB&url=https%3A%2F%2Fprocesswire.com%2Ftalk%2Ftopic%2F15684-more-about-markup-regions-a-mixed-proposal%2F&usg=AOvVaw1JJ_Q4DOiXRoF0sF_hb-9q
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=16&cad=rja&uact=8&ved=2ahUKEwiEpJys17DpAhUpxaYKHc8qBz04ChAWMAV6BAgJEAE&url=https%3A%2F%2Fprocesswire.com%2Ftalk%2Ftopic%2F16681-build-up-website-with-regions%2F&usg=AOvVaw33XRLU_V6WsybQ-L9Tv7J7
 

 

 

Share this post


Link to post
Share on other sites

Could post a brief code snippet of what you are trying to do?

I am assuming you should have something like this:

On _main.php:

<footer id="footer-region">

...

</footer>

On other_template.php

<div id="footer-region" pw-append>

<script>...</script>

</div>

 

@huseyin Just to give my personal opinion, I just really like that with markup regions you can code the markup pretty much like if you were doing normal template output, no string concatenation to fill up a variable to output content, instead of doing that you wrap your markup with the Markup Regions conventions. That would probably be the downside, that you have to understand that maybe not all markup visible in your code, will actually end up in the output markup (depending on how you use it!), and this has sometimes caused me confusion while coding, but nowadays I practically code all my templates with markup regions strategy. 

So in conclusion, I see it more as a "style" rather than something better or worse. 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

I always use the Markup Regions, until now I haven't needed more complicated system in my projects. Roughly this is my standard configuration:

_main.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="..3rd_party_styles_1.css">
    <link rel="stylesheet" href="..3rd_party_styles_2.css">
    <pw-region id="styles_area"></pw-region><!--#styles_area-->
    <link rel="stylesheet" href="..my_main_style.css">
    <pw-region id="head_area"></pw-region><!--#head_area-->
</head>
<body>
    <header>
        Header Content Here
    </header>
    <div class="container">
        <pw-region id="content_area"></pw-region><!--#content_area-->
    </div>
    <footer>
        Footer Content Here
    </footer>
    <pw-region id="append_area"></pw-region><!--#append_area-->
    <script src="..3rd_party_scripts_1.js"></script>
    <script src="..3rd_party_scripts_2.js"></script>
    <pw-region id="scripts_area"></pw-region><!--#scripts_area-->
    <script src="..my_main_scripts.js"></script>
</body>
</html>

template_file.php

<?php namespace ProcessWire; 
    $vars_or_arrays = "fill_some_vars_or_arrays_here";
?>

<pw-region id="styles_area">
    <style>
      	body { background: #F2F2F2 !important; }
        h2 { text-transform: uppercase !important; }
        .classA { background: red; }
        .classB { font-size: 2rem; }
    </style>
</pw-region>

<pw-region id="head_area">
    <link rel="dns-prefetch" href="//example.com">
    <link rel="preconnect" href="//example.com">
    <link rel="prefetch" href="image.png">
</pw-region>

<pw-region id="content_area">
        Here render your page content from $page or using $pages, $vars_or_arrays, etc.
</pw-region>

<pw-region id="append_area">
    <div class="modal">
        <a href="#">close</a>
        <div class="modal_body">
            Content of modal window
        </div>
    </div>
</pw-region>

<pw-region id="scripts_area">
    <script src="..3rd_party_scripts_3.js"></script>
    <script>
        window.onload = function(event) {
            alert('Hello World!');
        }; 
    </script>
</pw-region>

Use the regions from the main layout as needed on each page, to add a modal window, run a javascript, add styles, etc. I always use <pw-region> because this element is removed from the final markup if it's not used in the template file.

  • Like 2

Share this post


Link to post
Share on other sites

"Markup Regions pw vs data-pw different behavior"
I have not yet experienced such a behavior. Maybe you are mixing up "Boolean action attributes (inner HTML)" with "Action attributes with value (outer HTML)"? Regarding the differences between these two, see my explanation below.

18 hours ago, elabx said:

Could post a brief code snippet of what you are trying to do?

+1

Here is my simplified docs for markup regions, we can also call it "cheat sheet". I wrote it some time ago:

Defining markup regions

Basic region

Wrapping tags do appear in the final markup. Children tags are preserved if not explicitly replaced.
<div id="hello"> OR <div data-pw-id="hello">
data-pw-... They are removed from the final output and thus not visible to front-end markup, while id="..." is not removed!

Placeholder region

Only the inner HTML will be used and the wrapping tags won't appear in the final markup. 
<pw-region id="hello">...</pw-region>

Good for groupping tags in the <head> eg.: <pw-region id="site_scripts"> 

Optional region

It will be automatically removed from the document markup if nothing populates it, so it is a region which should be empty by default.
<div id='hello' data-pw-optional></div>

Examples:

  • an <ul>, which [according to HTML5 specs] is required to have one or more <li> elements within it, otherwise it's invalid HTML.
  • a sidebar which is only needed on pages populated with widgets

/* -------------------------------------------------------------------------------------------------- */

Populating markup regions

Available action attributes:

  • data-pw-replace: replaces a region’s markup
  • data-pw-append: appends markup to a region
  • data-pw-prepend: prepends markup to a region
  • data-pw-before: inserts markup before a region
  • data-pw-after: inserts markup after a region

Boolean action attributes (inner HTML)

Only applies the inner HTML to the region.

TARGET CODE: <div id='hello'> <h2> Hello World </h2> </div>

  • <p data-pw-id="hello" data-pw-append> This text will APPEND to div#hello </p>
  • <p data-pw-id="hello" data-pw-prepend> This text will PREPEND to div#hello </p>
  • <p data-pw-id="hello" data-pw-before> This will insert this text BEFORE div#hello </p>
  • <p data-pw-id="hello" data-pw-after> This will insert this text AFTER div#hello. </p>

RESULTS:

This will insert this text BEFORE div#hello
<div id='hello'>
	This text will PREPEND to div#hello
	<h2> Hello World </h2>
	This text will APPEND to div#hello
</div>
This will insert this text AFTER div#hello

Action attributes with value (outer HTML)

All of the markup that you specify (the outer HTML) becomes part of the final document markup (except for the pw-* attributes):

TARGET CODE: <div id='hello'> <h2> Hello World </h2> </div>

  • <p data-pw-append="hello"> This paragraph will APPEND to div#hello </p>
  • <p data-pw-prepend="hello"> This paragraph will PREPEND to div#hello </p>
  • <p data-pw-before="hello"> This will insert this paragraph BEFORE div#hello </p>
  • <p data-pw-after="hello" class="world"> This will insert this paragraph with class "world" AFTER div#hello. </p>

RESULTS:

<p> This will insert this paragraph BEFORE div#hello </p>
<div id='hello'>
	<p> This paragraph will PREPEND to div#hello </p>
	<h2> Hello World </h2>
	<p> This paragraph will APPEND to div#hello </p>
</div>
<p class="world"> This will insert this paragraph with class "world" AFTER div#hello. </p>

/* ------------------------------------------------  ------------------------------------------------ */

Adding HTML attributes

Any HTML attribute you add to the action tag that does not begin with pw- or data-pw- will be added to the originally defined region tag.

TARGET CODE: <ul id="foo" class="bar"> <li> First item </li> </ul>
ACTION CODE: <ul data-pw-append="foo" title="Hello"> <li> Second item </li> </ul>

RESULTS: 

<ul id="foo" class="bar" title="Hello">
	<li> First item </li>
	<li> Second item </li>
</ul>

Adding and removing classes

  • Classes from the action tag and the region tag are merged by default.
  • To remove a class by the region action: prepend a minus sign to the class to be removed, eg: class="-foo bar" will result in class="bar"

 

 

  • Like 10

Share this post


Link to post
Share on other sites

 Thanks for the cheat sheet, @szabesz. And you're code is great inspiration @Pixrael.

Here's my code, @elabx, or parts of it. This is the code that gives me correct output.

_main.php

<?php namespace ProcessWire; ?>
<!doctype html>

… template stuff

<footer pw-id=footer>
    … more template stuff
</footer>

</body>
</html>

some-page-template.php, the relevant code at the bottom:

<?php namespace ProcessWire; ?>

… template stuff

<?php
    echo "<script data-pw-append=footer src=\"" . $config->urls->templates . "theme/js/showmore.min.js\"></script>";
    echo "<script data-pw-append=footer type=\"application/ld+json\">" . json_encode($schema_review) . "</script>";
?>

But if I edit the last part, to <script pw-append=footer… instead of data-pw-append, it will output the scripts before <!doctype html>. That is what I don't get. Reading about the two variations being similar in usage.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By JoelB95
      Hi everyone,
      I'm new to processwire and I'm trying to figure some things out. I really like the idea of markup regions but everytime I end up with some double executed PHP scripts. 
      This is in my config.php
      $config->useMarkupRegions = true; $config->appendTemplateFile = '_main.php'; This is the markup element in my _main.php
      <div id="page-content"> <!-- Fill content --> </div> This my overview.php template
      <?= 'test' ?> <div id="page-content"> <h1><?=$page->title?></h1> Overview page </div> If I add some php code to the _main.php or overview.php template, it will be executed twice. For example, like in overview.php, when I echo 'test' at the top of this file, it will output testtest at the top of my page (I added a screenshot). However, the page title will only display once. I also had this problem in my _func.php file. I do not really understand where I have to include my _func.php file now, while using markup regions. In the config or main? Or somewhere else? Can anyone help me into the right direction? Thanks!

×
×
  • Create New...