How to Customize Magento Product Page

I’m back with another tutorial about Magento. I’m not the best man you can find about Magento. But I’m trying to learn something from forums. The best you learn something is when you can explain it to someone else. So this is for that!

As I had mentioned in my previous post Magento is an open source ecommerce application made with PHP and Zend Framework. Company behind it is very dedicated to this project and works a lot about it. But the missing part is the tutorials I guess. There isn’t enough entry in their wiki and if you want to learn something, you have find it out yourself. So let’s begin!

This tutorial will cover basics about how you can find your way in the magento code and get to the right place and how you can change a product’s page design by changing the place of the images from left to right.

I tried this on Magento version 1.1.3 and it worked. Check here for the latest version.

First of all we have to understand which part of the code does show the product’s detail page. You can guess of course. But don’t do it and open the Magento folder. Navigate to /app/code/core/Mage/. Then you will see.

No I mean it, really! Go and look on that folder! So your best bet will be the Catalog folder. So is mine. So I enter the folder and look for things which can suit me. Well As I’m a bit familiar with Magento and I know that they have mostly separated the logic and design. So there must be somewhere where this binding must have been done. So the people who has read the previous post and people who are familiar with Unix systems, they must have noticed the etc/. Yes this is the folder you are looking for. In it, there is the configuration file: config.xml. Not that hard to find I guess. Now the real problem is to find out, what is related with what?

config.xml is a huge file and if you don’t know what you are looking for you are in a bit of troube but don’t be afraid. Let’s cover the details a bit and make an understanding. In my previous post I had entered some information about modules’ configuration files. But it was a small file and let’s say I knew what I had to write. So let’s look under the hood. For people who does not want to see how the engine works, the file you are looking for is /app/design/frontend/default/default/layout/catalog.xml. (Maybe instead of looking to code I should have checked folders better :)

There is a version info, ok. There is an admin part, which does not mean a lot to you nor to me. Maybe it’s something fatal but it doesn’t mean a lot for us (Nothing more than a newbie I’m). So the next part I’m more comfortable, as I understand what it belongs to. Well first of all, we know that this part is global. It will be used for all the parts where this module is being used. And the next part is models. This is about database fields. You can see that, below the models, there is the definition of a resourceModel to a class. This means the class defined in this config, will use that resourceModel. But what is this model? Next part is this. You see that the name of the resourceModel (catalog_resource_eav_mysql4 for me) starts now and a lot things is defined. Classes (let’s say the database’s driver folder) and database tables related to this resourceModel are listed here. It basically says that, this attribute comes from this table. You can be shocked by the count but open your phpmyadmin and you will see that there are 192 tables in it. Ouch! The only important part is that (if you don’t want to change the core aspects of course), if you are stuck which table is what, you can always look to these configuration files and find out which table is related to which module. A bit confusing but better than nothing.

Forget about the database and let’s keep going on the config file. Passing to models we come to the resources part. I guess this is about what connections will be used for querying and other things. You see that in catalog_read, there is a connection value and this is core_read. You may guess that it defines which connection this database drivers will use, comes from here. You are right, probably. But I’m not sure, and it doesn’t look I need this part to change the place of the picture, so I move on.

And now comes the block part. This isn’t new and I’m happy to see something that I know from my previous experience. In CMS pages, this part of the configuration had helped me to get to the layout so this might be the part where the output is given. So I get to the /app/code/core/Mage/Catalog/Block/ there are some parts about products but this is the backend part as I see. There isn’t any meaningful htmls in files which are in that folder. So I had a hope that I had found it, but it seems that this is not the case yet. So I move on.

Now a part that I do not even have slightest idea comes and I pass. The next part is adminhtml. I mean HTML! This can be it! There are some definitions about some things but I do not get it. There is a folder /app/design/adminhtml/default/default/ in the file system. And these bindings refer to the template folder. I assume there are some language additions and some other tweaks about admin pages. But again, I’m not sure.

Finally I have reached the frontend part. I’m now sure that this is the part I’m looking, as there are language definitions, per_page_values and layout! There are some things which still I do not get what are they for, but I see the catalog.xml. And this my best bet! I open the file and I see: Default layout, loads most of the pages! Yes I found it!

Below that part, there are things which are not much useful to me, things like url rewrites and some more configuration values. You can alter the general layout of Magento by changing these options by the way (As this module is about catalogs, the general view of catalogs of course, not the payment part!).

catalog.xml is a file familiar to me. From my previous post I knew there was something about blocks defining somewhere and this is it! There are blocks here and I follow the comments and finds Product View.

<block type=”catalog/product_view” name=”product.info” template=”catalog/product/view.phtml”>

This was the part I was looking for all the time. You see the template part?. It refers to /app/design/frontend/default/default/template/catalog/product/view.phtml. So I go there open the file and yes htmls!!! product-img-box line is very meaningful what I’m looking for and it has a css class. I make a file search between files and I find /skin/frontend/default/default/css/boxes.css. The product-img-box is defined in it and I change the float:left; to float:right;.

I open my web browser, open a product page and see that images are at right and not at left. You may have been more lucky if you just looked with firebug and saw the css and changed to it. But you wouldn’t had gained the insight you would have gained with this.

I hope that this was helpful. I’m not an expert on Magento. This article on Magento wiki helped me to figure out something. My previous post’s references were also valid. Do not forget to keep watching Magento Wiki and Magento Forums for best resources about Magento.

Using Custom PHP Codes on Magento

Magento is one of the newest and awarded ecommerce application right now. And I seem to have a project launched nowadays about it.

Above the ecommerce part like adding/modifying products, it also has a built-in CMS. It looks quite useful. Not very powerful though.  It just evaluates html code and not php. In most of the time this is prefered by the way. Because of security risks and things like that. But there are also cases which you want to do if you are importing something to magento or if you are just wanting to do in a quick and dirty way!

Well, the workarounds you find are not quite good. Simply they just take the CMS code, write it to a temporary file and include it, or writing a bit complicated parser inspired from joomla/mambo. Check out here for the details of the workaround. The tutorial I’m putting here is from there to, however I will also try to write solutions to problems that I have encountered (mostly because of magento versions).

This tutorial is working for magento version 1.1.8. You can download the latest version from here.

Now open up your favorite php/xml/html editor. While it will open up, also open your magento installation folder. Magento has a lots of folders for lots of things, which I do not know why. The code part is in app/ directory as you may guess. In the app folder you will find the etc/ where there are configurations for magento generally. Our PHP Code will be a module to the Magento, so we have to go modules directory and create a new xml file, named according to your module. The syntax is like: Parkyeri_customPHP. The first part till underscore means the name of the module, int this case Parkyeri. The second part indicates the component of the module. So you may have different components in one module, in this case customPHP, If we are talking about custom codded PHP pages, so in this module named Parkyeri, there can be different pages like: About, Contact, Jobs. And these are all different components, doing different things. If we were trying to create the About page then we had to use something like Parkyeri_About. You can add all of them in the same xml file.

Open up /app/etc/modules/ and create a file named Parkyeri.xml (the name of the module) and add these lines to file:




    
        true
        local
        
    

But what this means? You declare a new module named Parkyeri to the global site by naming the file Parkyeri.xml. Then you define in the module config file that, this module has a component named customPHP. You say that this component is active and the system can find it in the app/code/local directory by looking at the codepool

As you get it now we pass to the next stage. Now open up app/code/local/Parkyeri/customPHP/etc/ and create a file named config.xml (the default configuration file name for every module.) and add these lines in it.



    
        
            
                Parkyeri_customPHP_Block
           
       
    

What does it mean? This is more of a mapping file than a configuration file. What you are doing here is to map (you may also think bind) a class named Parkyeri_customPHP_Block to a block called parkyeri_customphp. So whenever a block of type parkyeri_customphp will be called, this block will look out for the class you defined in this configuration/mapping/binding file. But also you are defining the location of the component files that you want to call. In most of the cases, you want to call a component’s block from a module. So when calling you will say that I want a component named customPHP, and a block named test and this component is under the module Parkyeri. We move on…

Now the fun part, open up app/code/local/Parkyeri/customPHP/Block and create a file named Test.php and add these lines in it:


class Parkyeri_customPHP_Block_Test extends Mage_Core_Block_Abstract
{
    protected function _toHtml()
    {
        //put here your custom PHP code with output in $html;
        //use arguments like $this->getMyParam1() , $this->getAnotherParam()
        $html = "Hello" . $this->getWorld();
        return $html;
    }
}

So, we have finally reached the part which you are most comfortable, writing code! You will write down all the code you want to evaluate in this file. The _toHtml() method is called when you call it in the cms part. A magical function just like toString(). As you may remark the name of the class, is conventional according to the location of the class. That was how the previous configuration knew where to look when mapping.

And the final part is to embed it in the CMS, this is easy part. But the part where you get dissapointed most. Add this to page you want to show your custom php code:

{{block type="parkyeri_customphp/test" world="World"}}

So, it’s obvious isn’t it? In this code part, you say that, you want to put a block here. The type of this block is parkyeri_customphp/test. So actually you want a block named test under the customphp component which also a part of parkyeri module.  But you may be curious of the rest, on what I mean by saying, world. I’m sending a parameter to the class. Remember the code where there was $this->getWorld(). This world is that world!. So the code will print out “Hello World” (without an exclamation).
So this was it! Did it worked? No I didn’t did it? The real reason that it did not worked, is because, you did not refresh the caching system!! Yes, it’s that simple! It gave me a lots of headache though, hope it won’t to you. You can disable the caching from System -> Cache Management by the way.  Better then refreshing every time :)
If you are stuck on somewhere you should really check out magento forums. There are really helpful people out there from real developers, ceos and community experts.

Update: I have tested this code sample with 1.1.8 and all works fine.

MySQL Full Text Search instead of LIKE

There are lots of information in the internet which you can find about full text search syntax of MySQL. A good tutorial is of course in the MySQL’s Documentation.The other informations you find are coming from there generally.

But something is missing. How can I make regular expression search using full text search engine! As the rich web interface things and other WEB 2.0 called web sites are increasing the usage of javascript and JSON is also increasing. Most of AJAX requests are now returning JSON datas and they are formatted in the javascript.

Well as the usage of json is increased, I also thing that some people, like me, are started to keep data as json in their databases. Of course that I do not mean that instead of keeping database rows, keep json text files.

Well but as this is the thing, I’m a bit confused how to filter this data. How do you get a row with something like this in it’s json data: “foo”:”bar”.

Many will think that that’s possible like this:

SELECT * FROM foo WHERE bar LIKE ‘%”foo”:”bar”%’;

Of course that this is a solution, and it will return to you the data you want! But what about performance. You may increase this performance! This is not a linear performance increase though. When you will start to deal with then thousands of rows, the search will be slower and slower. At least this was what I was thinkinh.

Well I tried to do my own benchmark tests which you can think that they were pathetic, with my phpmyadmin and mysql 5 on my local server. My test data was a table with 2500+ plus rows and the results returning were 500+. And you know that, the execution times didn’t changed a lot. They were approximately the same. The field which I was looking had a fulltext index of course, maybe this had affected a lot. Maybe someone else will. This maybe because of the pattern I was looking for. As I was looking for json formatted data, instead of json formatting, if I had just searched ‘%bar%’ things would be different.

Any ideas?