Monthly Archives: February 2012

Get Canonical URL of A Product in .PHTML

Posted on by
1

Canonical URL is a great way to focus SEO power. Without it, search engines would have no idea which particular page among all the similar pages are the most important. Magento, as sophisticated as it can get, does have lots of similar pages regarding the same piece of content such as a product.

When you are adding social buttons, it may not be enough to just add the button and let it detect the current page URL itself. For example, when the user clicks “Edit” of a cart item and gets to the edit page of that item, it’s almost the same as the canonical item page.

If you have social buttons on that page then chances are they won’t be useful at all because they would be promoting the edit page rather than the canonical page. Thus, we need to feed canonical URL rather than the current page URL to them.

How to get the canonical URL of a product programmatically?

It’s as simple as this:

echo $product->getUrlModel()->getUrl($product, array('_ignore_category'=>true));

Make sure you change $product to whatever you are using for the product in your PHTML template.

Avalanche Coupon Code for 15% Off from Fast Division

Posted on by
Reply

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

Resize Watermark by Percentage of the Original Product Image

Posted on by
1

In the configurations Magento only lets you set an absolute pixel value for the dimensions (width & height) of the watermark image you upload. What if any of the product images are smaller than the specified width of the watermark? An incomplete watermark will be printed on the product image. Everything but pretty.

What we want to do is to resize the watermark image on the fly proportionately to the size of the product image. For example, the width of the watermark will always be 50% of that of the product image. This way, we wouldn’t have such issues as incomplete watermarks.

I have Cloud Zoom extension installed so all I need to edit is the /app/design/frontend/default/forest_fashion/template/magento-team/cloud-zoom/catalog/product/view/media.phtml file. Not sure which file should be edited in your case but should be close.

In media.phtml, you can get the width of the original product image by this:

$_originalWidth = $this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth();

And calculate watermark width on the fly by this:

function iGetWatermarkSize($_originalWidth) {
	// My watermark is 430x90. Change following values accordingly with your own.
	$_watermarkSizeWidth = .5 * $_originalWidth;
	$_watermarkSizeHeight = $_watermarkSizeWidth * 90 / 430;
	$_watermarkSize = $_watermarkSizeWidth.'x'.$_watermarkSizeHeight;
	return $_watermarkSize;
}
$_watermarkSize = iGetWatermarkSize($_originalWidth);

And then the watermarked image URL should be:

$url = $this->helper('catalog/image')->init($_product, 'image')->setWatermarkSize($_watermarkSize)

That’s it. Now $url should contain the URL to the new image with watermark resized proportionately to the width of the original image by percentage, 50%.

 

Magento: Get Original Width and Height of Product Images

Posted on by
Reply

Took me a while to find this but it’s actually in the Image Helper docs: http://docs.magentocommerce.com/Mage_Catalog/Mage_Catalog_Helper_Image.html

To get the width and height of the original product image (not resized ones, but the original ones that are uploaded when creating the product):

$this->helper('catalog/image')->init($_product, 'image')->getOriginalWidth()
$this->helper('catalog/image')->init($_product, 'image')->getOriginalHeight()

This is very useful when you need to make decisions based upon the dimensions of the original product image. For example, if the uploaded product image is smaller than 500px in width, the Zoom View would shrink to the image width; if not, the Zoom View would stay at 500px in width.

Hide and Don’t Display N/A Attributes

Posted on by
Reply

There will be some attributes that are not compulsory when you are creating the product. And they will be ‘N/A’ or ‘No’ on the product page if you don’t specify values for them. That doesn’t look pretty. Customers might ask why this product doesn’t have this feature? To save you from the awkwardness, we may be better off by removing those ‘N/A’ or ‘No’ attributes.

How to remove or hide ‘N/A’ attributes on Magento product pages?

It’s simple. Just open and edit this file:

/app/design/frontend/default/my_theme/template/catalog/product/view/attributes.phtml

Change the bold part default/my_theme to wherever your theme resides. If attributes.phtml is not there, copy this one there:

/app/design/frontend/base/default/template/catalog/product/view/attributes.phtml

And then open and edit it:

/app/design/frontend/default/my_theme/template/catalog/product/view/attributes.phtml

You would be greeted by something like this:

<?php foreach ($_additional as $_data): ?>
	<tr>
		<th class="label"><?php echo $this->htmlEscape($this->__($_data['label'])) ?></th>
		<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
	</tr>
<?php endforeach; ?>

Just add a line in there (bold part):

<?php foreach ($_additional as $_data): ?>
	<?php if ($_data['value'] == 'N/A') {continue;} ?>
	<tr>
		<th class="label"><?php echo $this->htmlEscape($this->__($_data['label'])) ?></th>
		<td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
	</tr>
<?php endforeach; ?>

So if the attribute value is ‘N/A’, the foreach loop would continue to the next round instead of outputting the attribute value.
 

Don’t install too many themes to your Magento store

Posted on by
Reply

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

Posted on by
2

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.