0

I've written a jQuery file that creates a dialog box to let the user search for store a location near them, and I've included the HTML necessary for this function on the "header.phtml" page in app/code/design/frontend/rwd/default/template/page/html/header.phtml.

When I include the script directly on header.phtml, I have no problems with the modal.

I have placed my jquery script in the JS folder of the magento root. However, when I try to just include the JS file, it doesn't show up as an included JS file. I tried adding the reference to the file in page.xml that corresponds to header.phtml, but it still wont work.

 <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>varien/menu.js</script></action>
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>
            <action method="addJs"><script>pathtomyfile/location.js</script></action>

Is there a step that I missing to get this file to be referenced properly?

Am I placing this reference in the wrong layout file?

  • template="page/3columns.phtml" just checking, are you actually using a 3 columns template for your page? – Julien Lachal Oct 17 '14 at 14:10
  • Can you explain more, did you view browser source? Is the script there, is the path incorrect, are you merging js, did you clear cache? – Renon Stewart Oct 17 '14 at 14:10
1

You can use this in your page.xml:

<action method="addItem"><type>skin_js</type><name>js/jQuery.min.js</name></action>

it should work, and load the js from your skin folder.

Much better idea than using xml to load jQuery is to load it in your header from a CDN go to your head.phtml and add this before <?php echo $this->getCssJsHtml() ?> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="<?php echo $this->getSkinUrl('js/jquery.min.js'); ?>"%3E%3C/script%3E'))</script>
<script>
    jQuery.noConflict();
</script>

I added jQuery.noConflict(); to fix the conflict with prototype. Also add jquery to your skin inside the JS folder, so if the CDN is not working the system will load it from your template

  • Why would you load a JS from the skin folder rather than fropm the JS folder? explain. – Julien Lachal Oct 17 '14 at 14:43
  • So if I move the template to production I don't have to copy anything form the JS folder only my template folder, If I have problem with the upgrade I can replace all magento files with the new version without worrying about the JS folder and what is inside it. – Ahmed Elawadi Oct 17 '14 at 14:46
  • On Clean Magento installation I have added this : '<action method="addItem"><type>skin_js</type><name>js/jQuery.min.js</name></action>' as I said and it is working. – Ahmed Elawadi Oct 17 '14 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.