Page 1 of 212

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

Don’t install too many themes to your Magento store

Magento is extremely versatile and flexible in letting the developers work with its code base. By working with it, I mean easily overwriting it, even the core files.

While it may seem rather appealing for people who want absolute control over their store so they can do whatever they want to shape the look and functionality, it may not be so when they have installed more than one themes or extensions on their Magento site.

Chances are there will be a few unpredictable problems that seem to come out of nowhere. And they are probably hard to diagnose. This is because all the themes are overriding each other. It’s totally possible.

One theme may have a module that’s not completely switched off by the other theme because the other theme doesn’t have a similar module that overrides it, thus the module of the first theme is used when the other theme is enabled.

This would incur more problems when the themes have more functionalities that need to override or extend the Magento code base, rather than just templates, layouts, or styles, like how a WordPress theme would work. A WordPress theme is rigidly restricted within one folder and there’s not much it can do to manipulate WP core logics. But that’s exactly the opposite of a Magento theme that can do a good lot to Magento. A theme / extension that you upload is able to overwrite the entire Magento installation.

I recently got such a problem and eventually solved it by the help of Jake, who created the Avalanche theme. After I emailed him about the problem and about the potential collision that I believed existed between my current theme and his theme, he got back to me with the right solution – renaming one of the folders of his theme so as to disable that module. And that’s it. The problem was immediately gone.

So remember, don’t install too many themes to your Magento store – it’ll mess things up. At least do your best to just install the necessary ones. For me, mere 2 themes are enough to create a problem that wasted me several hours looking for an answer. For those who are looking for a premium Magento theme, look no further than Jake. He’s the best. Check out his latest post about how to manage & debug Magento extensions.

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.

Add External JavaScript / CSS to Header or Remove JavaScript / CSS from Header

In /app/design/frontend/base/default/layout/page.xml, Magento uses addJs and addCss action methods to add internally hosted JavaScript and CSS files. Your attempts to add external JS or CSS files with these methods would eventually fail because the generated URL will always start with your store’s absolute URL path such as http://www.yourstore.com/, making it impossible to include JavaScript or CSS hosted on another domain / sub-domain.

What if you want to add an externally hosted JavaScript such as one from a sub-domain CDN or one from Google’s hosted libraries? Such as prototype.js?

Add External JavaScript to Magento Header

Just edit the head.phtml located at here:

/app/design/frontend/default/your_theme/template/page/html/head.phtml

Open it and you should see the entire HTML header that Magento uses to render all pages of your store. Simply add a hard coded line of script tag anywhere appropriate:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

Refresh the cache and you would find the external javascript hosted at Google loaded in every page of your store in the HTML header section.

Remove Default JavaScript Files in page.xml

You may also want to get rid of the same version of JavaScript (prototype.js in this case) that’s hosted local on your main site. Duplicate ones would simply mean a waste of bandwidth and unnecessary download time. Because you should always try to serve static content from a separate domain / sub-domain as CDN rather than on the same domain as your site, or it’d be slower to download all the assets for the users.

To remove a local JavaScript from your Magento theme, simply create a new .xml layout file in /app/design/frontend/default/your_theme/layout and name it whatever you want, such as custom.xml or local.xml and put the following snippet in it to remove the prototype.js loaded in the base default theme of Magento:

<?xml version="1.0"?>
<layout version="1.1.1">
	<default>
		<reference name="head">
			<action method="removeItem"><type>js</type><name>prototype/prototype.js</name></action>
		</reference>
	</default>
</layout>

Refresh your store’s cache and you should see no local prototype/prototype.js being loaded in the HTMl header any more.

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.

Add a Breadcrumb Link to the Breadcrumbs Path in Magento

It’s weird but some of pages of Magento don’t come with a full breadcrumbs path and all you have is just:

Home »

Which doesn’t look good in a professional online store.

So you may want to add a breadcrumb entry to the end of the breadcrumbs path, for example:

Home » Shopping Cart

How to add a breadcrumb link to the breadcrumbs?

Find the <checkout_cart_index></checkout_cart_index> section in your theme’s layout files and add in it:

<reference name="breadcrumbs">
	<action method="addCrumb">
		<crumbName>Home</crumbName>
		<crumbInfo><label>Home</label><title>Home</title><link>/</link></crumbInfo>
	</action>
	<action method="addCrumb">
		<crumbName>Shopping Cart</crumbName>
		<crumbInfo><label>Shopping Cart</label><title>Shopping Cart</title><link>/checkout/cart</link></crumbInfo>
	</action>
</reference>

Remove the <link></link> tag if you don’t want any links to be on the breadcrumb text.

Mage::helper -> Resize Product Images Without Watermarks

We usually set watermarks only for large product base images, leaving small images and thumbnail images as they are without any watermarks. This is achieved by “System -> Configuration -> Design -> Product Image Watermarks”, and just supply a watermark image to base image and leave small image as well as thumbnail image blank.

However, many of the Magento themes out there don’t quite respect the watermark rules we set and when they want to resize the product image into a smaller size such as 50×50, they simply do this:

Mage::helper('catalog/image')->init($product, 'image')->resize(50)

Notice they used ‘image’ for the second parameter of the init() method which tells Magento that this image would be resized and then served as a base image. And because it is a base image, it is stamped with the watermark we uploaded for all base images.

For an image as tiny as 50×50, it simply doesn’t look great with any watermarks on it. We have to get rid of it.

Solution is simple

Just change the second parameter to ‘small_image’:

Mage::helper('catalog/image')->init($product, 'small_image')->resize(50)

And Magento knows this resized image is meant to be a small image rather than a base image and it would not give any watermarks to it.

Page 1 of 212