Friday 29 April 2011

How to Create a new layout for specific CMS pages in Magento

Many Of my Magento Developers are getting errors while Creating a new layout for specific CMS Page in magento here is some solution for you all hope you will love to read it.

Magento has a WIKI about this, but honestly, I find it confusing to my friends and it is not really well explained. I really simplified the process with Some more explanation here:

Step 1:
We need to create an extension with its own configuration. This will avoid any issues when updating Magento in the future. What you have to do is create a new “config.xml” in your local extension folders, like this:

app/code/local/SpecialLayouts/RightColumnLayouts/etc/config.xml
I did this path in order to be organized, assuming that I could have Special Layouts with different columns approach. The code for this file should be similar to this:

 
<?xml version="1.0"?>
<config>
 <global>
  <cms>
   <layouts>
    <custom_static_page_name_here>
     <label>Custom static page name</label>
     <template>page/custom-static-page-name.phtml</template>
     <layout_handle>page_custom-static-page-name</layout_handle>
    </custom_static_page_name_here>
   </layouts>
  </cms>
 </global>
</config>

Step 2:
We now need to “activate” this new layout in our environment. To do so, you need to add the module like this:

app/etc/modules/SpecialLayouts_RightColumnLayouts.xml

What is really critical and important on the previous lines is to notice the name of the XML file you need to create. It contains the name of the folder or extension, the underscore and then the name of the specific extension ramification. If you do this differently, Magento will not understand it at all therefore, it will not work.

Now, about the content for this XML file, it should be:
 
<?xml version="1.0"?>
<config>
 <modules>
  <SpecialLayouts_RightColumnLayouts>
   <codePool>local</codePool>
   <active>true</active>
  </SpecialLayouts_RightColumnLayouts>
 </modules>
</config>


Step 3:
Finally, you need to create the actual template page that you have configured in your extension file. You need to use the exact same name for it and it should be located at:

app/design/frontend/default//template/page/custom-static-page-name.phtml

In order to do this template, I recommend using one of the actual templates that are already there for the left or right column, depending on what is needed. It is the easier way to go from an already created phtml structure than trying to do it from the scratch.

Step 4:
This is the easier step in the process, once you have everything on your server, then you should go to your Magento admin, clear your cache and configure your layout on the CMS page needed. To do this, you should go to your CMS record and then click on the “Design” (or “Custom Design” in Magento 1.4.X) tab. In the “Layout” Dropdown, the name you assigned to your should appear now, you select it and save the page. Once again, refresh your cache, and if you go to your new page’s URL, it should show the new layout, so you are done!


 And it is Over hope this will help my Magento Developer Friends
Source

Read more...

Wednesday 27 April 2011

Help For Editing the Magento Navigation

This Post is for Beginner as Some of my Magento Developer Friends have problem in Editing The Navigation. I'm Just point out where the files are that you need to edit the top and left navigation.

It is bit confusing and some how complicated because of the use of javascript in the navigation,but it’s not too bad. It ends up being a bunch of functions which just spits out the proper HTML and javascript to get things going (and some code to retrieve the categories).


First off, the template files.
The files that have the HTML are located here:

   1. app/design/frontend/*/*/template/catalog/navigation/left.phtml
   2. app/design/frontend/*/*/template/catalog/navigation/top.phtml

Top.phtml controls (you guessed it) the navigation in the header area (including the drop down portions, which are controlled via javascript)
Left.phtml controls the left hand navigation, if you set your categories to be an anchor to get the left hand navigation to be used.

Now the file that pulls the categories (and has some functionality to create some of the HTML) is here:
app/code/core/Mage/Catalog/Block/Navigation.php

You should review this to see the various functions and see what they do.
The functions “drawItem” and “drawOpenCategoryItem” should be of particular interest, since they create some HTML to output.

isn't it so simple just start creating custom navigation!



Source

Read more...

Monday 25 April 2011

Magento: How to place Facebook Like and Twitter Buttons in the products view page

In Today's Era it is really essential that you are very much in touch with Social media like Facebook and Twitter. Nowadays every client ask for this Social media buttons on his e-commerce site this is creates some problem with my magento friend so this post if for all My Magento Developers

Instructions:
  1. Open file to \app\design\frontend\default\default\template\catalog\product\view.phtml
  2. Copy the codes of the button that suite your magento store design and paste them exactly where you need to appear the button in the frontend
  3. Save the file and refresh the page

Facebook Like Button:
Add the following codes to display the facebook like button in the products view page.
  1. Standrad Button

    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo $currentUrl ?>" show_faces="false" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
     
  2. Minimal with count – Horizontal


    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo $currentUrl ?>" layout="button_count" show_faces="true" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
  3. Minimal with count – Vertical


    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="=<?php echo $currentUrl ?>" layout="box_count" show_faces="true" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=box_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>


Twitter Button:
The twitter buttons are very simple and takes the current pages url automatically. i.e. it doesnot need any php codes for its working. Placing the javascript codes at the correct location will make the button load in the next page refresh.
  1. Vertical

     
    <a href="http://twitter.com/share" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

  2. Horizontal

     
    <a href="http://twitter.com/share" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
  3. No Count

     
    <a href="http://twitter.com/share" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
Main Source

    Read more...