0

I'm trying to add a JS Script for some specific products in the product detail page but I dont know how to. I know I can edit the xml file and add scripts there... but the source of the script specified doing it that way.

            <action method="addItem">
                <type>skin_js</type>
                <name>js/src/externalScript.js</name>
            </action>

The script I'm trying to add has a external source so Im a bit confused on how to do it.

<script type="text/javascript" src="some_external_source"></script>

Any help is much appreciated.

1 Answer 1

0

Lets have a look how other modules are adding they CSS/JS to Magento. In this example I am going to use a snippet from the Adyen Extension:

<adminhtml_sales_order_create_index>
        <reference name="head">
            <action method="addCss">
                <stylesheet>adyenstyle.css</stylesheet>
            </action>
            <action method="addCss">
                <stylesheet>adyencheckout.css</stylesheet>
            </action>
            <action method="addJs">
                <script>adyen/payment/iban.js</script>
            </action>
            <action method="addJs">
                <script>adyen/adminhtml/sales.js</script>
            </action>
        </reference>
    </adminhtml_sales_order_create_index>

This is taken from app/design/adminhtml/default/default/layout. In this example you can see that the Magento XML can be called by a reference, in this example its adminhtml_sales_order_create_index, which matches the Layout Name of the given view.

You can see that the child node referenced by head accepts action xml nodes that can have a method parameter (in our case addCss and addJs), that accept more xml nodes to specify what to add exactly. For CSS files the parameter name is stylesheet and for JS scripts, its script.

Now, to add a JS to any given product page in Magento, you can add something like this to your app/design/frontend/default/default/layout/page.xml:

<catalog_product_view>
      <reference name="head">
            <action method="addCss">
                <stylesheet>path/to/your.css</stylesheet>
            </action>
            <action method="addJs">
                <script>path/to/your.js</script>
            </action>
      </reference>
</catalog_product_view>

Don't forget to clear your cache after you are making any changes to XML files in Magento, as they are often being cached, unless you deactivate the respective Cache for XMLs in the Backend.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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