Increase the quality of photos on Magento

I was recently confronted with problems of quality photos on Magento.

At first, I vainly sought an option to resolve this with the Magento backend... I finally get to the obvious: this is not possible (at least until version 1.3).
I then studied the source code to determine how the framework manages and generates mainly the different sizes of pictures (on the page list, thumbnails, etc..) products.

I discovered that Magento uses GD2, with a quality setting to 80% by default (not changeable via configuration, back-office or XML). A value 80/100 quality is good in most cases. Nevertheless in e-commerce have known that a very good picture quality can make the difference.

The idea is to push the compression quality (jpeg) to 90%, the possible options are:

1. modify the PHP code found above: No, you should never directly edit the code from the core of Magento! (just as one shouldn’t cross the streams.)
2. create a module to administer the value of the compression quality via the back office: interesting, but reusable too long to achieve. I pass! :-)
3. override the code: easy, fast and clean: the solution I have chosen

Change the compression quality photos Magento:

1.
Step 1

Copy the file "/ lib/Varien/Image/Adapter/Gd2.php" to "/ app/code/local/Varien/Image/Adapter/Gd2.php" by creating the missing directories if necessary.
2.
Step 2

Open the file Gd2.php (copy, not original) at about line 80 and substitute:
call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);

by:

if ($this->_fileType === IMAGETYPE_JPEG) {
call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName, 90);
} else {
call_user_func($this->_getCallback('output'), $this->_imageHandler, $fileName);
}

In the code above, I opted for 90, but you can change this value from 0 to 100 quality.
3.
Step 3

Finally, don’t forget to empty the cache of images via System> Cache Management.

That was simple, effective and reusable on any project, from the time you work with images in jpeg format (which format most common with digital photography) and your server supports GD2.

Remove unwanted PEARLib files

When you install or update Magento Commerce or one of the Magento Extensions that uses PEAR (PHP Extension and Application Repository), the files will be downloaded to {path_to_magento}/downloader/pearlib/cache/ and {path_to_magento}/downloader/pearlib/download/ within your Magento installation directory.  After installation the downloaded files are not automatically deleted.  These directories can grow quite large if they go unchecked.  Remember to run the following command after installing or upgrading Magento or a Magento Extension

$ cd {path_to_magento}
$ rm -rf downloader/pearlib/cache/* downloader/pearlib/download/*

Alternatively remove all the files and folders in these two directories using an FTP Client or a Browser File Manager within CPanel

How to Speed up your Magento Site

It has surely been a pain to have such a nice eCommerce platform, but with slow page loading problem. It mainly happens for the javascript and css and all files being loaded at the same time. As Yahoo YSlow says, the more number of HTTP requests, more slow is the website.

So, here is a small htaccess trick, which makes the Magento Site real FAST!!  We are enabling the GZip Compression here. Works perfect and has been tested..

Just goto your site root and find the .htaccess file.

Open it and edit it on your text editor.

You will find this code there, around Line 77 - 97,

     ## http://developer.yahoo.com/performance/rules.html#gzip
     
     # Insert filter on all content
     ###SetOutputFilter DEFLATE
     # Insert filter on selected content types only    
     #AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css  text/javascript  
     
     # Netscape 4.x has some problems...
     #BrowserMatch ^Mozilla/4 gzip-only-text/html
     
     # Netscape 4.06-4.08 have some more problems
     #BrowserMatch ^Mozilla/4.0[678] no-gzip
     
     # MSIE masquerades as Netscape, but it is fine
     #BrowserMatch bMSIE !no-gzip !gzip-only-text/html
     
     # Don't compress images
     #SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
     
     # Make sure proxies don't deliver the wrong content
     #Header append Vary User-Agent env=!dont-vary

Just Replace it with ,
   
    ## http://developer.yahoo.com/performance/rules.html#gzip
     
    # Insert filter
    SetOutputFilter DEFLATE
     
    # Netscape 4.x has some problems_
    BrowserMatch ^Mozilla/4 gzip-only-text/html
     
    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4.0[678] no-gzip
     
    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    # Don’t compress images
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
     
    # Make sure proxies don’t deliver the wrong content
    Header append Vary User-Agent env=!dont-vary
     
    # enable resulting html compression
    php_flag zlib.output_compression on

Problem: logging into magento 1.4 backend after installation on localhost

This problem I had during magento community installation process on localhost. I have used EasyPHP5.2.10 and after the installation of magento with the downloader I was not able to login in the backend.

After a research on internet I have seen many posts talking about languages session problem.  So  I noticed that if you try to change language in the installation problem it reload the page on the default EN-US.

So I managed the problem by going in the apache server config file changing  “localhost:80 “to “127.0.0.1:80“. After that I have installed magento again at uri http://127.0.0.1/mangento/. In this way when I have chosen English to Italian language it worked! Than I was able to join my magento backend.

How Do I Create a 25% off Coupon

To create Shopping Cart Price Rules go to Promotions -> Shopping Cart Price Rules and select Add

New Rule.

We first enter a rule name and description. 25% off

Once those are in we select Active for Status.

You then need to select which Website the coupon will be good for. Main Website, Default website
 
You can select multiple items by holding Ctrl while selecting.

We are then going to make the Rule applied only with a coupon code, so we enter our code. 25% off

Now we have Uses Per Coupon and Uses Per Customer.  We then set the Users Per Customer to 1, so each customer will only be able to use the coupon once.

We then enter the dates the coupon is valid for and select the priority of the coupon. In this case we keep the priority as 0, the highest priority. If you remember from the Catalog Price Rules, the priority is used when you have 2 Rules applying to the same products. The rule with the highest priority (lowest number) will take effect first.




You can also decide whether or not each individual price rule will be made public in the price rules RSS feed that your customers can sign up for.

We are going to skip Conditions and come back to it since we are creating a simple coupon here. If this is skipped, the coupon will apply to all carts where the coupon code is entered. The products in the cart will not need to meet any conditions. To complete this coupon we select Actions from the left navigation.

Select Percent of Product Price discount (the other options being Fixed amount discount, Fixed amount discount for whole cart, and Buy X get Y free) and enter the value you want to discount. In this case it is 25.
We then want to enter a value for the maximum qty the discount will be applied to. Here we are keeping this blank

The Discount Qty Step controls how often the discount is applied. If we were to enter 8 here, the 25 percent discount would only apply after 8 items are added to the cart. If more than 8 items were added to the cart, the discount would remain as 10% or 8 items, until 16 items were added to the cart, at which point the discount would become 10% of 16 items. This would continue for every factor of 8. This would be useful for sellers who sell items in packages of 8 and only want to give discounts to each group of 8 items. In this case, we do not sell our items this way, so we will leave is field blank.

You can also select to combine the coupon amount with a free shipping offer, either just for the products the coupon is valid for, or for the whole order if one of those products is present in the cart. We aren’t feeling that generous in this case though, so we keep this dropdown at No.



In this case we are going to have the coupon valid on all products, so we will leave this section blank. If we wanted to specify this coupon to apply only to certain products, however, we could generate a set of conditions which the products must match in order to have the discount applied to them.

Now we select Save Rule and our 25% coupon is set to go, ready to be mailed in your newsletter and begin generating sales.

In the front end, the customer while ordering will be asked to enter the coupon code



Once he enters, the discount will be automatically calculated before the check out.

Change default logo in Magento Invoice printout

Magento allows you to change the default logo and address used on HTML & PDF invoice printouts. Granted, it is very restricted but here is how you do it:

1. In your Admin Console. Go to Configuration -> Sales -> Sales -> Invoice and Packing Slip Design 
2. It’s all very self explanatory. However, be aware that your logo has to be 200px x 50px

Changing default category sort order in Magento

Category toolbar has many options. By default is shows how many items are in the category, you can choose how many products you wish to be displayed per page, you can change the listing type (List or Grid) and you may choose Sort Order. This “Sort Order” can be confusing. The default “Sort Order” is “Best Value”. What does it mean? How is the Best value determined? Can we change the default sort order? 

What is “Best Value” filed?
When you go to Category page in Magento administration, you will see “Category Products” tab. From there, you will see the list of products that are associated to this category. The last column in “Position”. That is how “Best Value” is determined. So, best value is not something that is dynamically calculated. You can tailor it to your likings.


How to change default Sort Order
The file you need to look at is: /app/code/core/Mage/Catalog/Block/Product/List/Toolbar.php Since we’ll modify it, make a copy to /app/code/local/Mage/Catalog/Block/Product/List/Toolbar.php
One there, you will notice this code at the beginning of the file:

1.$this->_availableOrder = array(

2.'position'  => $this->__('Best Value'),

3.'name'      => $this->__('Name'),

4.'price'     => $this->__('Price')

5.);

Default order takes the first value available. So, all you have to do is to either:

• reorder it if you want to have a selection in the Toolbar or
• set only one value of choice if you will remove the selection from the toolbar

I hope this will help somebody.

Add Highslide to Magento

Add Highslide to Magento

Love Highslide? So do we. We’ve even written a manual on how to install and use Highslide in Magento. We’ve used it on the Product-pages to display product-images but it can easily be extended to display images in your CMS-pages, frontpage, etc. Ok, lock the door and watch closely.

Step 1: Download the latest version of Highslide
Click here to go to the Highslide.com-site and download the latest (stable) version to your local computer.

Step 2: Transfer Highslide to your Magento-installation
Unzip the Highslide and transfer the files to your Magento skin-folder, for example:

/skin/frontend/default//highslide

You should now have a bunch of .js-files, a few .css-files and a ‘graphics’-folder in this ‘highslide’-folder.

Step 3: Add code to the head-area to get the Highslide loaded up

Open your /app/design/frontend/default

/template/page/html/head.phtml-file and add the following code at the end (this code will appear in the head-area, above the body):

<!-- Initiate Highslide -->
<script src="&lt;?php echo $this-" type="text/javascript"><!--mce:0--></script>
 
<script type="text/javascript"><!--mce:1--></script>

Step 4: Replace the default product-image magnifier with Highslide

Ok so, this is the most advanced step so pay close attention. Navigate to your frontend template-folder (normally /app/design/frontend/default//template). Now browse further in the directory-tree to the catalog-folder, then the product-folder and finally – the view-folder. You should be somewhere around here:

/app/design/frontend/default//template/catalog/product/view

The files in this folder are very critical to have Magento working so watch your steps closely. The first thing we’ll do is to make a backup of the media.phtml-file which we are going to modify by transferring a copy of it to a secret place your local computer. If you want to revert back to the original product-image magnifier its good to have a backup somewhere. You can even replace it with the very popular MagicZoom Plus-extension which can be bought as an optional addon with all our Magento themes.

Next, open up the media.phtml-file on your server and.. well, we’ve done everything for you in this step, so just replace everything in the file with the following code:

<!-- Fetch product-image information -->
getProduct();
    $_helper = $this-&gt;helper('catalog/output');
?&gt;
 
<!-- Check if Base image is defined, and if so, display it with Highslide effect -->
getImage() != 'no_selection' &amp;&amp; $_product-&gt;getImage()): ?&gt;
<div class="highslide-gallery">
    <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image') ?&gt;">
        <img title="Click to enlarge" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'image')-&gt;resize(265) ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($this-&gt;getImageLabel()) ?&gt;" />
    </a>
    <!-- Add caption below the image -->
<div class="highslide-caption">
        htmlEscape($this-&gt;getImageLabel()) ?&gt;</div>
</div>
<!-- No Base image available. Will show default image from Magento -->
 
<!-- Hey, this product has more images so we'll display the gallery and Highslide them as well -->
getGalleryImages()) &gt; 0): ?&gt;
<div class="more-views">
<div class="highslide-gallery">
<h4>__('More Views') ?&gt;</h4>
<ul>
    getGalleryImages() as $_image): ?&gt;
    <li>
            <a class="highslide" onclick="return hs.expand(this)" href="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'image', $_image-&gt;getFile()); ?&gt;">
            <img title="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($this-&gt;getProduct(), 'thumbnail', $_image-&gt;getFile())-&gt;resize(56); ?&gt;" alt="&lt;?php echo $this-&gt;htmlEscape($_image-&gt;getLabel()) ?&gt;" /></a>
<div class="highslide-caption">
            htmlEscape($_image-&gt;getLabel()) ?&gt;</div></li>
</ul>
</div>
</div>
<!-- End of media.phtml with Highslide-effect -->

Step 5: Finish

You’re done.

Magento - Yahoo Analytics Conversion Code

Unlike other tracking codes, we need to put Yahoo Analytics Conversion code between <HEAD> and </HEAD> tags.

Yahoo’s Instructions for the following code are:

Copy the HTML code below and insert it between the <HEAD> and </HEAD> tags on your site’s conversion page(s). To pass a dynamic revenue value in the tag, you must modify your web pages accordingly.

To add the Yahoo conversion tracking code in the Head tags, we need to look at the checkout layout configuration file:
/app/design/frontend/your_interface/your_theme/layout/checkout.xml

Find out which page layout it uses when an order is completed.

i.e.) For one page checkout, look for this code:

<checkout_onepage_success>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>

You can edit the Head section of ‘2columns-right.phtml’ to add the Yahoo tracking code. But if this template, 2columns-right.phtml is being used for other pages, I would make a copy of it and name it ‘2columns-right-success.phtml’ and add the tracking code there. This way, it will track it only when there is a successful conversion.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?><SCRIPT language=”JavaScript” type=”text/javascript”>
<!– Yahoo! Inc.
window.ysm_customData = new Object();
window.ysm_customData.conversion = “transId=,currency=,amount=”;
var ysm_accountid = “—–YAHOO_ACCOUNT_ID—–”;
document.write(”<SCR” + “IPT language=’JavaScript’ type=’text/javascript’ ”
+ “SRC=//” + “srv2.wa.marketingsolutions.yahoo.com” + “/script/ScriptServlet” + “?aid=” + ysm_accountid
+ “></SCR” + “IPT>”);
// –>
</SCRIPT>

Magento: AJAX Cart Pro 1.4.5 update released

In AJAX Cart Pro v.1.4.5 the following features are implemented:

    * cross operation of "www.domain" and "domain" support. The error that can occur due to browser security violation when using both "www.domain" and "domain" is avoided.
    * default, blank and modern themes support. For these themes and their modifications AJAX Cart Pro doesn’t need any additional configuration to run.
    * easy custom configuration (custom.js). Now it is possible to adjust AJAX Cart Pro almost to every custom theme.

How to Edit the Magento Footer & Footer Links

The Magento footer links are collected from a few different layout components:

 1. About Us | Customer Service
-> cms.xml

These two links are default static blocks taken from the database. To edit them, go to Magento Admin -> CMS -> Static Blocks.

 2. Site Map
-> catalog.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”catalog” ifconfig=”catalog/seo/site_map”><label>Site Map</label><url helper=”catalog/map/getCategoryUrl” /><title>Site Map</title></action>
</reference>

 3. Search Terms | Advanced Search
-> catalogsearch.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”catalogsearch” ifconfig=”catalog/seo/search_terms”>
<label>Search Terms</label>
<url helper=”catalogsearch/getSearchTermUrl” />
<title>Search Terms</title>
</action>
<action method=”addLink” translate=”label title” module=”catalogsearch”>
<label>Advanced Search</label>
<url helper=”catalogsearch/getAdvancedSearchUrl” />
<title>Advanced Search</title>
</action>
</reference>

 4. Contact Us
-> contacts.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”contacts” ifconfig=”contacts/contacts/enabled”><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare></action>
</reference>

 5. RSS
-> rss.xml
<reference name=”footer_links”>
<action method=”addLink” translate=”label title” module=”rss” ifconfig=”rss/config/active”><label>RSS</label><url>rss</url><title>RSS testing</title><prepare>true</prepare><urlParams/><position/><li/>
<a>class=”link-feed”</a>
</action>
</reference>

 * 2. Site Map, 3. Search Terms | Advanced Search, 4. Contact Us, and 5. RSS are the HTML links pulled by the function “$this->getLinks()”, not by “$this->getChildHtml(name)”. These links are pulled from a few different places as specified above.

 6. To edit the default Magento footer message ” Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.2.1.2) © 2007 Magento Demo Store. All Rights Reserved.”, edit the following file.
-> /app/design/frontend/default/default/template/page/html/footer.phtml

 7. To edit the copyright notice,
-> /app/design/frontend/default/default/template/page/html/footer.phtml

Add a CSS class to Magento menu links

Template file for link list menu

Ever wonder or ever hit your head on the wall what bloody template file controls the site link, footer link in Magento and how to add a class to it? That’s right, it’s the page/template/links.phtml.

The template file generates ‘first’ and ‘last’ class in li tag, but sometimes we need more styling in each individual link list and we want to add a class either in li or anchor tag without hacking the core file or extend a class in Magento core, how do we do that?

The answer is in the xml file

In the rss.xml file we found an example:

<action method="addLink" translate="label title" module="rss" ifconfig="rss/config/active"><label>RSS</label><url>rss</url><title>RSS testing</title><prepare>true</prepare><urlParams/><position/><li/><a>class="link-feed"</a></action>

The key is this line of code which will add a “link-feed” to a tag: 

<urlParams/><position/><li/><a>class="link-feed"</a>

Until recently we were not aware that the same links.phtml file also control the “Categories Sitemap” and ” Products Sitemap” links in SEO sitemap, when we tried to position the two sitemap links and wanted to avoid adding extra div as a wrapper like we did for footer.links and top.links. Upon testing, we also found a way to add a class to li element. See the screen shot A.



The key is <position> tag, without it , “seo-link” class will be added to li tag. Screen Shot B shows the code with <position>10</position>. In the screen shot A you can see that two classes are used in the li tag. The first one, with “first” class is generated from the “links.phtml”. You should remove it if you prefer to use class in li tag rather than anchor tag.

If no position needed, you can use a self close tag like so: <position/>

Extended Features In Magento 1.4

Magento 1.4 latest version of magento, when any new version released it contains some extended features and added some new features and functionality in it. Here we mention some new features added in magento 1.4. This released includes some great features like WYSIWYG editor, extended PayPal handling, Widgets and SEO improvements.

It applies 3D secure credit card validation, Visa and MasterCard validation.

Full re-implementation of PayPal modules and it contain lot of new functionality with the number of bugfixes. Now PayPal check out allowed through PayPal logo while allow guest checkout is marked NO.

Magento 1.4 includes some SEO and accessibility enhancements.

The new version 1.4 able to insert template predefined and custom variables in the email templates. It implements custom variables functionality and added variables reference in email templates.

It introduced design cross-package fallback and the default theme. It takes full review of frontend themes.

Magento 1.4 add Catalog Product Price Template block. In short Catalog Product Block retrieve price block types from catalog product price template block if available Made is_active = yes by default when creating a CMS block or a shopping cart price rule.

In the new version magento 1.4 add ability to define arbitrary cache backend.

Replaced admin notification flash popup into a simple HTML overlay. It Implements field dependencies in widget options insertion form, moved widgets functionality into separate module. Remove redundant widget options element renderer. In magento 1.4 all widget choosers and the media image browser use an overlay instead of a popup window.

Magento 1.4 Re-implement 404 and report pages, introduced 503 page, specifically for maintenance purposes.

In this new version made order processing workflow, it is more informative and severe.

Magento 1.4 is able to configure entry point using virtual host environment configuration, rather than creating another physical entry point.

Added image/media uploader/browser, that can browse entire media folder, Implement separate thumbnails storage for image uploader and browsing entire media folder because of these now thumbnails wont mess up with content.

T the time of startup it optimized cache initialization, Optimized export from grids in admin area.

Improved tax and discount totals calculation, It Decrees number of queries for processing tax rates, unified cache key logic in tax rate caching process.

It implements proper transaction of saving an order and related entities; it implements proper payment processing in Mage_Sales_Model_Order_Payment model.

Apply EAV Entity Save performance. It means 1 insert of multiple rows instead of multiple inserts into the same table.

It Added Custom Variables functionality. It will improve customer id validation in customer session. Apply lot of new System Configuration options.

Magento 1.4 improved javascript files merging, and also added CSS files merging.

Added WYSIWYG for CMS and Catalog, Implemented product and category URLs per store view.

Magento 1.4 able to provide child blocks in admin form block. It adds numbers localization support for shopping cart qty input.