Asia Connect Technology JSC » Magento Development

Magento block caching

lydh — Tue, 20 Oct 2009 01:48:05 +0000

Recently we were working on speeding up parts of client site which had usual problem of slow page loading caused by complicated configurable products. To solve the problem we were experimenting with extending core Magento caching capabilities.

Magento has built in predifined system of block output caching. Its block abstract has Zend_Cache caching capabilities that can be modified for your own needs. I’m showing here an example of caching whole product view block, however this is just a specific example of how things works, problems are different and requires different approach and solution.

I will start with some external reading and example itself. There is great article on Magento Wiki about this topic, along with category cache example on Magento forums.

With my Inchoo_BlockCaching.rar example module things should be little easier to understand.

Magento block caching depends of three things:
cache_lifetime => cache lifetime in seconds
cache_tags => cache type identifiers primarly used for deleting right cache at the right time
cache_key => cache identyfier

You can simply inject this data into construtor of any Magento block

protected function _construct()
{
$this->addData(array(
'cache_lifetime' => 3600,
'cache_tags'     => array(Mage_Catalog_Model_Product::CACHE_TAG),
'cache_key'      => $this->getProduct()->getId(),
));
}

or if you need some conditional approach like i did in this example define equivalent functions

public function getCacheKey(){}
public function getCacheLifetime(){}
public function getCacheTags(){}

By Ivan Weiler 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

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

Programatically create Magento blocks and inject them into layout

lydh — Thu, 08 Oct 2009 04:04:36 +0000

Imagine a scenario where you wish to simply create a view file like custom-note.phtml and show this view file on some new url inside the Magento store. One way to do this is to create a CMS page and call that block from within CMS page. But what if you wish to create and append this block to other areas of Magento layout that are inaccessible from CMS page interface form admin? What if I want to add new div element under the breadcrumbs and append new block under it?

magento philosophy is to create block class under the /Block folder of your module, to create xml layout file under the theme /layouts folder (or to modify existing layout file) and so on. Anyway you turn it around you either need to have Block file or add/modify at least the entry to the layout files.

All this is OK if you are working on your own store so you have full control over the code. However, what if you are developing a module that will be used on different Magento stores. My prime concern when building a module is to keep the number of necessary module files to a minimum.

In code below, you will see how easy it is to call your Core/Template block to show on any area of Magento layout.

Extracted from app/code/local/ActiveCodeline/CustomOutputs/controllers/IndexController.php file.

public function indexAction()
{
//Get current layout state
$this->loadLayout();

$block = $this->getLayout()->createBlock(
'Mage_Core_Block_Template',
'my_block_name_here',
array('template' => 'activecodeline/developer.phtml')
);

$this->getLayout()->getBlock('content')->append($block);

//Release layout stream... lol... sounds fancy
$this->renderLayout();
}

Most IMPORTANT thing to keep in mind here is the “error handling”. If you assign a “invalid” block to ->append(), you will not (most likely) see an error but “nothing happend” situation.

Anyhow… hope the attached module (extension) will save you some headaches. I know it took me few hours of tracing and testing to get the grip of it.

Download ActiveCodeline_CustomOutputs extension.

Cheers.

ByBranko Ajzele from Inchoo.net