In the previous parts, we went through with the basic of Magento theme and how to build core of a Magento theme.
We also took a practical look at how theming in Magento works by going through how the layout is constructed, how the blocks work and how all the different pieces of the puzzle fit in together.
What are We going to build Today?
Today, we’ll go in more detail by learning how to build the individual product view page. Just like the previous parts of the series, the source files, both the front end and back end are included. You can use it to see how the page looks but outside of that, the theme should look broken since, you know, we haven’t touched the rest of the views yet. So till we build the rest, try to not venture out of our sandbox.
Goals for the Page
Our goal for this specific page is relatively simple. We want a no-nonsense page that does only the essentials. Therefore, I’ve listed a short list of elements that I think they are essential:
The product’s title: Fairly obvious
Ability to show an image of the product
A quick and full overview
Availability and price of the product and finally
An add to cart button to place it in the cart
That’s it. I want to keep it as simple as possible and thus opted to not over do it. Once you’ve learnt the general principles, feel free to add as many whizbang features as possible.
The Basic Look of a Magento theme
The page basically looks like this:
Step 1 - The HTML
We’ll first look at the HTML for the content part alone. I’m assuming you’re fairly fluent in HTML and CSS so I’ll skip to the fairly important parts.
First up, notice that I’ve wrapped the product image with a div to make it easier to add features in the future. Suppose you want to add a quick caption to the displayed image in the future, this way will let us add this a lot more quicker.
We have another div element holding the availability and pricing information along with the add to cart button. We’ll be sprucing it up with a little CSS3 in a bit.
The rest of the HTML is very straightforward. The title resides in a h1 section while the individual section headings take up h2. The quick overview is nested in a paragraph while the full overview takes up a div.
We can move on to the styling part now.
Step 2 - The CSS
Nothing fancy here. Very basic CSS to place the elements in position.
I’ve also used a bit of CSS3 to make the buttons a little better looking.
Step 3 - Creating our catalog.xml File
As I mentioned in the earlier part, each module gets its own XML file to dictate what items to include and the general layout of the page. The page we’re building today relies on a file called catalog.xml to define its contents and structure.
This file should be present in the layout folder so let’s create an XML file and name itcatalog.
The complete file for today looks like so. I’ll explain each bit part by part below.
Disregard the initial XML and layout version declarations. They’re of no significance to us now.
First, we let the system know that we’re intending to modify the product view part of the system. This is because catalog.xml houses the layout for a number of other views and so it’s imperative that we specify which view we intend to modify.
Now, we tell Magento to load up the 1column.phtml file as the main master template for this view. This is because each individual view can use any predefined structure. For example, your home page could use a very complex custom structure, your product page a dual column and your search page a single column layout.
If nothing is specified, it’ll load up the default template mentioned in page.xml. Since we’re using it for everything else, this part is redundant but when you’re modifying this template for your personal use, editing the file’s name is a lot easier than adding chunks of XML to the layout file.
And now we come across one of the niftier parts of Magento. Yes, we can throw all our view specific CSS into one giant CSS file but we aren’t cavemen, are we? Cries of multiple HTTP requests aside, this method lets us streamline our CSS better.
First we acquire a reference to the head section of the file and then insert our page specific content into it. Here, I’m inserting a file called product.css which contains all the page specific CSS we looked at above.
Note that you aren’t limited to CSS. Including JS and other assets is possible too.
We now ask Magento to use a specific template for the content portion of the page
This block defines all the individual blocks inside the main content block. Essentially, we use individual templates for displaying the product’s image, overview and description, availability/price and finally the add to cart functionality.
And with this, our base catalog.xml file is complete.
Step 4 - Creating our Main Template
Ok, now that we’ve specified our layout we can move on to creating thecatalog/product/view.phtml file that we specified as the main template for the content section in the XML earlier.
This file is slightly different from the skeleton template we created in the last part because we’ll be adding some small things directly instead of going through the template path to avoid bloat along with a smidgen of API calls to help us.
If you take a quick look, you’ll notice that we’re making a number of getChildHtml calls to acquire that blocks content. These work just like as expected and the contents of these contents will be covered a little later below.
At the moment, we don’t need to know what this means. In layman’s terms though, we’re essentially asking Magento for this specific product’s store information so we can process it and then display it on the page.
Here we use one of Magento’s API methods to dynamically generate the URL the form needs to post to.
We use another of Magento’s methods to acquire the product’s title directly.
And again, since the quick overview is going to be just a sentence or two, I’m opting to import it directly instead of using a template. We use the same function we used to acquire the title.
Step 5 - Creating the Templates for our Blocks
With all the main parts done, we can concentrate on the individual blocks now. Now that we’ve already dealt with this when constructing the main template, this should be a lot easier now.
We’ll tackle each in order of appearance in our code:
Product image
getChildHtml(‘media’) maps directly to catalog/product/view/media.phtml. Our file looks like so:
Some simple PHP code. We use the helper methods to acquire the product’s image and then render it on screen.
Availability/Price
getChildHtml(‘product_type_data’) maps directly tocatalog/product/view/type/simple.phtml. Our file looks like so:
We first check whether the item is available or not and then output the required HTML. Acquiring the price of the product is a simple method call away!
Add to cart
getChildHtml(‘addtocart’) maps directly to catalog/product/view/addtocart.phtml. Our file looks like so:
As is logical, we check whether an item is up for sale before we output the required HTML. It’s a simple button as is apparent.
Product Description
getChildHtml(‘description’) maps directly to catalog/product/view/description.phtml. Our file looks like so:
Similar to how we included the quick overview, we use Magento’s inbuilt methods to acquire the necessary information. We do check for the description’s existence before we render it.
In case you’re curious, I typically tend to include the description separately via templates mostly because in production templates you’ll almost always be post procession the description in some way. In those scenarios, it’s easier to split this logic off onto its own template. A quick overview, on the other hand, are usually quite small and thus are included directly.
What We’ll be Building in the Next Part
.. is completely up to you. There are quite a number of views you could design but it’s rather presumptuous of me to pick one. Thus I’m asking you, the reader, to suggest a view to cover in the next part through a comment in the comments section below. Don’t forget to tell me which one to cover next!
The Last Word
And we are done! Today, we created the first view of our custom Magento theme, the product view along with looking a how Magento lets us add page specific assets and content. Hopefully this has been useful to you and you found it interesting. Since this is a rather new topic for a lot of readers I’ll be closely watching the comments section so chime in there if you’re having any doubts.
Have any questions regarding the article? Feel free to leave me a comment. Happy coding!
The series:
Magento theme development tutorial for designer (Part 1)
Magento theme development tutorial for designer (Part 2)
Magento theme development tutorial for designer (Part 3)
Special thanks to tutsplus.com for the great series
The post Magento theme development tutorial for designer part 3 – Building Magento individual product view page appeared first on Tutorial Magento.