Developer Extensions

Developer toolbar:

http://www.magentocommerce.com/extension/2271/developer-toolbar

Blueprint Theme:

http://www.magentocommerce.com/extension/2245

Free Magento Extensions

Product Image lightbox:

http://www.magentocommerce.com/extension/1487/magento-easy-lightbox

Product Detail tabbing:

http://www.magentocommerce.com/extension/1725/magento-easytabs

Teaser Box:

http://www.magentocommerce.com/extension/1778/teaserbox

Free Magento Themes

Absolute Magento Theme

http://www.magentocommerce.com/extension/2031/magento-absolute-theme

Paid Magento Extensions

Abandoned Cart Alerts

http://adjustware.com/shop/magentomods_abandoned_carts_alerts.html

Quickview

http://www.magentocommerce.com/extension/574/quickview-1.1

First we have to create a module. Create file: app/etc/modules/Mage_Page.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mage_Page>
            <active>true</active>
            <codePool>local</codePool>
        </Mage_Page>
    </modules>
</config>

Then copy this whole folder: app/code/core/Mage/Page to app/code/local/Mage

What we’ve done is taken a core module and copied it into our local module. This lets us override any core functionality without have to worry about it breaking in future update (or undoing if you mess up).

Now we need to edit: app/code/core/Mage/Page/etc/config.xml and look around line 46 and you can define your own layout, I’m going to call mine “home”

<layouts>
	<home module="page" translate="label">
        <label>Home</label>
        <template>page/home.phtml</template>
        <layout_handle>page_home</layout_handle>
    </home>
    <empty module="page" translate="label">
        <label>Empty</label>
        <template>page/one-column.phtml</template>
        <layout_handle>page_empty</layout_handle>
    </empty>
    <one_column module="page" translate="label">
        <label>1 column</label>
        <template>page/1column.phtml</template>
        <layout_handle>page_one_column</layout_handle>
    </one_column>
    <two_columns_left module="page" translate="label">
        <label>2 columns with left bar</label>
        <template>page/2columns-left.phtml</template>
        <layout_handle>page_two_columns_left</layout_handle>
    </two_columns_left>
    <two_columns_right module="page" translate="label">
        <label>2 columns with right bar</label>
        <template>page/2columns-right.phtml</template>
        <layout_handle>page_two_columns_right</layout_handle>
    </two_columns_right>
    <three_columns module="page" translate="label">
        <label>3 columns</label>
        <template>page/3columns.phtml</template>
        <layout_handle>page_three_columns</layout_handle>
    </three_columns>
</layouts>

Now all you have to do is make a template for this page. Navigate to your theme directory: app/design/frontend/YOUR_THEME/YOUR_THEME/template/page/ and create a new template called home.phtml. I suggest using another existing template as a starting point, such as 3columns.phtml so that you know what variables to work around. This will enable a custom layout option for CMS pages once you’re finished. I’ve tested this with 1.3 series but nothing previous or after that. If you have any comments or questions feel free to post them here or read the forum on Magento’s site for more details.

When you are choosing web hosting, one of the first things you need to choose is the operating system. If you are a techie, this is probably an easy choice, but if you don’t have technical background, then the very question “Operating system?! What is this?” will pop up in your head.

What is an Operating System?

There are many definitions of what an operating system is but since you are not a techie, you will hardly be willing to delve into the technical details. To put it into layman’s terms, an operating system is a piece of software you need in order to install applications and to access the underlying hardware.

Hardware is nothing without software to manage it and this is why you need software (i.e. the operating system) to tell the hardware what to do. On the other hand, an operating system doesn’t perform tasks an application can and this is why you need to install applications within the operating system in order to perform tasks such as browsing the Net, logging into your web host, etc. It is true that most operating systems come bundled with applications but still applications are separate from the operating system.

Popular Web Hosting Operating Systems?

There are hundreds of operating systems in use but the most popular ones are Windows and Linux. As an end-user, you are probably already familiar with Windows because you are probably using it on your computer. As far as web hosting is concerned, Windows hosting doesn’t use exactly the same version of Windows that you may be running on your computer; but still both versions are very similar.

The second popular web hosting operating system is Linux. You might have heard about it but probably you have never used it. Unlike Windows, Linux is primarily a server operating system (though there are many Linux distributions that are intended as a desktop operating system). In addition to Windows and Linux, there are other web hosting operating systems, such as UNIX=, MAC, HP varieties, or Solaris, but we won’t discuss those here.

Is Linux Hosting or Windows Hosting Best?

Usually when you have to choose the operating system for your web hosting, the choice is between Windows hosting and Linux hosting. Both Windows hosting and linux hosting have their advantages and disadvantages and it is not possible to recommend one of them as the better option. In some situations Linux hosting is the way to go, while in others Windows hosting is the better alternative.

For a novice, who is familiar with neither Linux hosting, nor Windows hosting, Linux hosting could be a bit more difficult to master. However, once you pass the initial stages, you will see that Linux administration is not terribly difficult.

Actually, the biggest deciding factor between Linux hosting versus Windows hosting are your applications. There are applications, which can be run only under Windows/Linux and if your applications fall into this group, you have no choice but to go for Linux hosting/Windows hosting.

Facebook f8: Open Graph and Open Source
Facebook f8: Default is Social pt1

What you CAN’T do in FBJS

I learned very quickly, that Facebook JavaScript does not allow some very common native functions such as onload, arrays and alerts as well as access to many properties of the document or window level of the DOM. There are workarounds and alternative methods that you can use instead:

window.onload in FBJS

Instead of using window.onload to initialize your functions, use setTimeout.

setTimeout( function(){  }, 10 );

Even an empty setTimout at the beginning of your script will kick start your functions which would normally auto init (this seems to work fine in canvas, but not so much in tabs).

alert alternative for FBJS

Since you can’t use alert or document.write, use Facebook’s dialog box:

new Dialog().showMessage('Dialog', 'This is text');

document.write alternative for FBJS

Since you don’t have access to the document or window levels of the DOM, you’ll want to setup a little include for testing. I drop in this code when i want to quickly output:

<script>
function logOutput(){
    var text = "This will be inserted into my log div";
    document.getElementById('log').setTextValue(text);
}
</script>
<div id="log"></div>

Trouble with JS Arrays in Facebook

For whatever reason, facebook also decided to rip out support for creating objects which also eliminated the way most of us make arrays:

// new Array() is not supported in FBJS
var myarray = [];
myarray[0] = 'stuff';
 
// or
myarray['foo'] = 'bar';
 
// or 
myarray.push('another example');

More to come as I wrestle further with Facebook. Any tips or comments are greatly appreciated!

1. Get MAMP up and running, no special setup is needed here.
2. Download Zend Framework and place it wherever you’d like. I actually retrieved my copy via SVN so that I can easily upgrade it later. To do this open up terminal and follow these commands:

   cd /Applications/MAMP/
   mkdir svn
   cd svn
   mkdir zendframework
   cd zendframework
   svn checkout http://framework.zend.com/svn/framework/standard/trunk
   

3. Now open your php.ini file located under /Applications/MAMP/conf/php5/php.ini
4. Search for include_path (around line 411 on mine) and add the location of your zend framework:

   include_path = ".:/usr/lib/php:/usr/local/lib/php:/Applications/MAMP/svn/zendframework/trunk/library"

   Make sure to include the library directory otherwise you’ll get a blank page in Zend Framework

5. Zend Framework also comes with a shell script that will help you with RAD (Rapid Application Deployment), you can create a shortcut to Zend Tools in terminal by adding an alias to your profile under /etc/profile (thanks DS for pointing this out) and make sure to restart terminal after you’ve done so:

   alias zf=/Applications/MAMP/svn/zendframework/trunk/bin/zf.sh

6. Test if the Zend Tool is installed correctly by showing the version:

   zf show version

7. Finally navigate to the directory you’d like to create your first project in:

   cd /Applications/MAMP/htdocs/

   and with Zend Tool creating a project is simple:

   zf create project test

First we have to create a module. Create file: app/etc/modules/Mage_Sales.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Mage_Sales>
            <active>true</active>
            <codePool>local</codePool>
        </Mage_Sales>
    </modules>
</config>

Then copy this whole folder: app/code/core/Mage/Sales to app/code/local/Mage

What we’ve done is taken a core module and copied it into our local module. This lets us override any core functionality without have to worry about it breaking in future update (or undoing if you mess up).

Now we need to edit: app/code/core/Mage/Sales/etc/config.xml and look around line 544 and you’ll want to replace tags with:

<order>
    <statuses>
        <pending translate="label"><label>Pending</label></pending>
        <pending_paypal translate="label"><label>Pending PayPal</label></pending_paypal>
        <processing translate="label"><label>Processing</label></processing>
        <holded translate="label"><label>On Hold</label></holded>
        <complete translate="label"><label>Complete</label></complete>
        <closed translate="label"><label>Closed</label></closed>
        <canceled translate="label"><label>Canceled</label></canceled>
    </statuses>
	<states>
	  <new translate="label">
	    <label>New</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </new>
	  <pending translate="label">
	    <label>Pending</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </pending>
	  <processing translate="label">
	    <label>Processing</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </processing>
	  <complete translate="label">
	    <label>Complete</label>
	    <statuses>
	      <complete/>
	      <pending/>
	      <processing/>
	      <holded/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </complete>
	  <closed translate="label">
	    <label>Closed</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </closed>
	  <canceled translate="label">
	    <label>Canceled</label>
	    <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </canceled>
	  <holded translate="label">
	    <label>On Hold</label>
	      <statuses>
	      <pending/>
	      <processing/>
	      <holded/>
	      <complete/>
	      <closed/>
	      <canceled/>
	    </statuses>
	  </holded>
	</states>
</order>

This will enable all default magento statuses on the order page. In edition to enabling statuses you can also create your own custom order status here as well. As far as I know this solution works on Magento 1.1 up to 1.3 but if you have any comments or questions feel free to post them here or read the forum on Magento’s site for more details.

What is Zen Coding?

From a general perspective Zen Coding is simply the practice of making lightweight and reusable code to allow for peaceful coding and debugging (that’s my definition anyways). There has been a movement in the front-end development community towards finding new ways to use CSS with semantic markup in order to produce the desired layouts and styles. Now Sergey Chikuyonok has taken that to a whole new level. He’s reversed the idea of Zen Coding using HTML markup to generate CSS Selectors and allowed us to create our markup from using CSS Selectors. This might seem confusing, so lets look at some code:

Plain and simply put, the Zen Coding plugin (supported on multiple text editors) translates code like this:

div#header>ul.nav>li*5

into this:

<div id="header">
	<ul class="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

.. and yet, this is still nothing folks! Dive in deeper over at Smashing Mag

/* COOKIES OBJECT */
var Cookies = {
        // Initialize by splitting the array of Cookies
	init: function () {
		var allCookies = document.cookie.split('; ');
		for (var i=0;i<allCookies.length;i++) {
			var cookiePair = allCookies[i].split('=');
			this[cookiePair[0]] = cookiePair[1];
		}
	},
        // Create Function: Pass name of cookie, value, and days to expire
	create: function (name,value,days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime()+(days*24*60*60*1000));
			var expires = "; expires="+date.toGMTString();
		}
		else var expires = "";
		document.cookie = name+"="+value+expires+"; path=/";
		this[name] = value;
	},
        // Erase cookie by name
	erase: function (name) {
		this.create(name,'',-1);
		this[name] = undefined;
	}
};
Cookies.init();

Unfortunately, there’s no easy way to simple update a cookie (correct me if I’m wrong) but this will allow you to delete and re-create as needed:

// Erase cookie "test"
Cookies.erase('test');
 
// Recreate cookie "test" with a new value of "cookievalue" and set to expire in 10 days
Cookies.create('test','cookievalue',10)