The random eclecticisms of loonytoons

Introduction to Magento

Current magento version – 1.3.2.4

Magento Logo

This is a very brief introduction to Magento, a powerful php based open-source e-commerce platform.

I am currently working on my first ever Magento project, and given the flexibilty and complexity of Magento and it’s code base, it seems a good idea to write a series of Magento hints and tips so that the next time that I come to use it I’ll be able to spend less time searching out the solutions to little niggly problems or requirements.

As an e-commerce solution, Magento is extremely powerful and flexible and may well be the answer for many peoples e-commerce needs. However because of this power and flexibility the code base is extremely large and the processing can be a little on the slow side, so if all your looking for is a really small and basic shop then this might prove to be overkill.

Overall though, now that I’ve almost got my head round the basics, I really like Magento as a tool and it can be fairly straightforward to work with if you know what you’re doing. If you’re not sure what you’re doing or you’re trying something a bit new then it can prove to be very frustrating and mentally draining, as the documentation isn’t always great and the forums can prove frustrating. But if you keep at it and in turn share what you’ve learned yourself then you’ll find yourself with a site that does exactly what you want, while at the same time improving the amount of information out there and possibly giving a lifeline to other magento users. If you learn something, share it! It might help someone who could provide you with invaluable help later on!

First Steps (note I’m running this on windows):

Magento Demo Store

Magento Demo Store

If you want to you can download the sample data from the Magento site. This might be useful as you can then use it when you install Magento itself and it will set up a populated demo store with products and categories etc, rather than just the straight blank demo store you’d otherwise get. This can help you understand how to set up an actual store and provides examples of things you can do.

To install Magento, download the latest community edition installer and un-zip the folder into the document root of your site. If you don’t want the site to be installed into a magento folder (it is by default) then move all the files in the magento folder out into your document root and delete the magento folder. This will stop /magento/ showing up in your url from the start. If you don’t set it up like this to start with but then decide you want to change later on then it is possible but can be really tricky and is almost asking for something to go wrong. (I did this, and I will post later how I did it but to be honest I really wouldn’t recommend it).

If you then visit your new site url (go into the magento folder if you’ve not removed it), then you’ll be taken through the installation process by the magento installer, which is pretty straightforward to follow so I won’t go through that here.

You’ll then end up with the basic magento demo store.

Creating your own theme

Update: this is based on version 1.3.2.4. The new 1.4 version uses a very different structure which I shall hopefully post about soon.

Most likely you’ll want to create your own Magento theme so that you can style up your store in the way that you want. To do this it’s best to copy the default theme folders and create your own, so that you’ll have the original there if you want and to prevent your theme potentially being messed with should you upgrade Magento.

Update:  you should be able to just copy over only the files that you need to modify. For other files magento should try to find them in the default folders. If this doesn’t work though then you’ll probably need to copy over all the files.

So copy:

app/design/frontend/default/default  ->  app/design/frontend/default/my_theme

skin/frontend/default/default  ->  skin/frontend/default/my_theme

I’ve called my new theme my_theme (I’m original like that).

Now log into your magento admin area (doc root/admin) and go to system->configuration->design->themes. In the default box, type in the name of your new theme and press ‘Save Config’.

Introduction to Magento files

Magento Folder Structure

Magento Folder Structure

Now that you’ve set up your custom theme, you need to know how to change the layouts and styles. The first thing that I recommend you do is in the admin area, go to system->cache management, and untick all the boxes. This should turn off Magento’s inbuilt caching. However if you are having a problem and not seeing a change you were expecting, it is always advisable to enter the cache management, select refresh and save, just to make sure that caching isn’t an issue.

All your css files, local javascript files and images can be found in skin/frontend/default/my_theme. The main css file is boxes.css, though you will probably also use menu.css and reset.css.

The other main folders that you will be using are app/design/frontend/default/my_theme/template and app/design/frontend/default/my_theme/layout. The template folder holds all the phtml template files which control the layout of the various pages and blocks with the pages. The layout folder holds all the xml files that control the layout/content of the page and determine which blocks should go where on which page. It will probably take a little while for this file setup to start to make sense, and the best way to learn is just to get stuck in and start trying to customise your own site.

As a quick intro though, app/design/frontend/default/my_theme/layout/page.xml controls the basic content of every page, and the app/design/frontend/default/my_theme/template/page folder holds the phtml files for different page templates (1 column, 2 columns with a right sidebar, 3 columns etc). Having a look at these should give you a good idea of how Magento works.

If you want to see how a page on your site is constructed, go into system->configuration->developer->debug (select your store view from the configuration dropdown, top left). Enable ‘template path hints’ and ‘add block names to hints’ and save. Refresh your page and you should now see the different page block outlined in red, with red boxes telling you which xml block it is and which template file is being used. This can be very useful when you’re trying to work out which file you need to change, but it does mess with the page styling so I find that I’m constantly turning it on and off.

So that’s it

That was my very basic introduction to Magento, which may or may not have been all that helpful but if it’s helped point one person in the right direction then my job is done. I’ll be posting more about Magento soon, about specific problems that I’ve had and solutions that I’ve found which I hope will also be useful, so watch this space.

Good luck with your own Magento projects!

Edit: it is also possible to download blank themes from magento connect that you can then use to create your own theme. This means that you won’t have all the images/css from the defualt theme hanging around and getting in the way.

Share

19 thoughts on “Introduction to Magento

  1. Susie says:

    I’ve only ever worked with Zen Cart, but am looking around for future alternatives, so I will definitely check out Magento. Thanks for the great introduction!

    Hopefully with more people like you using it and contributing with questions and ideas, the community will grow and benefit too.

  2. Jan says:

    Magento could come in useful for me! Hehe. Thanks!!

    Psst. I’ve booked my air tickets back, will be in the UK from 27th Nov – 27th Dec. You still up for doing a little city break somewhere? x

  3. loonytoons says:

    @Susie – Thankyou! Magento is a good tool and is definitely worth looking into, though of course it’s not without it’s faults. A high dependancy on a number of different javascript libraries for one (which doesn’t include my favourite, jquery), but like most things it’s just about using the right software for the job.

    @Jan – Thanks! I’ll message you about the trip 🙂

  4. Jess says:

    Thank you so much for this! I’m just starting to learn Magento and I’m a little overwhelmed. That tip about turning on template paths will probably save me countless hours!

  5. cocotu says:

    thanks loonytoons, this is a great intro. for some reason i have been searching online and posting in magento forums:
    “how to modify the default theme?” and no answers. after reading this i’m under the impression that it cannot be done and the way to go is the one you wrote here. i will give it a try today! thanks…

  6. loonytoons says:

    Hi @cocotu, it is possible to modify the default theme but I really wouldn’t recommend it. If you did an upgrade of magento then your customised theme would get written over by the updated default theme.

    Best thing would be to set up your own custom theme. It’s worth noting though that it’s not really necessary to copy over all the default theme files. You only need to copy the ones that you need to modify. Any file that magento then needs that it can’t find in your custom theme it’ll look in the default folder for it.

  7. cocotu says:

    hey loonytoons, thanks for your fast reply. i just followed your instructions,but when i copied over the default theme:

    app/design/frontend/default/default -> app/design/frontend/default/my_theme
    skin/frontend/default/default -> skin/frontend/default/my_theme

    when i check the contents of ‘my_theme’ at skin/frontend/default/my_theme – i don’t see the files you specify above: main css,boxes.css,menu.css and reset.css.

    when i check the contents of ‘my_theme’ at app/design/frontend/default/my_theme – i don’t see the /template and /layout folders.

    the default theme only contains the folders /etc and /locate under here: app/design/frontend/defaul
    the default theme only contains: /css favicon.ico /images under here: skin/frontend/default
    the /css folder contents = print.css styles-ie.css styles.css

    maybe i’m doing something wrong? thanks for your help i’m using Magento ver. 1.4.0.1 what version are you writing about here?

  8. loonytoons says:

    I wrote this based on 1.3.2.4 and the new 1.4 version does use a different structure for it’s theme folders.
    It’s quite a change so I’m going to need to look into this a bit more and then post anything that I find out. As usual with magento stuff the documentation for this is virtually non existant so there could be a bit of trial and error involved.
    In the mean time try reading through this discussion on the forum. It’s still pretty confusing but it’s the only vaguely helpful thing I’ve found so far.

    I’ll let you know as soon as I’ve found anything out though

  9. loonytoons says:

    @cocotu I haven’t got everything quite worked out yet to put it into a blog post, but I recommend that you do the following:

    create a new folder under skin/frontend. This will be your package folder.
    Under that create another folder which will be your theme folder. In here you want to put any files from skin/frontend/base or skin/frontend/default that you need to change, such as a new css/styles.css page

    Also under app/design/frontend create new package and them folders as above (with the same name) and place any template or xml layout files that you want to change in here (following the directory structure of the original folders).

    You should only need to copy over files that you want to change.
    As you are creating a new package though, you’ll need to set the name of your new package in the backend (under system->configuration->design), rather than the theme, in order for magento to pick it up.

    Hope that helps, I’ll try and expand on this in a proper post soon but things are manic at the moment.

  10. cocotu says:

    thanks loonytoons, it is quite confusing. i am going to try your last suggestion now. under my magento install i see other themes: iphone, blank and modern. all i want to do is to be able to copy the default to my theme. now, this is my directory structure:

    app/design/frontend/default/my_theme – contains:
    etc/ layout/ locale/ template/
    skin/frontend/default/chatwin/ – contains:
    css/ favicon.ico images/ js/

    i copied the missing directories in my_theme from the /base directory: /etc, layout/ and template as well as the /js directory.
    as you said, there is not enough documentation on 1.4 so i’m experimenting here. hope this can help anybody else. let me know what you think. thanks again..

  11. loonytoons says:

    From what I can gather in magento 1.4 it is better to set up you’re own package into which you put your theme folders. This keeps all your custom work seperate from the default which has a number of preset basic themes in it.

    With the way that the fallback works, it would be best to setup your standard theme under your_package/default, and then if you have any variations on this (such as christmas theme) which would only require slight changes such as different christmas related images then these would go under your_package/theme_var1.
    That way if the system can’t find a file in your_package/theme_var1 it’ll then look in your_package/default (must be called default) before then trying base/default.

    So instead of:
    app/design/frontend/default/my_theme
    skin/frontend/default/my_theme

    I would use:
    app/design/frontend/my_package/default
    skin/frontend/my_package/default

    the default theme in magento’s default package only has some css changes, which is why the layout and template folders weren’t in the app/design/frontend/ folder. It uses the fallback to get all of that from base. So you only need to put any files in these if you are amending them from the base or default package.

  12. cocotu says:

    i see. i can try that. so to be clear you’re saying to leave the contents of the /base directory intact? don’t copy anything from /base to my theme directory? etc/ layout/ locale/ template/ and css/ favicon.ico images/ js/?

    i will try that suggestion and see what happens. i not sure if it has anything to do with themes, but i’m trying to make changes to ‘my_theme’ which i copied following your steps above. now i’m trying to add the ‘featured/best seling products’ to the main page following these instructions: http://www.magentocommerce.com/wiki/how_to/add_featured_products_to_home_page
    when i go to the CMS>Pages>Content to make the necessary changes using the editor and when i click on ‘Save’ the changes never commit. for example i’m trying to add: ‘{{block type=”catalog/product_list” category_id=”8″ template=”catalog/product/list.phtml”}}’. i click on save at the editor and then that line disappears for some reason. thanks for your help!

  13. cocotu says:

    the adding featured products works now my friend! But, have not made the changes you suggested at your last post yet. thanks!

  14. loonytoons says:

    Don’t change anything in /base as if you update magento then the update may well overwrite your changes.

    You only need to copy files from base or default if you want to make changes to those files. That way magento will look in your custom folders for the changes but look back to base for everything else.
    The fewer files that you have in your custom package/theme the less code you have to maintain.

    If you’re literally trying to duplicate the default theme to experiment with then you will need to copy over the files from default/default so that magento can find these extensions/modifications to the base files. Otherwise magento will find nothing in your custom folders and just pull everything from base, so you’ll end up with the standard magento structure and functionality but with no styling applied at all (as this is taken from the css file in default/default).

    Hope that that makes sense! Good luck!

  15. cocotu says:

    i will follow your suggestion and give a you a result so other people can follow this. thanks.

  16. cocotu says:

    that part works fine now! thanks a lot! now (as usual) there’s another issue with magento. I’m trying to install an extension by using magento connect manager since my host(bluehost) does NOT allow me to do it using pear at SSH. They said:

    “And that path (/usr/local/) is only accessible through Apache (your website via port 80). The /usr/local/ folder is not accessible through SSH. Go ahead and try running this command:
    cd /usr/local/
    [~]# cd /usr/local
    -bash: cd: /usr/local: No such file or directory
    You won’t be able to access that. And so, when you run a command inside SSH that needs access to /usr/local/…, it will fail. I’m sorry. However, at this time, there is no workaround for that.”

    I get the following error in my backend when i navigate to System>Magento Connect Manager or Package Extensions:

    Fatal error: main() [function.require]: Failed opening required ‘/home1/chatwinc/public_html/store/includes/downloader/pearlib/php/PEAR.php’ (include_path=’/home1/chatwinc/public_html/store/includes/downloader/pearlib/php:/home1/chatwinc/public_html/store/includes/src:.:/usr/lib/php:/usr/local/lib/php’) in /home1/chatwinc/public_html/store/includes/src/Varien/Pear.php on line 265

    do you know how can i solve this? thanks…

  17. loonytoons says:

    @cocotu There is always something else with Magento isn’t there 🙂 It’s great when it all works but can be a real pain to debug!

    Anyway, I’ve posted a possible solution in reply to your magento forum post here. I didn’t come up with it though, I found it on another forum post but hopefully it’ll work!

  18. cocotu says:

    hey loonytoons!
    i saw you at the magento forums! i got to solve the issue, but as i pointed out at the forum:

    “After solving the above issue and installing the extension now when i go to System>Configuration I get:

    Fatal error: Class \’Inchoo_FeaturedProducts_Helper_Data\’ not found in /home1/chatwinc/public_html/store/app/Mage.php on line 523

    any suggestions?”

    has this happen to you? i wish there was more documentation for magento. i’m willing to make a small kb after i’m done with solving all issues. thanks

  19. loonytoons says:

    Hi Cocotu,
    sorry for the delayed reply.

    I haven’t had that particular error but then it looks like it involved the Inchoo Featured Products extension. It might be worth uninstalling/reinstalling this to see if that helps.

    Otherwise it’ll involve a little digging around to find out why the helper/data.php for this extension is not where magento expects it to be.

    Have you changed the root folder of your magento folder since you installed it? As that can cause problems with the paths to installed extensions.

    Hope you get everything sorted!

Leave a Reply

Your email address will not be published. Required fields are marked *