1

I hope this site is friendly to beginner questions.

I would like to add some javascript for sitewide effect. Specifically, I want to make it so that when you scroll down a page, certain elements (e.g. the Category nav, and the Filter bar which I have set horizontally above catalog products) stick to the top and stay visible as you go down the page. Other elements, like the header area where the Logo and search bar sit (in my design), would get covered by these.

For reference, I am looking at this jquery code: http://viget.com/inspire/jquery-stick-em You can see how the author's face "sticks" to the bottom of the header element and stays there as you scroll down. But my question isn't about making this or that particular javascript code work, it's more general.

My question is, where do I place the javascript code to follow the intended use of Magento's design?

Where would I put the javascript if, for example, I just wanted it to affect the product view pages?

4

Welcome to Magento.SE!

Because this is theme-related, you would place it in the skin/js folder in your theme's path; something like:

[mage-root]/skin/frontend/[yourpackage]/[yourtheme]/js/jquery.waypoints.js

Next you'll need to add some layout xml to shove this into your theme; possibly in your theme's layout/local.xml file; this is how you achieve the 'targeting' you were asking about earlier:

<catalog_product_view>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/jquery.waypoints.js</name></action>
    </reference>
</catalog_product_view>

If you want layout xml for sitewide, change catalog_product_view to default.

I recommend you look into jQuery Waypoints, my personal favorite sticky-header JS that does so much more.

| improve this answer | |
  • Thanks for your answer. I think that will work for product view changes. Could you add the xml for sitewide changes? For the sticky-header, it is going to be active on all or most site pages, or at least on all catalog and search pages. – Buttle Butkus Aug 9 '13 at 2:59
  • Also, are you sure it's skin/js/frontend/ and not just skin/frontend ? – Buttle Butkus Aug 9 '13 at 4:14
  • Sorry - mistyped it! – philwinkle Aug 9 '13 at 13:56
  • See my update about changing the xml tag for sitewide. – philwinkle Aug 9 '13 at 13:57
  • Thanks for the update. I tried writing my own custom jQuery to accomplish what I wanted but it is coming out very buggy. So now I'm trying waypoints. It looks cool, but I'm following the example here: imakewebthings.com/jquery-waypoints/#get-started and I'm getting an error in the console, "notify is not defined". Any ideas? – Buttle Butkus Aug 11 '13 at 5:57

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.