Smarty Forum Index Smarty
The discussions here are for Smarty, a template engine for the PHP programming language.
Moving javascript to the bottom of the page

 
Post new topic   Reply to topic    Smarty Forum Index -> General
View previous topic :: View next topic  
Author Message
claassen
Smarty n00b


Joined: 09 Oct 2013
Posts: 2

PostPosted: Wed Oct 09, 2013 2:50 pm    Post subject: Moving javascript to the bottom of the page Reply with quote

Hi everyone,


we've been using Smarty for quite a while now, and recently we succesfully upgraded to Smarty 3. Our next improvement is targeting our pagespeed, and we want to move all <scripts> to the bottom of our page. The problem is that we are working with includes, and every included file requires it's own scripts.

Currently, a typical page looks like this:
Code:
{include file="header.tpl"}
{include file="header_sub.tpl" includeHeaderSubSub=$shouldIncludeHeaderSubSub}

<script src="some-js-file.js"></script>
[Some more HTML content here]

{include file="footer.tpl"}

Where both the header.tpl and header_sub.tpl include some <script>s. Our header_sub.tpl also includes another file, based on the variable $includeHeaderSubSub. This file also has it's own <script> tags. We have 3 different sub headers, so these are splitted nicely from the header.tpl file.

I've tried moving to Template Inheritance, and using a {block} for the scripts that go at the bottom of the page. So, our typical page would look like:
Code:
{extends file="layout_header_sub.tpl"}

{block name="footer-scripts"}
<script src="some-js-file.js"></script>
{/block}
{block name="content"}
[Some more HTML content here]
{/block}


File layout.tpl would be the root file, with the header and footer (the footer-scripts block will be at the bottom of the footer.tpl file)
Code:
{include file="header.tpl"}

{block name="content"}{/block}

{block name="footer-scripts"}{/block}

{include file="footer.tpl"}

File layout_header_sub.tpl
Code:
{extends file="layout.tpl"}

{block name="footer-scripts"}
  <script src="some-js-file.js"></script>
{/block}

{block name="content"}
  {include file="header_sub.tpl" includeHeaderSubSub=true}

  {$smarty.block.child}
{/block}

The problem now lies in the header_sub_sub.tpl, which is not always required. When it should be included, it wants to add it's own scripts. Like this:
Code:
{block name="footer-scripts"}
  <script src="another-js-file.js"></script>
{/block}

[Some HTML content here]

But because it is included, and not inheriting, the Smarty compiler seems to think that this is the place where all scripts should be rendered.


So, my question is.. how can we move all scripts to the bottom of the page? Is Template Inheritance with {block} the way to go, and if so, how can we make it work? Or is there another technique I completely missed? How are you guys making sure all your script tags are at the bottom of your page?
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7299
Location: Lincoln Nebraska, USA

PostPosted: Wed Oct 09, 2013 4:02 pm    Post subject: Reply with quote

Does something like this not work?

layout.tpl:

Code:
<html>
<head><head>
<body>
{block name="scripts"}{/block}
</body>
</html>


Then for a template extending layout:

foo.tpl:

Code:
{extends file="layout.tpl"}
{block name="scripts"}
  // insert scripts here for page foo
{/block}
Back to top
View user's profile Send private message Visit poster's website
claassen
Smarty n00b


Joined: 09 Oct 2013
Posts: 2

PostPosted: Thu Oct 10, 2013 7:52 am    Post subject: Reply with quote

That works great, when the header_sub_sub.tpl isn't being included. When it is being included (not through extending, but through {include}'ing), the scripts are all inserted at the position where header_sub_sub.tpl says {block name="scripts"}
Back to top
View user's profile Send private message
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7299
Location: Lincoln Nebraska, USA

PostPosted: Thu Oct 10, 2013 1:31 pm    Post subject: Reply with quote

Why not get rid of all the {include ..} tags, make your sub-templates part of the main layout and manage the content with blocks? I'm not completely following what is going on here, but you probably don't need to handle header/footers with sub-templates when going to template inheritance.

Think of it like PHP objects instead of using php include()'s.
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    Smarty Forum Index -> General All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP