Magento Forum

   
Howto add JS only when it is needed? 
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 

I have a flash banner on the homepage that requires <a href="http://code.google.com/p/swfobject/">swfobject</a>.

I have got this working by adding to layout/page.xml in the <block type="page/html_head" name="head" as="head"> block either:-

<action method="addItem"><type>skin_js</type><name>js/swfobject.js</name></action>
or
<action method="addJs"><script>swfobject.js</script></action>
... having added the js to the respective locations.

Obviously the 2nd approach is favorable because the script is added to the single line script declaration which looks to be something like <a href="http://code.google.com/p/minify/">minify</a>

my questions are:-

1. I could not add the hosted version http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js because magentos prepended the absolute url of the location (current skin dir or /js/ respectively)

2. Is there a way to only add this when a specific block is showing? The flash element only appears on the homepage so i would rather the script is only added on the homepage. Other CMS such as joomla allow me to add js to the head from a module.

Obviously it is not a big deal with an optimised script like swfobject (10kb) which is then minified with the other scripts but im just learning this system and id like to know how to do things right.

Following is how i (eventually) worked out how to add the flash banner to the homepage.
Not sure if it is the right way so please feel free to correct me!

added to {currentDesign}/template/page/3columns.phtml

<?php echo $this->getChildHtml('above-right-cols'?>

added to {currentDesign}/layout/page/page.xml

<block type="core/text_list" name="above-right-cols" as="above-right-cols"/>
(and the swfobject code above)

added to CMS->Manage Pages->Home page->Custom Design->Layout Update XML (couldn’t work out how to show it only on the homepage in code)

<reference name="above-right-cols">
     <
block type="core/template" name="flashAd" template="custom/flashbanner.phtml"/>
</
reference>

created {currentDesign}/template/custom/flashbanner.phtml

<div id='above-right-cols'>
    <
div id='flashAd'>
        <
img src='<?php echo $this->getSkinUrl('images/media/SOA-Flash-banner.jpg') ?>' />
    </
div>
    <
script type="text/javascript" language="javascript">
        
swfobject.embedSWF('<?php echo $this->getSkinUrl('flash/SOA_flash_banner.swf') ?>''flashAd''733px''251px''8.0.0');
    
</script>
</div>

so.. hope i haven’t muddied the waters with too many questions… mainly i would like to know how to selectively add JS to the header for that paticular block. Any other advice on what i have done would be greatly appreciated.

thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 

hmm.. links to swfobject and minify showed up in preview… whats the correct syntax?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Well, you can add this directly to your CMS homepage. It doesn’t seem to do any harm and html validator doesn’t complaint either.

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript\">
</script>

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 

yeah cool. That solves the hosted version issue (users possibly have it cached etc) and only including it on the pages that need it but im still wondering if there is a way to add it to the header (where it should be) and maybe in the single minified output. (though then there is an issue with them having to download and cache minified-scripts-without-swfobject and minified-scripts-with-swfobject which is pretty inefficient)

As i said, its not a big deal… im just trying to learn this system and working out what it can do.

in joomla i would do the following to add a script to the header from a module.

$doc =& JFactory::getDocument();
$doc->addScript"http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js");

which seems similar to the xml

<action method="addJs"><script>swfobject.js</script></action>

but i couldn’t seem to get that to work only for a particular block.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Magento is very flexible.

You can add the code to
1. page.xml (site-wide - same server, added to proxy.php *)
2. cms.xml (applies to all cms pages - same server *)
3. homepage cms page (limited to homepage only - can link to google)
4. your ‘flashbanner.phtml’ (limited to where your flash banner is - can link to google)
5. head.phtml (all pages - can link to google )
6. template.phtml (2columns-left.phtml for example - can link to google)

* Maybe able to add to external link, but never tested as I don’t have a need for it and don’t see benefit to do so when I can do it with #2 to #6. Example of possible code:

<action method="addLink" translate="label title” module="cms/page"><url>http://another-site.com/js-script.js</url><title>js file</title><prepare/><urlParams/></action>

then delete “translate="label title” module="cms/page"”

 
Magento Community Magento Community
Magento Community
Magento Community
 
nikefido
Guru
 
Avatar
Total Posts:  481
Joined:  2008-07-11
New Haven, CT
 

WIll “addLink” work?

JS files are “included” via a <script> tag, not a <link> tag like CSS. Can you use “addJs” with the same parameters? (<url>) ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 

Thanks Chinesedream. I guess i just don’t like adding scripts to the body of my pages. Call me pedantic but its not best practices. unobtrusive js etc.

both:-

<reference name="head">
     <
action method="addJs"><script>swfobject.js</script></action>
</
reference>
and
<action method="addItem"><type>js</type><script>swfobject.js</script>

added to the CMS homepage custom design result in swfobject being added to the js/index.php proxy minifying script in the header. Which is good.

substituting <script> for <url> allows you to specify a full url… however this is also added to the minifying script which does not work.
Is there a way to add a script in the header in its own script declaration?

also.. addlink does not work as it adds a link (as for css)

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gui
Guru
 
Avatar
Total Posts:  588
Joined:  2008-03-09
 

hey Dorgo,
I like the idea of only addind extra js-files wenn need so I am trying to use your method. When I update the CMS to include the swfobject.js.  (CMS->Manage Pages->Home page->Custom Design->Layout Update XML) with this code:

<reference name="head">
     <
action method="addJs"><script>swfobject.js</script></action>
</
reference>
I get a “SWFObject is not defined” When I look at the source, the swfobject.js is neatly added to the scriptline. But for some reason it doesn’t come through.

When I make a custom page.xml directly it works great.

Cache is off. Any idea what is wrong? Is it able to work that way or have I misunderstood this thread?

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
Dorgo - 03 February 2009 03:10 PM

Thanks Chinesedream. I guess i just don’t like adding scripts to the body of my pages. Call me pedantic but its not best practices. unobtrusive js etc.

Dorgo, either it’s you or me who are not fully understand what exactly “unobtrusive” means smile

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Strictly speaking, using a flash slideshow has already creating “obstrucive” so IMHO you should be eliminating the flash file if you are really after the “unobtrusive js” practices :
1. obstructive because it’s not progressive enhancement
2. it can’t be used in assistive user agent.

Yes, it’s desirable and the best practice to not place inline js script, but we can’t do this with Magento as it has already come with many inline js script in many phtml files – I would love to get rid of them but my practical-self knows better that I don’t waste time to make such furtile attempt. However, I do not see adding a link like this in the body has anything to do with “Unobtrusive”

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript\"
</script>

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 
Gui - 04 February 2009 03:16 PM

hey Dorgo,
I like the idea of only addind extra js-files wenn need so I am trying to use your method. When I update the CMS to include the swfobject.js.  (CMS->Manage Pages->Home page->Custom Design->Layout Update XML) with this code:

<reference name="head">
     <
action method="addJs"><script>swfobject.js</script></action>
</
reference>
I get a “SWFObject is not defined” When I look at the source, the swfobject.js is neatly added to the scriptline. But for some reason it doesn’t come through.

When I make a custom page.xml directly it works great.

Cache is off. Any idea what is wrong? Is it able to work that way or have I misunderstood this thread?

Hi Gui,

anything that is added to the proxy script /js/index.php is relative to /js/
have you put swfobject.js in /js/ ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 
chinesedream - 04 February 2009 03:30 PM

Dorgo - 03 February 2009 03:10 PM
Thanks Chinesedream. I guess i just don’t like adding scripts to the body of my pages. Call me pedantic but its not best practices. unobtrusive js etc.

Dorgo, either it’s you or me who are not fully understand what exactly “unobtrusive” means smile

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Strictly speaking, using a flash slideshow has already creating “obstrucive” so IMHO you should be eliminating the flash file if you are really after the “unobtrusive js” practices :
1. obstructive because it’s not progressive enhancement
2. it can’t be used in assistive user agent.

Yes, it’s desirable and the best practice to not place inline js script, but we can’t do this with Magento as it has already come with many inline js script in many phtml files – I would love to get rid of them but my practical-self knows better that I don’t waste time to make such furtile attempt. However, I do not see adding a link like this in the body has anything to do with “Unobtrusive”

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript\"
</script>

Well from the wiki page “Separation of functionality (the “behavior layer") from a Web page’s structure/content and presentation” and “Traditionally, JavaScript often was placed inline together with an HTML document’s markup ... However, the purpose of markup is to describe a document’s structure, not its programmatic behavior. Combining the two negatively impacts a site’s maintainability for the same reason that combining content and presentation does

I like to keep my scripts in the header if possible.

As for the “progressive enhancement” aspect you are talking about, I have an existing static image banner that i am dynamically replacing with swfobject. If the user does not have javascript, it gracefully degrades to a static image.

i guess this is probably futile*… but as i said, im just trying to explore the capabilities of the system by aiming for ideals.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Gui
Guru
 
Avatar
Total Posts:  588
Joined:  2008-03-09
 

Sorry to interup this discussion. Just to let you know. The problem I had was a corrupt swfobject.js it appears. After I replaced it it started working. Using the update XML methode now. thanks

<quote>If the user does not have javascript, it gracefully degrades to a static image. </quote>
I think you mean flash?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dorgo
Sr. Member
 
Total Posts:  127
Joined:  2008-12-16
 
Gui - 05 February 2009 12:08 AM

<quote>If the user does not have javascript, it gracefully degrades to a static image. </quote>
I think you mean flash?

No, i do mean javascript.... smile

Using the dynamic method which replaces a html element with a flash object using javascript. (swfobject.JS)
... of course swfobject will not replace if the user does not have flash either.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top