Add Sort by "Date" to Magento Catalog Products List

Magento has only 3 pre-defined sort methods for catalog products list, namely by Position, Name, and Price. It’s not unusual that the customers or catalog editors would want to sort the products by creation date so that the newest products are displayed at the forefront. We will make this happen in this article.

Step 1

Find file /app/code/core/Mage/Catalog/Model/Config.php and copy it to /app/code/local/Mage/Catalog/Model/Config.php. Open the copied file (open it still if it already exists before the copy) and find this function.

Add the bolded line:

public function getAttributeUsedForSortByArray()
{
    $options = array(
        'position'  => Mage::helper('catalog')->__('Position'),
        // This line that adds the 'Date' option to the Sort By dropdown methods.
        'created_at' => Mage::helper('catalog')->__('Date')
    );
    foreach ($this->getAttributesUsedForSortBy() as $attribute) {
        /* @var $attribute Mage_Eav_Model_Entity_Attribute_Abstract */
        $options[$attribute->getAttributeCode()] = $attribute->getStoreLabel();
    }

    return $options;
}

Step 2

Create and upload this file /app/etc/modules/SortByDate_Catalog.xml

<?xml version="1.0"?>
<config>
    <modules>
    <SortByDate_Catalog>
        <active>true</active>
        <codePool>local</codePool>
        <depends>
            <Mage_Catalog />
        </depends>
    </SortByDate_Catalog>
</modules>
</config>

Step 3

Create and upload this file /app/code/local/SortByDate/Catalog/etc/config.xml

<?xml version="1.0"?>
<config>
<global>
    <models>
        <catalog>
            <rewrite>
                <config>SortByDate_Catalog_Model_Config</config>
            </rewrite>
        </catalog>
    </models>
</global>

Step 4

Create and upload this file /app/code/local/SortByDate/Catalog/Model/Config.php

<?php

class SortByDate_Catalog_Model_Config extends Mage_Catalog_Model_Config {

	public function getAttributeUsedForSortByArray()
	{
		$options = parent::getAttributeUsedForSortByArray();
		if (!isset($options['created_at'])) {
			$options['created_at'] = Mage::helper('catalog')->__('Date');
		}
		return $options;
	}

}

That’s it.

Now refresh your category pages and you would see an additional sort method ‘Date’ in the ‘Sort By’ dropdown list and selecting it would make the catalog display the items by creation date. Clicking the small arrow to the right would toggle between descending order and ascending order.

SEO Friendly Tag URLs for Your Magento Store

By default, you would have a tag URL such as this for your Magento store:

http://www.example.com/tag/product/list/tagId/3/

While it’s perfectly static, it doesn’t look good without tag names in the URL nor does it inspire trust. We want it to be more neater as:

http://www.example.com/tag/royal/

It’s actually a very simple problem that’s ready to be solved if you are willing to spend $39 bucks. Iceberg Commerce has the exact solution: Magento SEO Product Tag Urls

Simply purchase the package, download it, uncompress and upload the app directory to your store installation. It’s upgrade-proof because they are well separated from the rest of the system. You don’t even have to overwrite any files.

Clear your Magento cache and you would see SEO-friendly tag URLs all over your store: individual product page, tags list page, etc.

They’ve got also a lot of other interesting and useful extensions for your Magento store.

Malicious / Spam Search Terms in Magento Popular Search Terms

If you’ve got a fairly popular Magento store, you’ve probably got the problem of spam or malicious search terms showing up on the Popular Search Terms page. It’s ugly and you want to get rid of them once and for all, but at the same time leaving legitimate search terms performed by good-will users intact.

Of course you do. Me too. Look at this:

Magento store spam searches

So how to delete spam search terms from Popular Search Terms page?

What I’ve done is to edit the /app/design/frontend/default/your_theme/template/catalogsearch/term.phtml until it looks something like this:

		<?php
		$princessly_search_term = $this->htmlEscape($_term->getName());
		if (strpos($princessly_search_term, '%') !== false
			|| strpos($princessly_search_term, "'") !== false
			|| strpos($princessly_search_term, '`') !== false
			|| strpos($princessly_search_term, '=') !== false) {
			continue;
		}
		?>
            <li><a href="<?php echo $this->getSearchUrl($_term) ?>" style="font-size:<?php echo $_term->getRatio()*70+75 ?>%;"><?php echo $princessly_search_term ?></a></li>

The PHP function strpos() checks if a specific character is existent in the string $princessly_search_term which contains the originally raw search phrase. If it does, it’s not displayed (continue to the next phrase and check it to see if it does).

Most malicious / spam search attempts contain ‘%’, “‘”, or ‘=’ which normal users wouldn’t use in a legitimate search for your products. Now the Popular Search Terms page is a lot more clean and user friendly.

Display all product images on the product page (view.phtml)

Lots of online stores nowadays are blatantly showing all the sharp and tempting images of the product on the product page. They are all there for you and the visitors to examine one after another simply by window scrolling – no gimmicks such as cloud zooming or lightbox, etc. While technical cleverness such as cloud zooming or lightbox may seem pretty, they are hardly any more usable than the plain old way of just splashing the product images by simple HTML code.

I prefer the old way which would actually engage the visitors.

However, by default Magento has only narrowly arranged thumbnails of the product images, the visitor has to click those thumbnails to see the large version – waste of user attention and they could leave because it costs more to get what they want (to see a larger picture). What we want to do is to simply display all the product images in large versions on the product page where the visitors are instantly satisfied.

Display all product images WITHOUT watermarks

To do this, find /app/design/frontend/default/your_theme/template/catalog/product/view.phtml and add this snippet anywhere appropriate (change the bold part to your own theme path):

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->setWatermarkImageOpacity(0)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

That’s it! See what I’ve done for my store: http://www.princessly.com/trumpet-a-line-v-neck-asym-drop-waist-sleeveless-straps-wedding-dress-w-court-train.html

Display all product images WITH watermarks

With “->setWatermarkImageOpacity(0)” the displayed images will not have watermarks on them. This is better for user experience but may enable image stealing. To add the watermarks, just get rid of “->setWatermarkImageOpacity(0)“:

<div class="product_images_exhibit">
	<h2><?php echo $this->__('Product Images') ?></h2>
	<?php $_images = Mage::getModel('catalog/product')->load($_product->getId())->getMediaGalleryImages(); ?>
	<?php if($_images) {?>            
		<?php foreach($_images as $_image) {?>
			<p><img src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(848, null);?>" alt="<?php echo $this->htmlEscape($_image->getLabel());?>" title="<?php echo $this->htmlEscape($_image->getLabel());?>" /></p>
		<?php } ?>
	<?php } ?>
</div>

You would still need to configure watermarks in System -> Configuration -> Design to make this work.

Avalanche Coupon Code for 15% Off from Fast Division

Avalanche is the premium Magento theme crafted and maintained by Fast Division. Read my personal review of Avalanche and you would know how excellent it is. And it doesn’t stop there because Jake is currently FULLY occupied in shaping and sculpting this One Theme for Magento. The last email I got from him he said:

Avalanche is doing very well. I’m extremely busy with support emails and customization requests. I might have to start a forum and definitely write more help articles so this becomes more manageable until I get a community manager.

fast divisionAvalanche is obviously taking off. Have a Magento store? Get on the wagon before everyone else does and use this coupon code to get 15% off your Avalanche license:

MAGENTOGOREVIEW
Click To Open/Copy

Just supply this coupon in the “Enter coupon code” field before clicking “Continue” to check out with PayPal.

avalanche coupon code

Add Custom Product Tabs to Magento – Simplest Way

Some themes come with switch tabs on the product page such as the Modern theme shipped with the official Magento download (as of 1.6.2). Time from time you may wonder how to add your custom ones there with more information regarding the product. The Easy Tabs extension doesn’t actually work with themes that already come with tabs. However, with themes that don’t have tabs already, you should try it.

So how to accomplish this? Here’s a dead simple way.

Adding Custom Tabs on Product Pages

Just follow these simple steps, assuming you are using the Modern theme which is located at /app/design/frontend/default/modern:

  1. Open /app/design/frontend/default/modern/layout/catalog.xml (or whatever your theme, just change the bold part to your own theme path), and find lines with
    <action method="addTab" 

    that are basically layout directives to add tabs to the product page.

  2. Duplicate one of the “addTab” <action></action> tags and change the properties according to your needs, such as to this:
    <action method="addTab" translate="title" module="catalog"><alias>your_tab_name</alias><title>Your Tab</title><block>catalog/product_view</block><template>catalog/product/view/your_tab.phtml</template></action>
  3. Save and overwrite the original catalog.xml.
  4. Create your_tab.phtml that will contain the actual tab content when the user clicks the “Your Tab” tab on the product page. Upload it to /app/design/frontend/default/modern/template/catalog/product/view/your_tab.phtml
  5. Refresh all caches.

Now you should be seeing a new “Your Tab” on the product pages of your store. Add some text or HTML to your_tab.phtml and refresh cache so that tab will display the content you added.

Change Default “Add to Cart” Quantity from 0 to 1 in Magento

You may have noticed that the default “Quantity” or “Qty” to “Add to Cart” on product pages is 0 or zero. While the visitor can simply click “Add to Cart” to add 1 item of the product into the shopping cart, it would still create confusion. Some customers might think they had to manually update the quantity from 0 to 1 for the “Add to Cart” button to work (which is totally unnecessary) and be slightly annoyed because they *had to* do so. This is definitely not what we intended.

So how to change the default quantity on product pages to 1?

Many of the online answers involve editing one of the template files. It is not so any more with the newest versions of Magento. Tested on 1.6.1 and 1.6.2, you can simply change the default quantity by the following path in administrator panel:

System > Configuration > Inventory > Product Stock OptionsMinimum Qty Allowed in Shopping Cart > Click “Add Minimum Qty” > Select “ALL GROUPS” and enter “1” in “Minimum Qty” > Click “Save Config“.

change magento default quantity

That’s it. You may probably need to refresh cache. And you would now see 1 as the default quantity on all your product pages. This is the update-proof solution.

Custom Magento Theme for Error – “There has been an error processing your request”

If you ever run into the ”There has been an error processing your request” error of Magento, it’s just a plain default page of the very default theme of Magento when you first installed it.

default magento error exception theme

It simply sucks in user experience and page design. You want to:

  1. Use your own theme for this error page
  2. Use your own logo rather than Magento’s
  3. Add a back to the previous page sort of button / link
  4. Change Magento copyright notice to your own

How to do accomplish all these?

For 1, I thought it’s in the design.xml but turned out it’s not. And thus far I have no idea how to switch the error page to your own theme design once and for all.

For 2, just change /errors/default/images/logo.gif with your own.

For 3, just edit the /errors/default/report.html.

For 4, just edit the /errors/default/page.html.

 

Move Magento Sub-menu to Right

By default Magento displays the sub-menu in the middle of the parent item. What can be done to make it aligned to the right? At least move it 50px to the right?

The solution is real simple. While you may think it’s something to do with the JavaScript and even started looking for the line containing the class name, it is actually right in the CSS file.

Just search for “#nav li .shown-sub li div.shown-sub” in the primary CSS styles file and bingo! Simply change the default value of 100px which is the distance of the sub-menu’s left margin to that of the parent item, to something like 150px.

And the sub-menu will then always emerge itself 50px rightward.

Add “Register” Link to Top Navigation of Magento Store

The default Magento theme and many other themes miss the point by not giving the user a handy chance to directly register for a user account. “Register” or “Sign up” link has been way too common practice and instinctive to be missed out at the top links of your site.

We can’t afford that and we have to add it to our Magento stores.

Here’s how we do it.

Search through all your theme’s layout files for a section named <customer_logged_out> and add this snippet into it:

<reference name="top.links">
    <action method="addLink" translate="label title" module="customer"><label>Register</label><url helper="customer/getRegisterUrl"/><title>Register</title><prepare/><urlParams/><position>10</position></action>
</reference>

Refresh your store’s cache and you are fine to go with a shiny “Register” link on the top links section when the user isn’t logged in.