How do you add a class to a div in a Magento layout? I want to change it on only one of my pages. By default, I have:
<div class="col-left sidebar">
I want:
<div class="col-left sidebar my-class">
I can't change this in 2-columns-left because it will change on all pages of Magento. Is it possible?
If you just want to change one page, you could try copying the 2-columns-left template, renaming and editing it, then editing the page to use the new template.
Rename and edit the 2-columns-left.phtml file. This is found in /app/design/frontend/default/YOUR_THEME/template/page . At around line 50 you'll see the <div class="col-left sidebar"> line.
Edit the config.xml file so that the page uses the new template. Config.xml is in /app/code/core/Mage/Page/etc . About halfway down you'll see code referring to two_columns_left; copy this code, and edit it to point to the new page.
Finally, edit the page through the backend > CMS > Pages to use the new template. You can now add styles through the CSS in your theme.
More instructions here.
Method 1 - layout.xml :
a. For files you want to include on every page
For css or js files you want to add to every page, you edit the page.xml files located in your layout folder (app/design/frontend/default/your_theme/layout/page.xml). Within this file, at the top you will find the <default> area with the **<block name="root" … >**. This block has a child named head which contains the included css and js elements.
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
...
</block>
Here you can add your javascript and css. Note that any Js files you add are relative to the “js” folder in your root directory. The css files are included from the skin files of the current and default templates (skin/frontend/default/your_template(& default)/css).
b. Specific areas
If you want to include css or js on only certain areas (such as the checkout process or catalog pages), you can do that also. For instance, if you want it in a single product view (product view vs product list), you can open up catalog.xml, find <catalog_product_view> area (near line 168 in vs 1.2.1). Add your code in there – notice that we are using the <reference> tag rather than <block> tags. We use the “reference” tag to reference other blocks that are in other areas of the template.
<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>
<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/lang/calendar-en.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>
</reference>
The use of can also be used in your layout XML areas in the admin backend (CMS pages, category and product designs). This can accomplish the same thing, as well as adding or removing other blocks.
Method 2 - Block Code :
We can accomplish all of this in code as well. These functions are defined within Mage_Page_Block_Html_Head. So, we can use this code with in a block class (not a .phtml file!):
$headBlock = $this->getLayout()->getBlock('head');
$headBlock->addJs('somefolder/yay.js');
I suggest looking over the page.xml files as long as finding the removeItem syntax ($type, $name for the method, for the xml), which will be very handy for you for adding or removing assets as and when you need them!
<action method="removeItem"><type>js</type><name>calendar/calendar.js</name</action>
$this->getLayout->getBlock('head')->removeItem('js', 'calendar/calendar.js');
The article was published : http://www.exploremagento.com/magento/adding-and-remove-js-css.php
Related
How can I add a custom code i.e. Facebook retargetting or conversion pixel, etc. to a section of a SPECIFIC page? (not global)
I am using the latest magento version.
Thanks
You can accomplish this cleanly using Magento’s layout system. Create or modify the local.xml file in your current theme’s layout subdirectory. Add a new layout update like this:
<!-- Add Facebook retargeting pixel on success page. -->
<checkout_onepage_success>
<reference name="before_body_end">
<block type="core/template" name="fb_retargeting" template="tracking/fb_retargeting.phtml"/>
</reference>
</checkout_onepage_success>
Notice that this layout update is targeting the <checkout_onepage_success> handle, which corresponds to the /checkout/onepage/success page. If you need to target a different page, you have to figure out the layout handle for that page. The handle is created by combining the route name, controller name, and controller method into a single underscore-separated string.
Now you just need to create your template file in your current design’s template subdirectory. In my above example, the template being referenced should be created at: app/design/frontend/.../template/tracking/fb_retargeting.phtml. You would just put the markup for your tracking pixel in that file.
1) If its going to be a CMS pages you can add in the design tab Layout Update XML and add custom xml code, for example
<reference name="head">
<block type="module/block" name="module" template="module/view.phtml" ></block>
</reference>
2) If this need to be in other pages, you can add same code in local.xml of your theme file
go to app/design/frontend/base/your theme/template/page/html/head.phtml
$currentUrl = Mage::helper('core/url')->getCurrentUrl();
$url = Mage::getSingleton('core/url')->parseUrl($currentUrl);
$path = $url->getPath();
if($path == your specic page url){
your code.
}
I have created a mega menu group. but i stuck at relating it to file.
All i can see form a default one is
<block type="core/text_list" name="megamenu_left" as="megamenu_left" translate="label">
<label>Left Megamenu</label>
</block>
In Home page(Backend > Design Section):
<reference name="megamenu_left">
<block type="megamenu/list" name="megamenu.list.theme" as="megaMenuLeft" template="sm/megamenu/megamenu-left.phtml">
<action method="setConfig">
<values>
<group_id>2</group_id>
<theme>2</theme>
</values>
</action>
</block>
</reference>
And in home page Front view:
<?php echo $this->getChildHtml('megamenu_left') ?>
Things i didn't get is name="megamenu.list.theme" and how this is rendering.
EDITED
how is 'megamenu_left' from xml above is linked with a menu group i created on the backend. The menu group i created on backend just have a name and 'enable/disable' option.
I'm not sure if I understand the question correctly, but the second XML bit is going to look for the reference "megamenu_left" found in the first XML part, and insert the block at that position.
The block itself has the full name "megamenu.list.theme" in the layout, with the optional shortname "megaMenuLeft". It will render the template file "sm/megamenu/megamenu-left.phtml" which will be positioned in the active theme folder such as "app/design/frontend/theme/..".
The template will be using the PHP block from module "megamenu/Block/List.php" so any $this->functionName() calls or variables accessed from within the function comes from that block.
The frontpage will load the block by name from the first part of XML, which in turn will get the content from the second part XML since it's a reference, meaning it will insert itself in the first XML.
Could you please tell me if it's possible to turn off loading of styles.css from
default/default/css when I use theme default/my_theme and that doesn't have styles.css?
Why does magento load for other theme styles.css from default/default?
Create a local.xml in your theme, in your <default> handler use
under reference head
removeItem to remove it
Try this.
Define layout.xml
This layout xml file is a unique layout file, that will be processed at last by Magento. This makes this layout file extremely good to remove/change layout appearance. Here you need to remove a css file. So you can use this.
File : app/design/frontend/<package>/<theme>/layout/local.xml
<layout>
<default>
<reference name="head">
<action method="removeItem">
<type>skin_css</type>
<name>css/styles.css</name>
</action>
</reference>
</default>
</layout>
Description
head is a special block that is used to hold css and js files. styles.css resides in this block. It is included through page.xml layout file.
<action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
This is how it is included to head section. Here the action takes place addCss. This method uses a type skin_css by default. ie any css file that resides in skin directory can included by this method. You can also use addItem method. But you need to specify type attribute as skin_css, in order to use that method.
In order to remove an item that is added by addCss or addItem method, you can use removeItem. This method accepts two parameters. type and name. In our case type is skin_css (since styles.css resides in skin) and name is css/styles.css.
Hope that helps
New to Magento here, looking for advice in making sure I modify the correct files to limit the scope of changes and not run into any issues when updating. I installed the following extension for FAQ function:
http://www.magentocommerce.com/magento-connect/flagbit-faq.html
By default the front end FAQ page was displaying with 2 columns (1 left sidebar showing a product comparison block which was unnecessary on a FAQ page). I found the following file:
/app/design/frontend/base/default/layout/faq.xml
And changed:
<default>
<reference name="root">
<action method="setTemplate"><template>page/page/2columns-left.phtml</template></action>
</reference>
</default>
To:
<default>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
</default>
This had the desired result on the FAQ page, but also the undesired result of removing the compare box from the actual product list page. How would I best make the desired change to the FAQ page layout without impacting other pages?
Their module's faq.xml shouldn't be setting that on the default node.
Inspect the page and look for the class on body. It might be something like cms-faq (should say something about faq). Convert the dash - to an underscore _ and use that value in place of default in faq.xml
<cms_faq>
<reference name="root">
....
</cms_faq>
That should make sure the change to the setTemplate action only affects that page.
By setting default there, they are targeting all layout handles, which is really not what they should be doing in a module that just creates a new page.
What is the code to pull in a custom view.phtml file via custom layout update (in admin > catalog > manage products > specific product) with magento? I would really like to do this in local.xml for specific products.
I found this:
<PRODUCT_ATTRIBUTE_SET_shirts>
<reference name="product.info">
<action method="setTemplate"><template>my/custom/product/view.phtml</template></action>
</reference>
But this code is for attributes.
Well, I don't think you can do that in local.xml. But Custom Layout Updates were made for situation like that. Just write there your XML:
<reference name="product.info">
<action method="setTemplate"><template>my/custom/product/view.phtml</template></action>
</reference>
Or if you need to apply the same view.phtml for several products, you can create a new theme containing just one catalog/prodcut/view.phtml and make it extend your current theme. Then apply this theme only for products you need.
I am not entirely sure what you are asking for, but I am guessing you want to use your own view.phtml file and don't know how to have the xml layout file point to that new file.
first look for the file:
app/design/frontend/YOUR_THEME/default/layout/catalog.xml
This file essentially controls what blocks will be called within the catalog of products. If you look for the line:
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
You can change the template= portion to point to your custom view.phtml file. Just remember that the file structure starts at the template file:
app/design/frontend/YOUR_THEME/default/template
So you will need to store your view file within that template file if you use this method.
I hope this helps!