Asia Connect Technology JSC » Magento Customization

Custom Transactional Emails

lydh — Mon, 19 Oct 2009 02:40:17 +0000

Since transactional emails are very important for the process of online shopping you need to have them set up just the you want them and the default templates just don’t cut it. You need your own logo, email data and custom verbiage to be consistent with the image of your company.

Here how it’s done :

1. Creating custom transactional e-mails via Admin

a) In the admin panel of your magento installation go to: System->Transactional Emails

You’ll be presented with a list of default emails. You’ll need to create a custom email so the only way to avoid writing our custom templates from scratch is to use the existing code of the template.
Hint: If you want to see the template before copying, first click on the “Preview” button on the right.

b) To create the new template click on the “Add new template” above the “Transactional Emails” list. This is the part where Magento helps you with the option to load a deafult template for you to customize. Nice feature indeed.

Once you have loaded the deafult template give it a unique name under the “Template name” input field by adding a prefix of your own but leaving the deafult name as well. Example: ” mysite :: New account “.

That way you can easily spot them in the long list of default and custom emails.

Afterwards you can easily customize the verbiage and styling within the “Template subject” and “Template content”.

The “Template content” is the body of the message that the user will recieve upon transaction so be sure to change the E-mail, name of the company etc. You’ll need to upload the logo of your company in the images folder of the skin you’re using.

Once you are done with editing, save the changes and repeat the process for the rest of the email templates.

2. Assigning the templates to different stores and storeviews

Assigning is the easiest part. Just go to the System > Configuration > Sales > Sales Emails and select the corresponding template minding the configuration scope.

After you’re done with setting your new templates save the configuration by clicking on the “Save config”.

That’s it. Wise thing to do now would be to check how the emails look when received so make a test purchase to verify everything is the way it should be.

By Željko Prša from Inchoo.net

Add Adwords tracking code to order confirmation page in Magento

lydh — Thu, 15 Oct 2009 02:37:57 +0000

Adding an Adwords tracking code to order confirmation page in Magento is relatively easy task. One that can be handled under an hour or so if you choose to implement it the proper way. Here is how.

Modify the “app/design/frontend/default/my_custom_theme/layout/checkout.xml” file. Look for section

And turn it into

Create the “app/design/frontend/default/my_custom_theme/template/checkout/google_adwords_tracking.phtml” file and copy-paste the the Adwords tracking JavaScript code into it.

This code relies on


< ?php echo $this?>getChildHtml('before_body_end') ?>

block call from footer of each template (1column.phtml, 2columns-left.phtml, 2columns-right.phtml, 3columns.phtml). So, as long if haven’t removed this block call from mentioned templates, the above should work.

Thats it.

By Branko Ajzele from Inchoo.net

Magento Navigation, how to customize very helpful information?

lydh — Thu, 15 Oct 2009 02:18:20 +0000

This post describes how Magento navigation works. I hope it will help you.
The begining of all is in template file: “category/navigation/top.phtml”


< ?php
foreach ($this->getStoreCategories() as $_category): ?>
< ?php
echo $this->drawItem($_category);
?>
< ?php endforeach ?>

There we call the method from class Mage_Catalog_Block_Navigation $this->getStoreCategories(). This method returns the array $_nodes from object Varien_Data_Tree_Node_Collection.

This array contains objects of Varien_Data_Tree_Node.
Every node is object of Varien_Data_Tree_Node and it is extension from Varien_Object.

Example 1:

If we wish to see how much categories we have, we can do it with method showed below:

< ?php
echo $this->getStoreCategories()->count();
?>

We will get only number of categories from the first level.

Example 2: (only level 1):

< ?php
foreach ($this->getStoreCategories() as $categories)
{
// $categories is object Varien_Data_Tree_Node extendec Varien_Object

echo $categories->getData('entity_id')."\n";
echo $categories->getData('parent_id')."\n";
echo $categories->getData('level')."\n";
echo $categories->getData('children_count')."\n";
}
?>

Every Varien_Data_Tree_Node contains varible $_childNodes

/**
* Child nodes
*
* @var Varien_Data_Tree_Node_Collection
*/
protected $_childNodes;
**/

and $_childNodes is instance of Varien_Data_Tree_Node_Collection.

Varien_Data_Tree_Node_Collection contains variable $_nodes which is array with Varian_Data_Tree_Node.

All this “revolves” through recursion …

By Domagoj Potkoc from Inchoo.net

CoolDash – Blank Magento extension for building admin system configuration area

lydh — Wed, 14 Oct 2009 03:29:50 +0000

In order to speed things up with building admin sections under System > Configuration area in Magento I wrote a little blank extension. Hopefully its a step or two beyond “Hello world” level. I named the extension “CoolDash”, short from CoolDashboard. Name holds no special meaning, just something I popped out of my head. First thing you might notice when you open config.xmls and system.xml is the attribute naming. I intentionally used names like “somecooldashmodel2″. I found it extremely difficult, error prone and annoying to get around in scenarios where different areas of config files use same names for attributes with different meaning, like “customer”, “catalog” and so on.

Hopefully my “funny” naming scheme in config files will give you a better overview on where everything goes. Below are few screenshots to see the result.

Download ActiveCodeline_CoolDash.Blank extension for building “System > Configuration” area of Magento admin interface. Although built on Magento 1.4alpha, should work on Magento 1.3.

Hope it helps.

By Branko Ajzele from Inchoo.net

Free Magento Themes vs Custom Magento Design

lydh — Tue, 13 Oct 2009 02:32:04 +0000

This blog post describes pros and cons of having a free Magento theme versus having a custom Magento design from a marketing perspective.

Free Magento Themes:

There are some pretty obvious advantages of using a free Magento theme:

It’s free. – This one is a no-brainer, you don’t need to invest any money in it.
It’s fast. – You don’t need to wait for it to be finished, you just download it and use it.
It works. – Most of the free Magento themes work just fine with Magento out of the box.

However, truth be told, I believe the cons of having a free Magento theme give you enough reason to go for custom design:

It’s unprofessional. – A visitor (your potential buyer) might realize you’re using a free theme. This will make him wonder, can he really trust your website? Is it a real company standing behind this online store? Can I really give my credit card to these guys? They probably aren’t a serious company if they don’t have money for the design that fits their company’s identity.
There might be no support. – If something goes wrong, there might be no one to help you. Magento can change a lot at upgrade and some themes might start showing errors.
There might be no support for new features. – Magento is constantly developing ecommerce platform and new features will always be presented. Some of the free templates might not keep up with Magento’s development and you’ll end up without the ability to use some of the cool new features that rolled out, wile your competitors with custom design will have this advantage.
The free theme probably isn’t really optimized for best conversion rate. – Some free themes are done with conversion rates in mind, however, the conversion rate optimization usually depends on your niche and targeted audience. A design and layout that works for a certain company might not be so good in converting visitors into sales in your niche.

Custom designed Magento themes:

I will not list disadvantages of custom designed Magento themes since their disadvantages are already listed as advantages of free themes. Here are some really important pros for getting yourself a custom designed Magento theme:

Unique design that fits your company’s identity. – This is extremely important if you’re into any serious business. Building a strong corporate identity is crucial for establishing a recognized brand. Your online store will not only make you profit with the sales you make, but it will also help build a brand image with your targeted audience.
Someone you can count on. – If you choose a reliable company to create a Magento theme for your store, you know they will be there once the Magento upgrade comes to fix any potential problems. They will be there to help you change things around once the change is required and they will be there to consult you and share their experience and best practices.
Unique features. – Your online store is specific, you are a member of some niche. Most niches will require some additional functions that Magento doesn’t support by default to make the best out of your online store. If you choose to work with experienced development company, they will be able to provide you with development solutions for your problems. This is something you can’t get with free or premium Magento themes.

By Toni Anicic from Inchoo.net

How to make TinyMCE work with Magento CMS pages

lydh — Mon, 12 Oct 2009 03:08:40 +0000

Latest version of Magento, as of time of this writing, is 1.3.2.3. Latest, as well as previous versions come with “half-packed” support for TinyMCE editor. There are however few bugs and few steps that need to be handled in order to enable wysiwyg editing in CMS pages. Personally I am not that big of a fan of wysiwyg editors, mostly because I am developer and like to know what I write down.

However, most of the store owners are not developers or even not that much technically savvy people (not that this is a bad thing) and they could use wysiwyg editors when adding, modifying content.

Here I will walk you trough few simple steps that will make you enable wysiwyg editing by using TinyMCE. You can see the screenshots of final result below.

Step 1: Download and unpack TinyMCE to root /js folder. Two things to keep in mind here. Download regular version (not jQuery version) of TinyMCE. This is due to the fact that Magento uses Prototype, so we need to avoid conflicts. Second, watch out for unpack location. Your tiny_mce.js file should be accessible on js/tiny_mce/tiny_mce.js path.

Step 2: Open the app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php file. Locate the

$fieldset->addField('content', 'editor', array(
'name'      => 'content',
'label'     => Mage::helper('cms')->__('Content'),
'title'     => Mage::helper('cms')->__('Content'),
'style'     => 'height:36em;',
'wysiwyg'   => false,
'required'  => true,
));

and change it to

$fieldset->addField('content', 'editor', array(
'name'      => 'content',
'label'     => Mage::helper('cms')->__('Content'),
'title'     => Mage::helper('cms')->__('Content'),
'style'     => 'height:36em;',
'wysiwyg'   => true,
'theme' => 'advanced',
'required'  => true,
));

As you can see, here we changed on existing attribute (’wysiwyg’) value and added new attribute ‘theme’.

Step 3: Open the /lib/Varien/Data/Form/Element/Editor.php file and locate the method getElementHtml(). Here we change

$html = '
serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'
';

$_storeBaseUrl = str_replace('index.php', '', Mage::getBaseUrl());

//Just to test retrieved url
//echo '$_storeBaseUrl: '.$_storeBaseUrl;

$html = '
serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'

';

As you might noticed, I used $_storeBaseUrl in this other chunk of code to get the valid path to my TinyMCE javascript file. If you are using store that does not have url rewrites this is something that needs to be done because your javascript file would not be found if you go trough link like “http://store.local/index.php/js/tiny_mce/tiny_mce.js”. Then you would get TinyMCE shown on CMS page but it would be disabled.

As you can see, there were only three minor changes needed (download, modify, modify) to get the TinyMCE editor working.

Hope this helps. Cheers.

By Branko Ajzele from Inchoo.net

How to use WordPress home page in Magento home page (CMS page)

lydh — Mon, 12 Oct 2009 02:07:35 +0000

Simple : ) -Ok, lets get down to business. This one is really, really simple, but powerful. In all it greatness Magento lacks the good content management solution (CMS features). Lot of people are heading down the road of integrating the WordPress and Magento. Probably everyone in web development has heard about WordPress. Personaly I like them, from Joomla, Drupal, Wordpress… But there is that little something that makes WordPress far more loving in the eyes of the client. Not to start a flame here, lets get back to the topic. Due to the lack of the proper content management in Magento those who use WordPress can easily manage the (home page in this case) content trough WordPress and make it accessible in Magento CMS page (that you can set to home page in Magento).

When would you like to do so?

Imagine you have Magento installed in root of your site and WordPress under some folder like /articles. By default WordPress is accessed via http://mysite.domain/articles and Magento is accessed trough http://mysite.domain. Our goal is to have WordPress Page (that we will title “home“) to be accessible on http://mysite.domain.

Here are the necessary steps involved:

Create a WordPress page named “home” (under url like http://mysite.domain/articles/wp-content)
Create a file named cmswp_home.phtml under app/design/frontend/default/yourtheme_or_default_theme/template/inchoo/ folder
Create a Magento CMS page (if it already does not exist) name it anyway you want and then add {{block type=”core/template” template=”inchoo/cmswp_home.phtml”}}
to its content
Set the newly created Magento CMS page as home page for Magento under Magento Admin System > Configuration > Web > Default Pages > CMS Home Page

Below is the code you need to copy paste into the cmswp_home.phtml file mentioned in above steps.

< ?php

/**
* Pulls the content of post named 'home' from WordPress 'wp_posts' table
* @author Branko Ajzele
* @license GPL
*/

//Fetch database connection
$_conn = Mage::getSingleton('core/resource')->getConnection('core_write');

//Set query that retrieves the home page content
//THIS GOES IF YOU HAVE WORDPRESS AND MAGENTO IN SAME DATABSE
$_findHomePage = "SELECT post_content FROM wp_posts WHERE post_name = 'home' AND post_status = 'publish' AND post_type = 'page'";

//Set default value of home page to null, then do a safe check just to be more user friendly
$_homePageContent = null;

try {
/*
//IF YOU HAVE WORDPRESS AND MAGENTO INSTALLED EACH IN ITS OWN DATABASE; THEN USE
$conf = array(
'host' => 'localhost',
'username' => 'wordpress_db_username',
'password' => 'wordpress_db_password',
'dbname' => 'wordpress_db_name'
);

$_resource = Mage::getSingleton('core/resource');
//Create new connection to new server and new databse
$_conn = $_resource->createConnection('place_some_free_random_resource_name_here', 'pdo_mysql', $conf);
*/

$_homePageContent = $_conn->fetchOne($_findHomePage);
}

catch (Exception $ex) {

//SEND EXCEPTION INFO TO ADMIN?

/*
* USE $emailSmtpConf, $transport and $mail->send($transport); in case you need to specify SMTP manualy
$emailSmtpConf = array(
'auth' => 'login',
'ssl' => 'tls',
'username' => 'some_email@gmail.com',
'password' => 'some_pass_here'
);

$transport = new Zend_Mail_Transport_Smtp('smtp.gmail.com', $emailSmtpConf);
*/

$_sendTo_email = 'ajzele@somemail.com';
$_sendFrom_email = 'branko.ajzele@somemail.com';

//Notify each item author about purchase
$mail = new Zend_Mail();
$mail->addTo($_sendTo_email, 'Branko Ajzele');
$mail->setFrom($_sendFrom_email, 'Branko Ajzele');
$mail->setSubject('Invalid HOME PAGE on site detected');
$mail->setBodyHtml('
Invalid HOME PAGE on site detected
There seem to be some issues with home page on your site. Please take a look at it.
Could be that WordPress page has been disabled and this made the query for page return null.
');
try {
//Try to send email
//$mail->send($transport);
$mail->send();
}
catch (Exception $ex) {
//echo $ex->getMessage();
}

}

?>

< ?php if($_homePageContent): ?>
< ?php echo $_homePageContent ?>
< ?php else: ?>
Home page unavailable
Seems like home page is unavailable at the moment. We apologize for the inconvenience.
< ?php endif; ?>

That’s it.

If you wish to have more control over what is outputted take a look $_findHomePage variable and the query behind it.

Hope you find this useful.

Cheers.

By Branko Ajzele from Inchoo.net

Remove SID query from Magento URLs

lydh — Sat, 10 Oct 2009 02:27:40 +0000

Many people wonder why sometimes the SID part appears in their Magento URLs. This is when your URL has additional SID query usually at the end. Take a look at the image. The curiosity is that it does not appear always. What is the most common scenario it happens? You didn’t access the site with the same domain variant you entered as your “Base URL” in your System> Configuration> Web interface.

When you decide to launch the site, you have to decide whether you will market http://www.domain.com/ URL or http://domain.com/. This is an important decision and you shouldn’t change your mind quite often. Search engines usually treat those two URLs as a different sites and therefore the Page Rank potential can be split between those two URLs. So, think about whether you will use www or not and stick by this decision.

Once you decided, go to your System> Configuration> Web interface and enter the desired form to “Base URL” field. When you access the site you will notice that there are no “SID”s when the URL matches the value from “Base URL” field and they appear when it does not.

Now, we want the ability that the site redirects to proper URL once accessed. Someone can place a wrong link to some forum or blog. We don’t want those links to lead to improper URL and we don’t want SIDs to appear to those visitors. Most important: We don’t want that search engines index the URLs with SIDs.

The solution is simple. Go to your .htaccess fine and find the line that says

RewriteEngine on

If you want to have www part:

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [R=301,L]

If you don’t want to have www part:

RewriteEngine on
RewriteCond %{HTTP_HOST} !^yourdomain\.com$ [NC]
RewriteRule ^(.*)$ http://yourdomain.com/$1 [R=301,L]

Btw. This is applicable and good to be set to every site, not just Magento ones.

By Tomislav Bilic from Inchoo.net

Magento CMS syntax – part1

lydh — Fri, 09 Oct 2009 01:56:59 +0000

Every Magento user noticed that there is special {{magentocode}} syntax available in cms pages and blocks. We traced a bit to find out which params are available and what exactly they do.

As strange as this may sound, processor class that gets called is Mage_Core_Model_Email_Template_Filter located at app/code/core/Mage/Core/Model/Email/Template/Filter.php .

There are also some interesting directives in superclass Varien_Filter_Template, but if i’m not mistaken, none of them can be used.

There are six replacement codes that can be used and each triggers its equivalent Directive function:

skinDirective
mediaDirective
htmlescapeDirective
storeDirective
blockDirective
layoutDirective

I’ll start with easier and most commonly used and continue with advanced ones in part two of this article.

1. skinDirective

Description: Used to retrieve path of skin folder and its files, theme fallback respected
Example: {{skin url=’images/image.jpg’ _theme=’blank’}}
Synonym: Mage::getDesign()->getSkinUrl($params['url'], $params)
Params:
url = empty or relative file path
_theme = alternative theme, fallbacks if file not exist
_package = alternative package
_area = alternative area(frontend,adminhtml)
_type, _default etc. = nothing useful, somebody please correct me if i’m wrong

2. mediaDirective

Description: Used to retrieve path of root/media folder and its files
Example: {{media url=’image.jpg’}}
Synonym: Mage::getBaseUrl(’media’) . $params['url']
Params:
url = empty or relative file path

3. htmlescapeDirective

Description: Used to escape special html chars
Example: {{htmlescape var=’inchoo.net”>inchooinchooinchoo’ allowed_tags=’b’}}
Synonym: Mage::helper(’core’)->htmlEscape($params['var'], $params['allowed_tags'])
Params:
var = string to escape
allowed_tags = comma-separated list of allowed tags

4. storeDirective

Description: Used to build magento routes and custom urls
Example: {{store url=’customer/account’ _query_a=’8′}}
Synonym: Mage::getUrl($params['url'], $params);
Params:
url = magento routers url
direct_url = normal url, appended to baseurl
_query_PARAMNAME = adds query param, for example _query_a=’8′ adds a=8 to url
_fragment = adds fragment, for example #comments
_escape = escapes “,’,<,>
custom = if using magento route url param, every custom param added will be appended like /a/8/b/10

I probably missed something in this last one, but it’s very late and i’m tired of poking through Magento

To be continued ..

By Ivan Weiler from Inchoo.net

Magento FLIR

lydh — Thu, 08 Oct 2009 04:13:38 +0000

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. Let’s see how it behaves in Magento.

1. Download FLIR from FLIR homepage. I was using latest 1.2 stable for this article because of simplicity, but if you try you’ll find out that 2.0 beta also works great but requires little more configuration.

2. Unpack FLIR content (cache,fonts,etc.) inside skin/frontend/default/default/facelift
I think it makes perfect sense to put it into skin folder.

3. Open app/design/frontend/yourpackage/yourtheme/template/page/html/head.phtml and append

If your php error reporting isn’t disabled add error_reporting(0); somewhere on top of config-flir.php. This is main config file from which you can define options and custom fonts, so examine it.

Refresh your Magento store and you should see the result.

flir.js can also be alternatively included from layout files inside head block

skin_jsfacelift/flir.js

There is nice Quick Start Guide and Documentation available from FLIR homepage, so i won’t go in details on some advanced FLIR settings, but here are few examples:

//pass selectors as comma separated list
FLIR.auto(’h5,h4′);
//pass an array of selectors
FLIR.auto( [ 'h4', 'h5' ] );
//replace manually with custom options
FLIR.replace( ‘div.box h4′ , new FLIRStyle({ mode: ‘wrap’ , css: {’font-family’:’arial’} }) );
//prototype way
$$(’div.box h4′).each( function(el) { FLIR.replace(el); } );

Cya.

By Ivan Weiler from Inchoo.net