Grid based layout on Magento product view page.

Recently I got requirement to display product options in grid based layout on product view page for Magento. See the the image above. So the user can select particular combination from the available option. So I have started R & D on it and come up with solution that I will do it through JavaScript. Because here products were configurable products. So when product view page gets loaded, you have a JSON object with all the product options. It has all the things you want like product options,price of particular option, how many products available in options. Options may be dependent on each other like if size depends on color. This dependency is also mentioned in JSON object.

So I have used that JSON object to build this grid based layout. What you have to do is when your JSON object gets loaded, you can write JavaScript code to insert controls at runtime. In case of configurable products you have to write this code inside /product/view/type/options/configurable.phtml file. While in case of normal product where you have custom options , this code will be in options.phtml.

This is just the grid based layout on top of drop downs on product view page.Product option drop downs are hidden. When you select particular option from grid layout, the corresponding options in drop downs gets selected. So when user add product to basket product with particular options gets added in to basket.

I can not mention complete code over here.But this is the technique to design any required layout on product view page. If you need further help in this you can contact me.

Cloud Computing

I think everybody must have heard the word "CLOUD COMPUTING" now a days. So this blog is about little bit introduction about cloud computing and cloud computing platforms.

Wikipedia gives following definition of cloud computing.

"Cloud computing is internet-based computing, whereby shared resources, software, and information are provided to computers and other devices on demand, like the electricity grid."

That's a really good definition. Now a days cloud computing is the Buzz. Everybody is talking about it. Legends like Microsoft has invested heavily in cloud computing. So many companies are entering in to cloud computing business. CIOs/CTOs of any company want to bring Cloud Computing to their business. They are exploring options available for cloud computing platform. After cloud computing two new words are introduced.

SaaS: Software as a Service

PaaS: Platform as a Service

So what is this all about? Lets explore it in details. First of all lets talk about Cloud Computing. Why its been introduced? What was wrong with earlier approach? If you consider scenario before cloud computing , you have one server available. You use it for almost all your computing need. But the problem was CPU idle time. When server is busy with some request. It can not pay attention to other request. Also CPU is also in idle mode. What if we can utilize CPU idle time for other computing needs. But how we can do it? Then something called Virtualization is introduced. Yes this is the technology upon which cloud computing is built. My physical CPU is only one while I have more than one Virtual CPUs on top of it. Which can use my physical CPU. Virtual CPUs use almost all the real CPU cycle. Real CPU will never be in ideal mode.

So I have some hardware + software combinations which boost up my server performance. This is what is Virtualization. This is what is cloud computing. There are some large data centers in which bunch of servers are there. In those servers virtulazation is used so that each server can act as more than one server. This is the Magic of cloud computing.

Now lets talk about Cloud computing platforms available in market. There are various platforms available in market for cloud computing, but I will discuss about only two platform that I know.

As a former Microsoft .Net developer (although I am still passionate about .Net), first platform comes in my mind is Microsoft Windows Azure

Microsoft Windows Azure:

Microsoft definition for Windows Azure: "

The Windows Azure platform is a flexible cloud–computing platform that lets you focus on solving business problems and addressing customer needs."

Microsoft has invested heavily in data centers for Azure. Windows Azure is the platform using which one can develop cloud based application. If you want to develop .Net based application on local machine, you need certain things like .Net Framework,Sql Server, Windows server etc. This all provided by Windows Azure Platform in slightly different manner through App fabric, Sql Azure.

So in short It’s a platform for running Windows applications and storing their data in the cloud.

Its designed in a way that developer can develop cloud based application using various .Net supported languages like C#,VB.Net.

I will not go in more details as lots of stuff are available for windows azure on internet. Let's discuss the second cloud computing platform.

Salesforce:

Its a leading cloud platform now a days. Using it you can build your on demand internet application five time faster than any other app building platform. Its built on multi tenant architecture. It provides a very good interface to build business objects, and apps. Its service is composed of two main parts

1) appExchange Directory: market place to share your app

2) Force.com platform: This is the platform upon which applications are developed.

The language which is used to build the app is Apex Code. Force.com platform provides various features that makes easy to develop,maintain, publish and customize any app. Force.com platform have various features like multi tenancy that make its unique.

So this is the little bit introduction about cloud computing and cloud computing platforms. I will publish detailed blogs in future.

Magento:change product image from gallery image

This is some what different blog. While working on a Magento project I faced a little problem. I have uploaded products with image gallery and set product image,small image and thumbnail to last image of gallery images.

Now client told that I want first image to be displayed as main image. It was around 10,000+ products. So it was not possible to manually change all the products. So after wasting around two to three hours I got a solution.

If you carefully observe Magento database , it stores all the product related information in catalog_product_entity_varchar table. There you will fine rows with product images data. So what you have to do is you have to extract first image name from product images and update it to rest of the fields. Following is the query to get first image name from product gallery images.

SELECT entity_id,SUBSTRING( value, LOCATE( "/", value, 3 ) +1, IF( LOCATE( ";", SUBSTRING( value, LOCATE( "/", value, 3 ) +1 ) , 2 ) -1 <0, CHAR_LENGTH( value ) -15, LOCATE( ";", SUBSTRING( value, LOCATE( "/", value, 3 ) +1 ) , 2 ) -1 ) ) FROM catalog_product_entity_varchar WHERE `attribute_id` =83 and `entity_id` in (select entity_id from catalog_product_entity)

While using this query for your project you have to change this query because in my case following is the typical data of image gallery.

/productimages/67808_101_Y_3_8CT_A.jpg;/productimages/67808_101_Y_3_8CT_B.jpg;

/productimages/67808_101_Y_3_8CT_D.jpg;/productimages/67808_101_Y_3_8CT_E.jpg;

/productimages/67808_101_Y_3_8CT_Z.jpg;/productimages/67808_102P_W_3_8CT_A.jpg

So in query 15 is the character count of /productimages if you have some other path then use proper character count.

Also you don't need that If condition in query if your image gallery contain more than one image. In my case there were image galleries with only one image so I have to use that if condition.

Now lets move further. Using above query you will get first image name but still you have to update it. I found two ways to do it. First is using cursor and stored procedure to run this query and second is to use PHP script to write update query.

Hope this post helps you if you face same problem like me.

(Although it certainly worked for me, please take a backup of your table before trying this :) )