How to add a color picker in the Magento admin or anywhere

How to add a color picker in the Magento admin or anywhere

By | Magento, Web Development | 8 Comments

Greetings, developers of all colors!

First of all this tutorial assumes that you already know how to make a Magento extension. Now there are many ways to add a color picker in the Magento admin (or anywhere). Here’s one “correct” and “extendable” way to do it:

First, we would need a color picker. This color picker should not use any JavaScript framework so it fits in easily with Prototype, which is used in Magento. If you don’t already know this: Magento has switched to jQuery from version 2 onwards. So it would be nice to have a color picker that would work basically anywhere.

If you’ve spent about 10 seconds trying to look for a color picker, you’ve probably stumbled upon JsColor. I’ve read a few posts that show you how to integrate it into your Magento admin, but as always, I’ve not found anything that is thorough enough. So here’s my effort to simplify it for you. Here is a bare-bones extension to help you understand how this works:

Step 1: Download this file and extract it to /app/code/local
Step 2: Download this file and extract it to /app/etc/modules
Step 3: Download this file and extract is to /app/design/adminhtml/default/default/layout
Step 4: Download this file and extract it to /js

And you’re done! (Don’t forget to clear all caches, log out and log in etc.) . Navigate to System -> Configuration -> Your Module and choose your color!


First, we add the JSColor file in the admin head using this file: /app/design/adminhtml/default/default/layout/yourmodule.xml

Next, let’s explore the file: /app/code/local/Yourcompany/Yourmodule/Block/Adminhtml/System/Config/Color.php

The magic happens in this line:

$color->addClass( 'color ' . $element->getClass() );

JSColor requires that the input field have a class “color” for it to work. So we add it here in this line, along with any other classes that might be required on the field. The other classes might also include classes entered in the “validate” section of your field.

In the file /app/code/local/Yourcompany/Yourmodule/etc/system.xml

<my_color translate="label">
<label>My Color</label>

The “required-entry” class is added to the field after the “color” class since it is added inside “validate”.

But wait …

I can’t see the JSColor’s image when I select the color! If you can, ignore the following.

Magento has a “Merge JavaScript” option under System -> Advanced -> Developer . When this option is enabled, JSColor would break, and not show the color picker image because it can’t find the JSColor directory where the image is located. Which is why we’ve modified the JSColor file at /js/yourcompany/jscolor/jscolor.js

dir : BLANK_URL.replace( 'blank.html', 'yourcompany/jscolor/' )

Magento has a JavaScript variable called “BLANK_URL” both in the admin and front end. It points to /js/blank.html . We can use this to find out the path to the JS folder. So what we’ve done is removed “blank.html” and replaced it with “yourcompany/jscolor/” so the string would now be /js/yourmodule/jscolor/ which can now be used by JSColor to load the image.

Happy coloring!

Magento direct SQL queries with named binding

Magento direct SQL queries with named binding

By | Magento, Web Development | 2 Comments

If you’ve been coding in Magento long enough, you would have come across a situation where you need to query the database directly. For whatever reason, no judgements.

Well, here is my contribution to save you a lot of time. And this is as secure as using models to interact with your database. If you think otherwise, I’d love to hear your thoughts in the comments section.

Direct safe SQL queries in Magento using named binding for security:

Step 1: Initialize a resource to interact with the database:

$read = Mage::getSingleton( 'core/resource' )->getConnection( 'core_read' ); // To read from the database
$write = Mage::getSingleton( 'core/resource' )->getConnection( 'core_write' ); // To write to the database


Step 2: Choose which tables you want to connect with. Using this method also takes care of the problem of prefixed tables on some stores. It’s the safest way to go about this.

$productTable = Mage::getSingleton( 'core/resource' )->getTableName( 'catalog_product_entity' );


Step 3: Prepare your query

$query = "SELECT product_id FROM " . $productTable . " WHERE created_at BETWEEN :fromdate AND :todate";
$binds = array(
	'fromdate' => $unsafePostedValue1,
	'todate' => $unsafePostedValue2


Step 4: Execute your query!

$result = $read->query( $query, $binds );
while ( $row = $result->fetch() ) {
	echo 'Product ID: ' . $row['product_id'] . '<br>';


Our read resource takes our query and looks for something like :this . It then looks for a bind array which it then maps the value of this to :this . What’s more is that it automatically quotes and prepares all the security measures before executing the query. So you don’t need to quote the query at all! In fact, it will give you an error if you quote the query!


Inserting into the database:

Here’s how you insert into the database:

$query = "INSERT INTO " . $productTable . " SET product_id = :product_id";
$binds = array(
	'product_id' => $unsafePostedId
$write->query( $query, $binds );


Happy coding! 🙂

How to make a custom Magento payment extension for an external gateway

How to make a custom Magento payment extension for an external gateway

By | Magento, Web Development | 259 Comments

Note: This tutorial is for Magento versions 1.x.x, and does not work on Magento 2 +.

Magento is a great open source e-commerce platform and has emerged as the market leader in the recent past. However, it still has a steep learning curve and although the community is growing exponentially, I was not able to find a simple tutorial on how to make a Magento payment extension which links up to an external payment gateway.

In this tutorial, I’m going to attempt to show you how to make a bare-minimum extension, which you’ll need to complete because different payment gateways have different APIs, hooks and functionality. This is by no means a definitive guide, but my attempt to try and get you started. Please note this tutorial assumes that you already know how to build a simple custom extension and have average knowledge of Magento, MVC architecture and of course, PHP. This tutorial is for Magento versions 1.4 and above.

I have created a bare-minimum version of the extension which you need to download from the steps that follow. I hope the code will be self-explanatory. For information from Magento’s wiki click here.

Step #1: Click here to download the ZIP archive for this step. Extract it to app/code/local

Step #2: Click here to download the ZIP archive for this step. Extract it to app/design/frontend/base/default/template

Step #3: Click here to download the ZIP archive for this step. Extract it to app/etc/modules

Once you have done this, you need to follow the following steps to get it working:

  1. Open app/code/local/Myname/Mygateway/controllers/PaymentController.php and read through the inline comments carefully. The URL that the payment gateway needs to redirect to on your web site after processing the customer’s payment (based on the naming we’ve used in this example) should be: . This URL will trigger the responseAction() function in the PaymentController, where we will need to validate the response sent by the gateway (to make sure it’s really from there), and if validated, process the order. The validation code is generally provided by the payment gateway.
  2. Open app/design/frontend/base/default/template/mygateway/redirect.phtml . This is where we post our values to our external gateway. We can retrieve any order information and pass it on as hidden form fields, which is submitted via JavaScript.
  3. Log into your Magento admin, clear your cache, and make sure the extension is enabled and working fine by navigating to System -> Configuration -> Sales -> Payment Methods and checking if you can see it there.

It is extremely important to go through all the files to get a perfect understanding of the extension. I figured the best way to learn this is to look at a working example. This took me a long time to figure out and I hope this saves a lot of effort for someone. Happy coding!