Magento

If any of you work on E-stores, you probably have come across, or developed a store using Magento. Magento is a powerful php e-store, which is flexible, configurable, fairly easy to style and nice to work with. The other thing I really like about Magento is the community. It is rare that you run into an issue in Magento which you can't fix with a quick Google. There are plenty of forums and websites devoted to Magento help. Seeing as how I have now developed a few Magento sites, this time around  decided to document the problems one will typically run into. I have layed some of this out, and with luck, it will help someone out.

Remove Components (hide em)
System > Cofiguration > Advanced and disable ex:  Mage_Newsletter


Change Layout
Open the \app\design\frontend\nameofProj\default\layout\catalog.xml
find:

<block type="page/html" name="root" output="toHtml" template="current Template">

to

<block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml">

eg: one-column.phtml


File Locations



Product View Template
\app\design\frontend\YourPath\default\template\catalog\product\view.phtml


Image Maginifcation for product
\app\design\frontend\YourPath\default\template\catalog\product\view\media.phtml



Varients Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\wrapper.phtml


Bottom of product Code Location
\app\design\frontend\YourPath\default\template\catalog\product\view\options\bottom.phtml 



Menu for Categories
\app\design\frontend\YourPath\default\template\catalog\navigation\top.phtml


-simply add list items here with custom links which may not be in the categories by default
<?php echo $_menu ?>
<li id="storeHome" class="level0 nave-1 level-top first parent">
        <a class="level-top" href="/index.php">
                <span>HOME</span>
        </a>
</li>


Header of Site
\app\design\frontend\YourPath\default\template\page\html\header.phtml
/*This is where you can change the logo, modify the top links etc*/


Footer of Site
\app\design\frontend\YourPath\default\template\page\html\footer.phtml
-comment out <?php echo $this->getCopyright() ?> replace with your own code etc


Grid/List view Code
\app\design\frontend\YourPath\default\template\catalog\product\list.phtml
-This is where you can chane image sizes and which details are shown on the home page




toolbar for pages
\app\design\frontend\YourPath\default\template\catalog\product\list\toolbar.phtml


page numbers in pagination  - you can change your divider ~line 94
\app\design\frontend\YourPath\default\template\page\html\pager.phtml


breadcrumbs 
\app\design\frontend\YourPath\default\template\page\html\breadcrumbs.phtml
/*change formatting of breadcrumbs*/


Login Page

\app\design\frontend\YourPath\default\template\customer\form\login.phtml

Register
\app\design\frontend\YourPath\default\template\customer\form\register.phtml

Shopping Cart
\app\design\frontend\YourPath\default\template\checkout\cart.phtml

Dashboard
\app\design\frontend\YourPath\default\template\customer\account\dashboard.phtml

Sub Categories Page
\app\design\frontend\YourPath\default\template\catalog\category\view.phtml

Tricks

Use JQuery on pages:

<script type="text/javascript" src="/pathTo/jquery.min.js"></script>
<script type="text/javascript">
   //<![CDATA[
jQuery.noConflict();
var $j = jQuery.noConflict(); //alias jquery with j$
$j(function(){
$j('button.button span span').html(""); /*can be used to hide span text and fix some bugs if using images*/
});
//]]>
   </script>

Links to Sitemap

/catalog/seo_sitemap/product/ -product sitemap
/catalog/seo_sitemap/category/ -category sitemap

Hide index.php in the store view:

In admin, System>Configuration>Web Tab. Under Search Engine Optimization, change User Webserver rewrites to Yes.

Check if a user is logged in:

$this->helper('customer')->isLoggedIn()

<?php
if( $this->helper('customer')->isLoggedIn() ){
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>logout</span></a></li>
<?php
}else{
?>
<li class="level0 nav-cat1"><a href="/customer/account/login/"><span>login</span></a></li>
<?php } ?>

Display Product Skus: (for product page)

<p class="itemSku">Item #<?php echo $this->htmlEscape($_product->getSku()) ?></p>

Change the number of displayed products in list/grid view:

Admin -> System > Catalog > frontend
and: app/design/frontend/default/default/layout/catalog.xml

Embed Contact form in CMS page:

<!-- CONTACT FORM -->
{{block type="core/template" name="contactForm" form_action="/contacts/index/post" template="contacts/form.phtml"}}
<!-- END OF CONTACT FORM -->

Get the Sub-Category Page to display Images: (replace your

\app\design\frontend\YourPath\default\template\catalog\category\view.phtml with below code)

<?php
$_category = $this->getCurrentCategory();
$collection = Mage::getModel('catalog/category')->getCategories($_category->entity_id);

$rootcat = $_category->entity_id;
$cat = Mage::getModel('catalog/category')->load($rootcat);
$child = $cat->getChildren();
//echo $child;

if($child)
{
$helper = Mage::helper('catalog/category');
$_helper = $this->helper('catalog/output');
?>
<div class="category-custom-products">
<table>
<tr>
<td valign="top" width="405">
<h1 class="page-title"><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>
<?php
$_imgUrl = $_category->getImageUrl();
echo '<img id="ProductCategoryImage" src="'.$_imgUrl.'"/>';
?>

</td>
<td width="40">

</td>
<td valign="top">
<div class="products-grid categories-grid">

<?foreach ($collection as $cat):?>
<?php if($_category->getIsActive()):?>
<?php
$cur_category = Mage::getModel('catalog/category')->load($cat->getId());
$_imgUrl = $cur_category->getImageUrl();
?>
<div class="categoryItem">
<a class="categoryImageLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo '<img class="categoryImg" width="216" height="180" id="ProductCategoryImage" src="'.$_imgUrl.'"/>'; ?></a>
<a class="categoryProductLink" href="<?php echo $helper->getCategoryUrl($cat);?>"><?php echo $cat->getName();?></a>
<a class="viewDetailsLink" href="<?php echo $helper->getCategoryUrl($cat);?>">view details</a>
</div>

<?php endif?>
<?php endforeach;?>
</div>
</td>
</tr>
</table>
</div>
<?php
}
else
{
?>
<?php echo $this->getProductListHtml() ?>
<?php
}
?>

Hope this helps someone out. I'll try to add to it if I learn something interesting.

Design Hints - Sticky footer

If you're a constant web surfer, there are things you have likely come to either expect or like to see. One particular attribute I like and develop most sites to use, is a 'sticky footer'. A sticky footer is simply when the footer is at the bottom of the page (as usual),but even if there isn't a lot of content, it sits at the bottom of the page. I think this looks much better then having the footer of the website show up half way up the page if there isn't enough content.

There are two typical methods you can use / find on the net, see links below, but I will paraphrase the method I like and show you the CSS/HTML layout for it. The method I use is pretty much identical to Method one, so quick it out after. Feel free to copy and paste the CSS/HTMl below.




<html>
    <head>
       <title>Page with a sticky footer</title>
       <!-- Include StyleSheet / Scripts -->
    </head>
    <body>
<style> /*The CSS, Im using inline styling for the sake of showing you*/
* {
margin: 0;
}
html, body {
height: 100%;
}


#header, #footer, #pageContent{
 width: 1024px;
 margin: 0 auto; /*who doesn't like a center aligned page?*/
}


#pageContent{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
/* Note the spacer must be the same height
as your footer. If too small it will not sit
properly, or if too large you will have overlap
*/
}
#footer, #spacer {
height: 150px;
}
</style>
<div id="header">
<p>Your Header Content</p>
</div>


        <div id="pageContent">
            <p>Your page content.</p>

            <div id="spacer"><!--Make sure this is within the PageContent --></div>
        </div>


        <div id="footer">
            <p>Your footer Content</p>
        </div>
    </body>
</html>

Method 1 (preferred)
Method 2

Hope this is useful!