E-Commerce Development

If you’d like to have an example of what a Custom Layout Update code might look like to use in Magento in the Category admin section, see the code below:

<reference name=”left”><block type=”catalog/navigation” name=”catalog.vertnav” template=”catalog/navigation/left.phtml” /></reference>

This code adds left.phtml in the left column, underneath any other items in the left column of your Magento site. If you want it above, a simple trick is to add “before=” to the code so it looks like this:

<reference name=”left”><block type=”catalog/navigation” before=”catalog.leftnav” name=”catalog.vertnav” template=”catalog/navigation/left.phtml” /></reference>

Of course, you need a file, left.phtml residing in your catalog/navigation directory of your theme directory, but, that’s another post.

Here is a great example of a left column layout update on a site we did for Summit Equipment, a site devoted to specialty tools and equipment.

Looking for left or right column files in Magento?

If you’ve worked at all with Magento Commerce, you know that finding source files or even help for that matter can be like finding a needle in a haystack. Here’s a little help and we’re still looking for more.

Left column items such as Compare Products, My Cart, Shopping Options, etc.

1. Compare Products – app/design/frontend/default/your_theme/template/catalog/product/compare/sidebar.phtml

Compare Products is actually called by catalog.xml in your layout directory of your theme directory if you want to cancel the call for it completely.

1. My Cart – app/design/frontend/default/your_theme/template/checkout/cart/sidebar.phtml

That one gets me. The least intuitive place on the planet to put that! Hide it from us Varien. If you want My Cart removed from the left column completely, it’s in the app/design/frontend/default/your_theme/layout/checkout.xml

For an example of a custom layout for left column in Magento, have a look at this great truck equipment site, Real Work Trucks. There are literally hundreds of Magento mods there. Let us know what kind of Magento help you want.

If you don’t like the fact that the left column shows subcategories when you click on a parent category, but it stays in the parent category, go to your view.phtml file in app/design/frontend/default/your_template/template/catalog/layer/view.phtml and change the code to this:

<?php

/**

* Category layered navigation

*

* @see Mage_Catalog_Block_Layer_View

*/

?>

<?php if($this->canShowBlock()): ?>

<div class=”box layered-nav”>

<div class=”head”>

<h3><?php echo $this->__(’Shop by’) ?></h3>

</div>

<div class=”border-creator”>

<?php echo $this->getStateHtml() ?>

<?php if($this->canShowOptions()): ?>

<div class=”narrow-by”>

<h4><?php echo $this->__(’Browsing Options’) ?></h4>

<dl id=”narrow-by-list”>

<?php $_filters = $this->getFilters() ?>

<?php foreach ($_filters as $_filter): ?>

<?php if($_filter->getItemsCount()): ?>

<?php if($_filter->getName() != “Category”){ ?>

<dt><?php echo $this->__($_filter->getName()) ?></dt>

<dd>

<?php echo $_filter->getHtml() ?>

</dd>

<?php } endif; ?>

<?php endforeach; ?>

</dl>

<script type=”text/javascript”>decorateDataList(’narrow-by-list’)</script>

</div>

<?php endif; ?>

</div>

</div>

<?php endif; ?>

<!– [ends] .browse-by // –>

Save the file and that’s it.

NOTE: if you want to keep the category option in the search results (and you should), create a new view.phtml file with a different name, do a different layout file (2-columns-search.phtml for example) to call that new view-search.phtml file, then call that file from your catelogsearch.xml file.

In looking through the forums and searching Google for the answer to this, it’s amazing the answers you see out there. For a simple change like changing the main product image in Magento, we see answers that say it can’t be done, you need a commercial plugin or extension, you have to do some complicated scripting on your server, etc….

The real answer is very simple. Navigate on your server to /app/design/frontend/default/yourtheme/catalog/product/view/media.phtml

Find the line that is something like this:

$_img = ‘<img src=”‘.$this->helper(’catalog/image’)->init($_product, ‘image’)->resize(265).’” alt=”‘.$this->htmlEscape($_product->getImageLabel()).’”/>’;

and change that magic little number of 265 (or whatever yours reads) to the number you want.

Then, go to your Magento admin and clear your images cache. I always clear the main cache of Magento too, just in case. Seems like sometimes Magento recognizes file changes, sometimes not, so it’s best to always clear the cache in the Magento admin.

Go back to your product page and you should see your main product image size changed in your Magento commerce site.