Atwix » development

Source, frontend and backend models in Magento system settings

Yaroslav Rogoza — Mon, 25 Feb 2013 08:37:40 +0000

In the previous article we have described how the different settings can be applied to a custom extension. There’s nothing difficult for the simple settings such as text field or text area. But, if you look at the drop down, multiselect or editable items list you’ll notice that these items have additional fields, e.g. source_model, backend_model, frontend_model. Let’s focus on these models and find out more info about creating settings that require data models.

Source Model – a model class that serves to get existing values (stored in the db or somewhere else) for further displaying inside the setting’s field.

Frontend Model – as a rule, it’s a block’s class. Methods of this class return html of setting’s field. To be more specific, the block had to have method _getElementHtml() described inside the class which returns the raw html of setting’s field.

Backend Model – a class which allows to operate with configuration data on the different stages (save, load). It contains three major methods respectively for each event: _afterLoad(), _beforeSave() and _afterSave().

If you are interested in, you can always find the working examples of each of them in the Magento core itself. But firstly, let’s try to look on some custom examples of these models. The following part describes how to create a drop down menu with the custom values:

Init setting’s field in your system.xml:


    Color
    select
    Atwix_Shoppingbar_Model_Adminhtml_System_Config_Source_Color
    2
    1
    1
    1

Then, create the source model that was specified above:

class Atwix_Shoppingbar_Model_Adminhtml_System_Config_Source_Color
{
   public function toOptionArray()
   {
       $themes = array(
           array('value' => 'green', 'label' => 'Green'),
           array('value' => 'blue', 'label' => 'Blue'),
           array('value' => 'beige', 'label' => 'Beige'),
       );

       return $themes;
   }
}

As you can see, there’s only one method toOptionArray(). It returns an array with the items (value -> label) for the drop down menu. Nothing difficult is here Let’s look onto another example to find out how to use frontend and source models. The best point is to review editable items list setting since it has both. The setting described below operates with the text items. It allows to add/remove email addresses:


    Blocked Email Addresses
    atwix_emailblocker/adminhtml_addresses
    adminhtml/system_config_backend_serialized
    2
    1
    0
    0
    1

Frontend model is a block:

class Atwix_Emailblocker_Block_Adminhtml_Addresses extends Mage_Adminhtml_Block_System_Config_Form_Field
{
   protected $_addRowButtonHtml = array();
   protected $_removeRowButtonHtml = array();

   /**
    * Returns html part of the setting
    *
    * @param Varien_Data_Form_Element_Abstract $element
    * @return string
    */
   protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
   {
       $this->setElement($element);

       $html = '';
       $html .= $this->_getRowTemplateHtml();
       $html .= '';

       $html .= '';
       if ($this->_getValue('addresses')) {
           foreach ($this->_getValue('addresses') as $i => $f) {
               if ($i) {
                   $html .= $this->_getRowTemplateHtml($i);
               }
           }
       }
       $html .= '';
       $html .= $this->_getAddRowButtonHtml('emailblocker_addresses_container',
           'emailblocker_addresses_template', $this->__('Add New Email'));

       return $html;
   }

   /**
    * Retrieve html template for setting
    *
    * @param int $rowIndex
    * @return string
    */
   protected function _getRowTemplateHtml($rowIndex = 0)
   {
       $html = '';

       $html .= '';
       $html .= '_getDisabled() . '/> ';

       $html .= $this->_getRemoveRowButtonHtml();
       $html .= '';
       $html .= '';

       return $html;
   }

   protected function _getDisabled()
   {
       return $this->getElement()->getDisabled() ? ' disabled' : '';
   }

   protected function _getValue($key)
   {
       return $this->getElement()->getData('value/' . $key);
   }

   protected function _getSelected($key, $value)
   {
       return $this->getElement()->getData('value/' . $key) == $value ? 'selected="selected"' : '';
   }

   protected function _getAddRowButtonHtml($container, $template, $title='Add')
   {
       if (!isset($this->_addRowButtonHtml[$container])) {
           $this->_addRowButtonHtml[$container] = $this->getLayout()->createBlock('adminhtml/widget_button')
               ->setType('button')
               ->setClass('add ' . $this->_getDisabled())
               ->setLabel($this->__($title))
               ->setOnClick("Element.insert($('" . $container . "'), {bottom: $('" . $template . "').innerHTML})")
               ->setDisabled($this->_getDisabled())
               ->toHtml();
       }
       return $this->_addRowButtonHtml[$container];
   }

   protected function _getRemoveRowButtonHtml($selector = 'li', $title = 'Delete')
   {
       if (!$this->_removeRowButtonHtml) {
           $this->_removeRowButtonHtml = $this->getLayout()->createBlock('adminhtml/widget_button')
               ->setType('button')
               ->setClass('delete v-middle ' . $this->_getDisabled())
               ->setLabel($this->__($title))
               ->setOnClick("Element.remove($(this).up('" . $selector . "'))")
               ->setDisabled($this->_getDisabled())
               ->toHtml();
       }
       return $this->_removeRowButtonHtml;
   }
}

It’s pretty huge. We have described the full version to show what’s going on there. You can simple extend your block from Mage_GoogleCheckout_Block_Adminhtml_Shipping_Merchant and override the necessary methods.

Backend model, in this case, it’s a standard Magento model:

class Mage_Adminhtml_Model_System_Config_Backend_Serialized extends Mage_Core_Model_Config_Data
{
    protected function _afterLoad()
    {
        if (!is_array($this->getValue())) {
            $value = $this->getValue();
            $this->setValue(empty($value) ? false : unserialize($value));
        }
    }

    protected function _beforeSave()
    {
        if (is_array($this->getValue())) {
            $this->setValue(serialize($this->getValue()));
        }
    }
}

As you can see, it simply unserializes/serializes field’s values before load/save respectively. That’s all. You are always able to improvise with the models described below to get the best result. If you want non-trivial form element – use your own fronted model. To get available values for settings you should use the source model. And if you need to save/load data in your format or make some other actions on these events – feel free to use the backend model.
Good luck and graceful solutions

Magento system settings overview

Yaroslav Rogoza — Fri, 08 Feb 2013 08:26:59 +0000

From time to time Magento developers face with a need to add settings for their extensions. As it’s hard to remember all necessary details for each setting, so we would like to share our snippets which contain xml code of the most recent settings used in Magento admin.

First of all, we would recommend you always place everything, that refers to Magento system settings, in the system.xml file, since it’s the main and the only role of this file.
If you need to create your own tab in the admin system settings, you should simply add the following lines to the file:


    
        
            Atwix Extensions
            150

As a result, you’ll get the new group (tab) in the admin settings. When you need to complete the procedure of adding settings you should add the following items: section, settings groups and the settings (fields) themselves:


    
        
            separator-top
            Shopping Bar
            atwix
            130
            1
            1
            1
            
                
                    Quick search
                    text
                    20
                    1
                    0
                    1
                    
                        
                            Enable Quick Search
                            
                            select
                            adminhtml/system_config_source_yesno
                            1
                            1
                            0
                            1
                        
                        
                            Results count
                            
                            text
                            5
                            1
                            0
                            1

Here is an illustration what means each of these terms:

Next question is how will the different settings in the xml config look like. As you already know, each setting is placed in the node, then follows the unique setting’s id and finally – setting’s attributes. Here is a small review of the most useful settings:

Text field

Simple input field for short text values:

 
    Text Field
    text
    10
    1
    1
    1

Textarea

Wide input field for long text values:

    <label>Textarea</label>
    <frontend_type>textarea</frontend_type>
    <sort_order>20</sort_order>
    <show_in_default>1</show_in_default>
    <show_in_website>1</show_in_website>
    <show_in_store>1</show_in_store>

Drop down with Yes/No values

Drop down menu with the values “Yes” and “No”. Commonly it is used as a flag for enabling/disabling something:


    Enabled
    select
    adminhtml/system_config_source_yesno
    1
    1
    1
    1

Drop down with Enable/Disable values

Almost the same as previous one, but instead of “Yes” and “No” you will get “Enable” and “Disable”:


    Enable/Disable
    select
    40
    adminhtml/system_config_source_enabledisable
    1
    1
    1

Drop down with custom values

Drop down with the custom set of values, generated by source model:


    Select
    select
    
    adminhtml/system_config_source_country
    50
    1
    1
    1

Multiselect with custom values

Field with the ability to select few items at the same time:


    Multiselect
    multiselect
    
    adminhtml/system_config_source_country
    60
    1
    1
    1
    1

File

Allows to choose a file for uploading. In this example the file will be saved in var/uploads directory:


    File
    file
    adminhtml/system_config_backend_file
    var/uploads
    70
    1
    0
    0

Time

Is used to create three drop down menus for setting up the hours, minutes and seconds respectively:

Editable items list

Allows to add/remove text values for the setting:


    Blocked Email Addresses
    atwix_emailblocker/adminhtml_addresses
    adminhtml/system_config_backend_serialized
    90
    1
    1
    1
    1

Heading

Is used to entitle some settings inside the group:


    Heading
    adminhtml/system_config_form_field_heading
    90
    1
    1
    1

Dependent field

It can be any field. The main purpose of this one – it’s to hide/show the field depending on the state of some other field. In the following example the field depends on the field’s enablemethod state. If enablemethod value is 1 – dependent_field will appear and vice versa:


    Dependent Field
    textarea
    100
    1
    1
    1
    
        1

There is also one interesting cheat. You are able to use javascript inside of the node:


    Displayed Error Message
    textarea
    
    
            Event.observe('carriers_flatrate_active', 'change', function() {
                alert('Be careful with this one');
            })
        
    ]]>
    
    2013
    1
    1
    1

It might be useful for changing field’s value depending on different credentials. We would not recommend you to use it very often there, especially for the big javascript code.

Moreover, as you might have noticed, there are some attributes like source_model for the custom drop downs or, all the more so, frontend model for editable list which may disappoint a bit. We are going to describe how to operate with these models in our next article, which will see the light in the nearest future. Thank you for reading us

Creating CSV files in Magento

Yaroslav Rogoza — Tue, 15 Jan 2013 09:00:26 +0000

There are many tools in Magento which allow you to view or generate and download different reports. So, we can conclude that Magento system has integrated tools for CSV and XML files generation. It might help in the situation when you need to generate a report for some feed or just export a list of structured data. We would like to demonstrate the small example that adds an ability to generate and download CSV files.
Let’s assume that you have already created your custom extension and wish to add a CSV export functionality. If it’s not the case and you can’t guess how to create an extension, then you can always find the light in our previous articles, for example this one. We called our extension Atwix_Tweaks so in the code examples below we will use this title.

As we said before, the file is being downloaded within some URL. Well, then we need to create the controller and corresponded method-action. In config.xml file add the section which will tell the system where our controller is located:

   
        
            
                standard
                
                    Atwix_Tweaks
                    mln

On the next step, we should create the controller itself (app/code/local/Atwix/Tweaks/controllers/IndexController.php):

class Atwix_Tweaks_IndexController extends Mage_Core_Controller_Front_Action
{
    /**
     * Returns generated CSV file
     */
    public function mlnProductsListAction()
    {
        $filename = 'mln.csv';
        $content = Mage::helper('atwix_tweaks/mln')->generateMlnList();

        $this->_prepareDownloadResponse($filename, $content);
    }
}

As you can see, the controller calls method generateMlnList() from helper ‘atwix_tweaks/mln’. What are we going to do next? Right, create the helper (app/code/local/Atwix/Tweaks/Helper/Mln.php):

class Atwix_Tweaks_Helper_Mln extends Mage_Core_Helper_Abstract
{
    /**
     * Contains current collection
     * @var string
     */
    protected $_list = null;

    public function __construct()
    {
        $collection = Mage::getModel('catalog/product')->getCollection()
            ->addAttributeToSelect('*')
            ->addAttributeToFilter(array('attribute' => 'wight', 'gt' => 2));

        $this->setList($collection);
    }

    /**
     * Sets current collection
     * @param $query
     */
    public function setList($collection)
    {
        $this->_list = $collection;
    }

    /**
     * Returns indexes of the fetched array as headers for CSV
     * @param array $products
     * @return array
     */
    protected function _getCsvHeaders($products)
    {
        $product = current($products);
        $headers = array_keys($product->getData());

        return $headers;
    }

    /**
     * Generates CSV file with product's list according to the collection in the $this->_list
     * @return array
     */
    public function generateMlnList()
    {
        if (!is_null($this->_list)) {
            $items = $this->_list->getItems();
            if (count($items) > 0) {

                $io = new Varien_Io_File();
                $path = Mage::getBaseDir('var') . DS . 'export' . DS;
                $name = md5(microtime());
                $file = $path . DS . $name . '.csv';
                $io->setAllowCreateFolders(true);
                $io->open(array('path' => $path));
                $io->streamOpen($file, 'w+');
                $io->streamLock(true);

                $io->streamWriteCsv($this->_getCsvHeaders($items));
                foreach ($items as $product) {
                    $io->streamWriteCsv($product->getData());
                }

                return array(
                    'type'  => 'filename',
                    'value' => $file,
                    'rm'    => true // can delete file after use
                );
            }
        }
    }
}

The helper uses Varien_Io_File class, integrated in Magento, to generate a custom CSV file. Generated file will be stored in the media folder and deleted before the controller sends header to the client side. If you don’t want to delete file, you can set parameter rm to false in the return statement. In the constructor (method __construct) you can use any collection you want (customers, orders, custom collections etc.). Also, you are able to pass the collection behind the constructor using method setList().
I hope this small example will help you in your further development. If you have some suggestions or questions you can always place them here ⇩

Filter products by attribute on a Magento CMS page

Yaroslav Rogoza — Fri, 21 Dec 2012 08:30:58 +0000

Ability to create pages with custom content is a great feature provided by Magento. You can easily create a new page for your store and add text, html, images, different widgets there. But sometimes people want to have something non-trivial on their pages. Usually it means that you need to operate some knowledge before you’ll get an appropriate result. In this article we would like to suggest you a simple solution on how to place a products list, prefiltered by some specific attribute, on your CMS page. The example below describes how to create a simple extension for this purpose.

Let’s call the extension Atwix_Cmsattr. First, you need to add the init file for you extension. The path is app/etc/modules/Atwix_Cmsattr.xml . The file’s content is:

The extension contains one block class and one model, therefore the config file, which you should have by the following path: app/code/local/Atwix/Cmsattr/etc/config.xml, is pretty simple and consists of a few records:


    
        
            0.1.0
        
    
    
        
            
                Atwix_Cmsattr_Block
            
        
        
            
                Atwix_Cmsattr_Model

After that, create the block class app/code/local/Atwix/Cmsattr/Block/List.php:

getColor();
        if (!$color)
            return false;
        if (is_null($this->_itemCollection)) {
            $this->_itemCollection = Mage::getModel('atwix_cmsattr/products')->getItemsCollection($color);
        }

        return $this->_itemCollection;
    }
}

and the model class app/code/local/Atwix/Cmsattr/Model/Products.php:

getCollection()
            ->addAttributeToSelect('*')
            ->addAttributeToFilter('color', array('eq' => $valueId));
        Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);
        return $collection;
    }
}

The next file is the most personal thing. You need the template file with your own mockup corresponding to your design. Here is an example for a simple list (app/design/frontend/base/default/template/atwix/cmsattr/list.phtml):

getItems() ?>

    
        __('Red Products') ?>
    
    
        
        
            
                
                    helper('catalog/image')->init($_item, 'thumbnail')->resize(50) ?>" width="50" height="50" alt="htmlEscape($_item->getName()) ?>" />
                    
                        htmlEscape($_item->getName()) ?>
                        getPriceHtml($_item, true) ?>
                        helper('wishlist')->isAllow()) : ?>
                        __('Add to Wishlist') ?>

The last thing you need to do is to create a CMS page and insert the products list where you want to show it on the page. So, go to Admin->CMS->Pages->Add New Page. Fill the page with the necessary content and connect our products block anywhere in the content by putting the following string:

{{block type="atwix_cmsattr/list" name="cmsattr" template="atwix/cmsattr/list.phtml" color="26"}}

Note, that you need to pass the attribute value for color here. The product list on this page is filtered by this value. If you going to filter product by text attribute, such as “name” for example, you can pass the text value directly like name=”Apple”. But current example describes how to filter by attribute with type select. There are many ways to get value id from attribute’s value text. One of the simple (non programmatically) ways to do this is to inspect attributes values form using your browser. The example below describes how to do it within Google Chrome:

Also you can extend your model’s logic with the new method, which would transform attribute value text into it’s id, but this small article doesn’t describe how to do it
In the next articles we are going to tell how to use layered navigation (filters) for products on CMS pages.
Feel free to ask the questions and good luck in your coding experiments.

Grid filter for columns with complex values

Yaroslav Rogoza — Mon, 10 Dec 2012 09:51:44 +0000

In previous articles we told you how to operate with columns in adminhtml grids. Usually the process is quite fast, for example, if you want to add simple column from the database. But sometimes you need to add column with complex value, processed by renderer. You say: “it’s not a big deal to use renderers…” Right, until you face with sort and filter..

By default Magento applies grid filter directly to the corresponding column. But renderer might contain data from separate columns. At this point we need to choose right way to make filter and sort work correctly.
For example, we are going to add a new column “Address” to the orders grid which consists of the values from few columns: city, street, postcode.
First of all, we should join address table to the collection:

$collection->joinLeft(
                array('sales_flat_order_address'),
                'sales_flat_order.billing_address_id = sales_flat_order_address.entity_id',
                array('postcode', 'street', 'city');

The second step is to add address column to the grid:

addColumn('address', array(
          'header'=> Mage::helper('sales')->__('Address'),
          'type'  => 'text',
));

Here we should connect column with the data. Let’s add ‘renderer‘ param:

addColumn('address', array(
          'header'=> Mage::helper('sales')->__('Address'),
          'type'  => 'text',
          'index' => 'city'
	  'renderer' => 'Atwix_Ordersgrid_Block_Adminhtml_Sales_Order_Renderer_Address'
));

Third, create the renderer:

class Atwix_Ordersgrid_Block_Adminhtml_Sales_Order_Renderer_Address
    extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
    public function render(Varien_Object $row)
    {
        $value = $row->getData('city') . ',' .
            $row->getData('street') . ',' .
            $row->getData('postcode');

        return $value;
    }
}

After these steps we are able to see the new column in the orders grid. But when you try to use filter on this column – you will get the result, filtered by ‘city’ db column, since we have added city as an index. To solve the problem we need to do one more thing: create callback method for the filter. The final view of addColumn calling is going to be like the following one:

$this->addColumn('address', array(
            'header'=> Mage::helper('sales')->__('Address'),
            'type'  => 'text',
		    'renderer' => 'Atwix_Ordersgrid_Block_Adminhtml_Sales_Order_Renderer_Address',
            'filter_condition_callback' => array($this, '_addressFilter'),
));

Note, that we have removed index field – we don’t need it anymore. And then, we create callback method which is described below:

protected function _addressFilter($collection, $column)
    {
        if (!$value = $column->getFilter()->getValue()) {
            return $this;
        }

        $this->getCollection()->getSelect()->where(
            "sales_flat_order_address.city like ?
            OR sales_flat_order_address.street like ?
            OR sales_flat_order_address.postcode like ?"
        , "%$value%");


        return $this;
    }

As you can see, we are using simple db query condition to filter query results by the columns. This way you can create your own filters for columns with complex values or custom renderers.
Feel free to ask any questions and suggest your own improvements.

Advices and Best Practices for Magento developers | Part 2

Yaroslav Rogoza — Mon, 26 Nov 2012 10:37:12 +0000

We continue to share our experience with Magento developers by publishing the next set of Best Practices in Magento coding. If you missed our previous article, here it is.

Local or community code pool.

Pretty often we face with the discussion about choosing a proper code pool. So, let’s talk about the difference. Local pool has the highest load priority and code in this pool can’t be overridden as easy as in community or core pools. But depending on the Magento ideology, local pool was primarily designed for local changes. If you own a website and make modifications for that website, then your modifications are classified as local and your changes should be made in the app/code/local folder. Also, when you do some custom work on the website – local code pool is for you. However, if the extension is used by many other customers, this extension is not local but shared with a (limited) community. Therefore, the extension belongs to the community pool.
Provided that you are an extension developer, you shouldn’t prevent overriding your files by other developers for the purpose of making some small changes. That can always be done by using the local pool.

Where to store the JS files in Magento?

Usually developers choose one of the following paths to store JS files (we are talking about frontend):

js

skin/frontend/package/theme/js

Actually, you should think twice at this point. As we’ve told above, one of the major Magento ideas is modularity. Therefore, as a good developer you should allow third party developers to make small changes/customizations without a need to edit your code wherever it’s possible. If your JS files are located in the skins folder, other developers are always able to change something by copying JS files into their own theme’s folder. But if you use the root JS directory, they won’t be able to do that.

Controllers and common logic.

One of the common Magento problems is tons of logic in the controllers where it shouldn’t be. For exemple, let’s explore the core file app/code/core/Mage/Customer/controllers/AccountController.php. Look at the createPostAction() method and you will see a lot of operations there. Why not to use a helper to store this logic or some abstract class? It allows other developers to extend the logic for their own purposes easily. For example, if you need to add a new customer programmatically and you want to use a standard set of methods for this, you won’t be able to do it, because most of the logic is located in the controller. Hence, we think it would be a good practice to use more extendable structures for common logic instead of hardcoding it in the controllers.

Dispatched events.

There’s yet another way to improve the quality of your extensions using dispatched events. Dispatcher is a Magento integrated system, which allows you to set some “point” with the unique name and some necessary parameters where you can integrate our logic “on the fly”. In other words, you can create your own events in your logic. Then, you or other developers are able to catch these events and connect some handlers to the events. It’s always useful to have dispatched events in the extensions, because it provides you an ability to extend your code more effectively in the future and allows other developers to interact with your logic in intelligent way. Events are usually dispatched in models and controllers. It is good to know, that it is enough to use the following construction in your code to dispatch an event:

Mage::dispatchEvent('the_unique_name', array('var' => $data));

As the second argument, you should pass the data, that you want to send to the observer’s method (some id or some object instance for example).

DB queries profiler:

Magento provides an ability for developers to track database queries. For this purpose you should use a built in DB resource profiler. It can help you to inspect database queries, detect the longest query, detect the slowest query, etc.. Here is a small example on how to use a DB profiler for your own needs :

$profiler = Mage::getSingleton('core/resource')->getConnection('core_write')->getProfiler();
foreach ($profiler->getQueryProfiles() as $query) {
    $queryTime[] = $query->getElapsedSecs(); // Get the query execution time
    $queryRaw[] = $query->getQuery(); // Get the query text
}

We would be glad to read your suggestions in the comments, so feel free to post them

Adding a column to the customers grid in Magento admin. Alternative way

Yaroslav Rogoza — Wed, 07 Nov 2012 09:27:24 +0000

Pretty often we face a task, where we need to add a custom column to the customers/orders grid in Magento admin. The solution is simple and if you google for it, you will get tons of solutions. However, pretty much all of them describe the same way, which isn’t always proper.
Nick described the simple and trivial way of adding columns in his article Adding a custom attribute/column to the orders grid in Magento admin and you are always able to follow it, except the cases, when some other extension already overrides the _prepareColumns() method. At that point, we need some universal solution that won’t conflict with other extensions that may potentially be overwriting the grid block. So, let’s use an observer for our task.
First of all, you need to add your own extension for registering the observer. Create config files and other necessary stuff:

Config to load the extension (app/etc/modules/Atwix_CustomGrid.xml):

The extension config file (app/code/local/Atwix/CustomGrid/etc/config.xml):



    
        
            0.4.0
        
    
    
        
            
                Atwix_CustomGrid_Model
            
        
    
    
        
            
                
                    
                        model
                        Atwix_CustomGrid_Model_Observer
                        appendCustomColumn

The observer itself (app/code/local/Atwix/CustomGrid/Model/Observer.php):

class Atwix_CustomGrid_Model_Observer extends Varien_Event_Observer
{
    /**
     * Adds column to admin customers grid
     *
     * @param Varien_Event_Observer $observer
     * @return Atwix_CustomGrid_Model_Observer
     */
    public function appendCustomColumn(Varien_Event_Observer $observer)
    {
        $block = $observer->getBlock();
        if (!isset($block)) {
            return $this;
        }

        if ($block->getType() == 'adminhtml/customer_grid') {
            /* @var $block Mage_Adminhtml_Block_Customer_Grid */
            $block->addColumnAfter('middlename', array(
                'header'    => 'Middle Name',
                'type'      => 'text',
                'index'     => 'middlename',
            ), 'email');
        }
    }
}

As you can see, the observer retrieves the customer grid block and executes its method addColumnAfter for adding a new column. The column type is “text” and the index is “middlename”. “Middlename” – it’s standard customer’s attribute in Magento, but you are able to add any custom attribute using this way.
The advantage of this method: your code won’t conflict with other third party solutions that also add custom columns. You can use the observer for adding a column to almost any grid in Magento admin. All you need is to change the following condition:

$block->getType() == 'adminhtml/customer_grid')

depending on your grid block. For example, order’s grid block is adminhtml/sales_order_grid.
Good luck and do not hesitate to ask your questions in comments below

Proper way of adding tabs to the Magento Product Page

Yaroslav Rogoza — Tue, 16 Oct 2012 11:36:44 +0000

The product page is one of the most important parts of your store. That’s why so much attention is paid to make this page look perfect.
Tabs is a good way to display a lot of data inside a compact block. It helps to avoid huge scroll bars and also looks much nicer on portable devices. You can find tons of Magento templates with tabs on the product view page and we are going to tell you the easiest way to add them there. All examples are applicable to the default Magento theme, but with practice you can use following methods to customize your own theme. First, go to your store theme folder and find there the following file app/design/frontend/default/yourtheme/layout/catalog.xml. If the file does not exist, you can always copy it from app/design/frontend/base/default/layout/. Note that your own theme can be located within a different path. In the file catalog.xml, find the section:




    
       Bottom Block Options Wrapper
            product.tierprices
            
            product.info.addtocart
            product.info.addto

After this section, insert the block below:


    
        description
        Description
        catalog/product_view_description
        
    
    
        additional
        Additional Information
        catalog/product_view_attributes

As you can see the tabs are being added within the built in method ‘addTab‘. In the node, you can select your own block and phtml file which you expect to see inside the tab.
In our example, we have added two tabs ‘Description’ and ‘Additional Information’. Magento installation contains both phtml files so if you can’t find them in your own theme you can copy it from app/design/frontend/base/default/template/catalog/product/view/. First tab will contain the description of the product and second tab will be a list of additional product’s attributes. As we’ve already said you can add your own blocks as the tabs. Don’t forget to clean Magento cache after this operation.

Second, you need to copy the following file app/design/frontend/default/modern/template/catalog/product/view/tabs.phtml into app/design/frontend/default/yourtheme/template/catalog/product/view/ . This file contains mockup for the tabs section.
Third, you should add styles for the tabs. Go to your general css file (usually skin/frontend/default/yourtheme/css/styles.css) and add the lines below:

/* Product Tabs */
.product-tabs { margin-bottom:15px; border-bottom:1px solid #666; background:#f2f2f2 url(../images/bkg_tabs.gif) 0 100% repeat-x; height: 25px;}
.product-tabs li { float:left; border-right:1px solid #a4a4a4; border-left:1px solid #fff; font-size:1.1em; line-height:1em; }
.product-tabs li.first { border-left:0; }
.product-tabs li.last { border-right:0; }
.product-tabs a { display:block; padding:6px 15px; color:#444; }
.product-tabs a:hover { background-color:#ddd; text-decoration:none; color:#444; }
.product-tabs li.active a,
.product-tabs li.active a:hover { background-color:#666; font-weight:bold; color:#fff; }
.product-tabs-content h2 { display:none; font-size:12px; font-weight:bold; }

Finally we have got to the last step. Go to the file app/design/frontend/base/default/template/catalog/product/view.phtml (if there’s no such file you should already know where to get it) and insert the following line somewhere you would like to see the tabs section:

getChildHtml('info_tabs') ?>

That’s all. To be sure that everything going well try to clean up the cache after every step. Good luck and feel free to ask any of your questions.

Using Mage Run tool to speed up development

Alexander Turiak — Tue, 02 Oct 2012 07:37:13 +0000

When starting Magento development, first thing you find out that in order to see the changes you have to clear the cache. There is also an option to disable the cache completely, but performance wise – it’s not a very smart move. As your experience on the system grows you are getting to know which exact cache to clear to see the changes, be it config, layout, FPC cache or any other. Nevertheless, these operations are pretty cumbersome as admin session times out from time to time. You may also know that enabling template hints is not a quick operation either.

Let me introduce a great tool which will simplify your life as a Magento developer and make it enjoyable: Mage Run, which is being developed by Christian Münch. Installation of the tool is fairly easy. This tool has loads of useful commands and when you get used to it you will not believe you’ve been doing all the actions from your Magento backend. There is a list of all available commands (which can be also displayed from tool itself by using command n98-magerun.phar list), but here we want to describe a few favourite combos from our own work flow.

First one is useful when creating install and upgrade scripts. As you know, Magento checks if setup scripts need to be ran by checking module’s version which is in turn cached in the config cache. To test my newly created script we increase version of the module then issue n98-magerun.phar cache:clean config followed by n98-magerun.phar system:run-setup-scripts. If there are some errors or exceptions they will be displayed in the console, otherwise you will see “done.” and feel proud of yourself.

Next time-saving command is n98-magerun.phar dev:module:create which allows you in a matter of seconds to create module skeleton and register it in the system. That could take you good five minutes creating folders and configs manually.

We also quite liked n98-magerun.phar install command, which allows quick installation of required Magento version together with appropriate sample data.

Several useful commands were added just recently, they are dev:module:rewrite:list and dev:module:rewrite:conflicts. Modules rewrite conflicts – it was pretty hot topic on last MageConf and now there is a simple way to diagnose your system for the rewrite issues.

And here are a few toggler commands for the desert: n98-magerun.phar dev:template-hints and n98-magerun.phar dev:profiler

We’re now quite confident you have already downloaded the tool by this sentence or way earlier. Please, post your use-cases or questions in the comments below. Thanks to Christian for sharing this awesome tool and here is hoping that by using it your Magento team is getting more productive and happy!

Afterword: to unlock new features and badges in the tool issue n98-magerun.phar self-update

Login as a customer from Magento admin

Yaroslav Rogoza — Wed, 26 Sep 2012 06:10:16 +0000

Often there are situations where customer has some issues while placing orders or making operations from the “My Account” section. At that point, an ability for admin to login as a customer and see what is wrong becomes very useful.
Sure, you can make a universal password logic, but that method has heavy security risks. Not so long ago, we’ve noticed that Magento has ability to load and use customer’s sessions different way. We will tell you how to create a simple extension for logging in as a customer from Magento admin.

Step 1

For example, let’s call our module Atwix_Ulogin. As always we must start by creating a module descriptor in app/etc/modules folder. So put the Atwix_Ulogin.xml file into this directory. The file will be with the following content:



    
        
            true
            community

Step 2

On the next step, we need to create a configuration file for our extension:



    
        
            0.4.0
        
    
    
        
            
                
                    Atwix_Ulogin_Block_Adminhtml_Customer_Grid
                
            
        
        
            
                Atwix_Ulogin_Helper
            
        
    
    
        
            
                standard
                
                    Atwix_Ulogin
                    ulogin

Save this file as app/etc/community/Atwix/Ulogin/etc/config.xml.
As you can see, we override customers grid block for admin panel to add new column. Then we tell system to use our custom router ‘ulogin’ as an entry point for the user login.

Step 3

Now we need to create a controller. This controller will check allowed IP’s for autologin, register customer session and redirect to customer account. File should be placed into app/code/community/Atwix/Ulogin/controllers. The filename is LoginController.php.
The content is:

_getSession();
        if (!$this->_isAllowed()) {
            $message = $this->__('You have no pemission to use this option');
            $session->addError($message);
            $this->_redirect('customer/account/login');
        }
        else {
            $id = (int) trim($this->getRequest()->getParam('customerid'));
            try{
                if($id){
                    $customer = Mage::getModel('customer/customer')->load($id);
                    $session->setCustomerAsLoggedIn($customer);
                    $message = $this->__('You are now logged in as %s', $customer->getName());
                    $session->addNotice($message);
                    Mage::log($message);
                }else{
                    throw new Exception ($this->__('The login attempt was unsuccessful. Some parameter is missing'));
                }
            }catch (Exception $e){
                $session->addError($e->getMessage());
            }
            $this->_redirect('customer/account');
        }
    }

    /**
     * Gets customer session
     * @return Mage_Core_Model_Abstract
     */
    protected function _getSession()
    {
        return Mage::getSingleton('customer/session');
    }

    /**
     * Checks if ip is allowed for autologin
     * @return mixed
     */
    protected function _isAllowed()
    {
        $allowedIps = Mage::helper('ulogin')->getAllowedIps();
        return Mage::helper('ulogin')->checkAllowedIp($allowedIps);
    }
}

Also we need to create a helper file with useful methods

 0) {
            $remoteIp = Mage::helper('core/http')->getRemoteAddr();
            if (in_array($remoteIp, $allowedList))
                return true;
        }
        return false;
    }
}

$ipsText variable contains comma separated list of IP addresses with allowed access to universal login ability.

Step 4

The last, but important step is to create an override for customers grid block in admin panel. Create file Grid.php at the location /app/code/community/Atwix/Ulogin/Block/Adminhtml/Customer with the following content:

class Atwix_Ulogin_Block_Adminhtml_Customer_Grid extends Mage_Adminhtml_Block_Customer_Grid
{
    protected function _prepareColumns()
    {
        parent::_prepareColumns();

        $column = $this->getColumn('action');
        $actions = $column->getActions();
        $actions[] = array(
            'caption' => 'Log in',
            'popup' => true,
            'url' => array(
             'base' => 'ulogin/login/autologin'),
            'field' => 'customerid'
        );
        $column->setActions( $actions );

        return $this;
    }
}

This method tells Magento to add one more item to Actions column “Login”.
That’s all. You can try to go to Admin->Customers->Manage Customers. There will be a new action ‘Login’ in Actions column. Choose this action brings a new popup window where you will be logged in as a customer.
Do not forget to clean up Magento cache.