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 theCatalog 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 theetc/. 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 phpmyadminand 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 thecatalog.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 firebugand 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.
No comments:
Post a Comment