Merc Studio Tech Blog: Magento inline popup for product

Took me several days and many hours of researching,
Finally, ive made it up to the stage where i can declare glory to my objective :)
Magento uses many combination of configuration to customize to your setting.

Okay, i needed to do a popup to view product without showing a full layout product viewing page.

I didn't wanted to alter the core functionality, as i wanted both:

Exists magento product viewing page with full page layout
A "quick view" button to show just the non-layout based popup

It would be much easier if i could just override the magento product view template by just copying existing template file into my template directory, and modify it as i needed. But this will override the entire product page, so we will no longer have access to the original full layout page.
Just for your reference, here is how its done:
--------------------
copy from:
app/design/frontend/base/default/template/catalog/product/view.phtml
to:
app/design/frontend/default/default/template/catalog/product/view.phtml

other optional files which you may override, but will need to have respective directories name, similar to the base template location:
app/design/frontend/base/default/template/catalog/product/view/*

---------------------

Now, i need to customize the base layout file for all my pages, the product listing, and product viewing page.
I need both, the base layout file to use 1column.phtml, listing page to use only category.phtml layout. And the full view product page to use product.phtml layout.
---------------------
create a file:
app/design/frontend/default/default/layout/local.xml
The content of the file can be edited as show in photo below.
Please take note on the tags: catalog_category_default (listing), catalog_product_view (view), checkout_onepage_index (checkout), default (default / base layout file)

Then upload the respective files to:
app/design/frontend/default/default/layout/template/page/category.phtml
~/product.phtml
~/1column.phtml
You may copy the layout files from app/design/frontend/base/default/template/page/1column.phtml to start out with.
----------------------

Next, i wanted to remove some of the items which i dont use.
So, edit the file app/design/frontend/default/default/layout/local.xml
And add in remove tags under default tag:

---------------------------

And here comes the difficult part, the standalone popup product viewing page, which does not replace existing product viewing full layout.
To do this, we will need to write our own customized module.
You may refer here to learn from begining:
http://magento4u.wordpress.com/2009/06/08/create-new-module-helloworld-in-magento/

Okay, how are we going to allow the user to choose our layout from the CMS module?
Do this, edit:
app/code/local/[namespace]/[module]/etc/config.xml
directly under config tag, add in these tree:
config > global > page > layouts > yourpagename
Make sure to add in all the layout that you wish to be available on the CMS module, such as category.phtml and product.phtml

Once you are familiar with how to write blocks, have it configured to be installed, and integrated with custom blocks, then we can begin writing a extended version of the Catalog/product/view functionality without full layout.

inside your module path:
app/code/local/[namespace]/[module]/etc/config.xml

Create these tags:
config > frontend > layout > updates > mylayout > file > mylayout.xml (content)
global > helpers > mymodule > class > namespace_mymodule_Helper (content)
global > blocks > mymodule > rewrite > myproductview > namespace_mymodule_block_product_view (content)

Notice that the class file is declared for our custom layout "myproductview" which will be seen declared on the next file (mylayouts.xml).
We shall need helper class declared, as default product controller of magento will need a helper class to render the page.

Next, the final layout file:
app/design/frontend/default/default/layout/mylayouts.xml

Create the nodes:
layout > mymodule_product_view (as shown on the photo below)

Then,

Take note that this will also need you to create the file:
app/design/frontend/default/default/template/page/inline.phtml
The file shall content a non html or body tags, to be displayed as popup using lightbox or colorbox.