Magento How to : add prototype based image rollover

We will today work on a nice and easy fetaure of temlpate design : adding javascript and static images, with the objective of implementing a simple prototype based image rollover. We chose the simple unobstrusive rollover script by Herryanto Satiano.

  • download the zip and place the rollover.js file in your js/prototype folder (or in you js skin folder)
  • edit app/design/../layout/page.xml and add the following line in the header block :
    <action method="addJs"><script>prototype/rollover.js</script></action>
    Note that you can also add your javascript in your own magento skin via the following block action :
    <action method="addItem"><type>skin_js</type><name>js/prototype/rollover.js</name></action>
  • add the rollover instanciation in you rpage/head.phtml file :
  • test on tow imagse with _over suffix.

WordPress Plugin Review : SEO all in one

The popular All-in-on SEO pack plugin for wordperss does more than just adding the essential meta fields to your articles and pages interfaces. For lazy writers, SEO pack will also create meta tags AUTOMATICALLY the content for these essential code addons that will boost your search engine positionning. A simple tag based configuration will allow you to set up categories, tag and archive pages optimisation via the TITLE tag, most important of all because it is the first thing visitors see when they look at search engines result pages.

Sugar CRM has gone extjs

webmail490

Combining best of both worlds : One of the most popular opensource CRM (Customer Relationship Management) software is now using extjs javscript library a lot for user interface quickies.

Developers will love documentation around various implementation of this AJAX library : Since Sugar 5.1, the search is layout out via type-ahead combo box system called QuickSearch based around ExtJS. In version 5.2, a lot of tools  feature powerful interaction javascripts, such as the email reader / composer (imazge above), or the application studio, located in  The Developer tools sub-panel that displays options to build new modules and customize existing ones. The Module Builder enables you to build custom modules and Studio enables you to customize existing modules. Creating  relationships between modules is also an option while removing default modules is as easy as performing drag and drop operations within the admin.

jQuery Parallax

diagram_parallax

Another example of useless feature that could become very useful when a critical mass of web geeks start using ti for specific image display : the jquery parallax plugin order images or elements to respond to mouse effects with a 3D effect. Stunning effect for the display of 3d Landscapes, such as displayed on the plugin homepage, or letter 3D movement, as illustrated in this example. The stephband.info author's website demonstrates a powerful implmeentation of this plugin.

Theming Magento eShop frontend : a beginner’s guide

In a previous article, We've briefly explained the four concepts behind Magento's rendering system. The last 3  entities are  perfectly understandable for web developers :

  • template (in app/design/frontend) stores HTML code for a series of twenty page types and page components, such as  catalog, navigation, shopping cart, checkout, cms.
  • Skin (in skin/frontend) stores the css stylesheets,
  • Locale stores language specific strings, in CSV format

Instanciating your own template out of Magento's default install is a child game. Our introduction article covered the automatic installation of packaged themes from Magento Connect : to perform the same task manually, you'll just have to perform a simple cut & paste operation of two basic folders :

  • template : copy / duplicate app/design/default/frontend  to app/design/frontend/YOURTHEME
  • skin : copy /duplicate skins/frontend/default to skins/frontend/YOURTHEME
    Notice at this stage that two skins are copied : you'll have to specify the skin you want in the backend System / configuration /design form, as shown below

The first entity, though, is a bit harder to understand. It is called Layou and  is coded out of raw XML format, and explained on Magento's Designer Guide.

Kaltura releases All-in-One Video Module for Drupal / WordPress

Kaltura, the platform that brought open source to video and enabled groups to edit and collaborate with online video, has released a video module for the open source Drupal CMS. Kaltura's platform includes an easily customizable set of widgets that seamlessly integrate into video applications on web platforms of any kind. Publishers can deploy existing widgets and apps or take advantage of Kaltura's open architecture in order to develop new ones. Whether you need a basic online video platform or one with a robust set of advanced features – Kaltura has a solution for you. Our open framework provides everything you need to design, develop, and deploy rapid and cost-effective video applications on any site.
Read more

Generic Data save with Zend Framework

This technical article hilights one the famous ideal goal we all want to achieve : scaffolding, CRUD, BREAD, call it what you want, all we want is to get rid of repetitive sql query writing.  Zend framework provides powerful data abstraction  and here are a few tips to use Zend_DB_Table to its best. Of course this article assumes you have an idea of MVC development with Zend Framework.

Why are we doing this ? in the course of writing ajax actions, we needed our controller to react to any POST provided by specific forms : whatever the fields in the form, we want them to be saved to our table. Code below is a specific implementation of a controller that responds to specific ajax queries. Please bear in mind that it is only provided as an example of generic query action. Other portions of code are not optimal, such as viewless actions in the renderAjax method, not the best.

[update 20090428] Alternative :  Smart save on Zend_Db_Table objects from zfsnippets

Controller Implementation

Our controller is a simple Zend_Controller_Action. We load the database model at init time, and specify the primary key  (node parameter) in a class variable. Note that our data model is also stored in a class variable.

Quick look at the model

at this stage I specify on particular function I like to implement in Zend Framework Models : the primary key ! Other functions of the model could include add, delete and update : we'll see below that our generic data admin prefers to do the job in the controller.

Back to the crontroller : the renderAjax method is a quick one that stops the view from being rendered. If you are a specialist of Zend Framework you will notice that this can be better performed with the contextSwitch action helper. Use the code below only for testing, for production you'd rather spend a few minutes learning about helpers !

Action !

Listing records is the first thing you want to look for when working at data scaffolding. the code below reads metadata from the table, lists all columns from your table, fetches data and returns them as JSON (ready for extjs grid display, by the way).

The next step would be to add records : we have not worked on this yet so you'll want to try this with tables that have a few records in them. The method below works with two types of data sets.

  1. Multiple column form submit :this would be the classical response to a from submission, where each field bears the NAME of the database field, and obvisouly the value is the data. Such forms are transmitted via FORM array with key / value pairs. We read the POST (getRequest->getParam) that match metadata built from the database table column array. We then provide a clean arrData array of new data for the update() method of our Zend_Db_Table instanciation. This method takes two arguments: the first is the associative array mapping columns to change to new values to assign to these columns. The second is the where clause that we built from the primary key
  2. Single column submit : the technique is useful when working with extjs in place editing, where one piece of code can edit multiple fields. The field variable contains the database column name and the value is the data. We add a check that matches the field against database table column names

A good start for extjs development : Hope this is useful for you !!

Ajax webmail on your server

For maniacs who have not yet switched their mail operations to the ever growing gmail storage offer, a few opensource web based email players will provide efficient ajax webmail operations. Choosing between IMAP and POP3 shouldn't be a problem but bear in mind the basic difference between them : IMAP stores emails on the mail server while POP3 needs the client to perform this. As a result you will find it harder to implement POP3 storage from the client perspective, and this is why it took a long time for companies such as AfterLOgic to release their client. WebMail Lite is a very efficient web client that comes opensource with multiple templates and complete source code. In its time we reviewed RoundCube, that only works with IMAP. Same for new player biuCentrax Mail Center, image above, that demosntrates extjs library integration. Of course, for non ajax playing you can count on the old but reliable Horde framework IMP client.