Laminas MVC: Capture Content Style and Script

Show and Tell
, ,
1

Hello from the other side! Have you ever tried to capture style and script in per content basis and render it in to your main layout? Now, I’d like to share to you how I did it in Laminas MVC (formerly known as Zend Framework 3).

Goals:

  • To reduce the size of the main style and script in our application.
  • To decoupled/isolate some CSS and Javascript usage to a specific page only.

In this tutorial I will utilize the Laminas View and its helper called Placeholder. I assume that you have the basic knowledge in PHP and Laminas MVC.

Please follow the full tutorial here: https://cv.jinexus.com/tutorials/laminas-mvc-capture-content-style-and-script/

2

@JiNexus
Thanks for sharing your tutorial here, but you do not need the placeholder helper for that. You can use the related view helpers for capturing.

Please have a look at the documentation:

The HeadScript helper is a concrete implementation of the Placeholder helper.

The HeadStyle helper is a concrete implementation of the Placeholder helper.

The InlineScript helper allows you to manage both. It is derived from HeadScript, and any method of that helper is available…

1 Like
3

Thanks for pointing it out. Yeah, I saw that one too. However it does not capture multiple scripts/styles like I wanted it in this screenshot.

capture-01
capture-01708×339 30.9 KB

I even tried the HeadScript and I will end up having this.

capture-02
capture-021473×80 20.4 KB

4

I’m sorry, maybe I’m wrong but if I understand your code in the screenshots correctly then your usage is wrong. You can not capture the script tags. Use this instead:

<?php
$this->headScript()->appendFile($this->basePath('…'));
$this->headScript()->captureStart();
?>

// Add your JavaScript code here – no HTML!

<?php $this->headScript()->captureEnd() ?>

Another example which works in many IDE’s with auto-completion for JavaScript:

<?php
$this->headScript()->appendFile($this->basePath('…'));
$this->headScript()->captureStart();
echo <<<JAVASCRIPT

// Add your JavaScript code here – no HTML!

JAVASCRIPT;
$this->headScript()->captureEnd();
?>
5

But my intention is to really capture the tags and not just its contents only, so my IDE can understand that it is Javascript or CSS I am writing and not PHP.

And the code below, IMHO I really don’t like it.

echo <<<JAVASCRIPT

// Add your JavaScript code here – no HTML!

JAVASCRIPT;
6

The problem with HeadScript, InlineScript and HeadStyle is that they pre-wrap it with script/style tag that’s why it is not advisable to include tags inside the captured content which leads me to using placeholder since it does not pre-wrap anything and will allow me to captured tags inside of it when I render it later in my layout. Maybe I should add this in my tutorial’s goals to avoid confusion why I am not utilizing the existing HeadScript, InlineScript and HeadStyle. :slight_smile:

7

No worry, there are some more option to write this. For example:

/* @lang JavaScript */

The documentation of your IDE should help here.

(Btw. you can omit the type attribute for the script element. See: <script>: The Script element - HTML: HyperText Markup Language | MDN)

But do not get me wrong, you can use the helper as you like, because a framework offers this possibility. :smiley:

1 Like