Configurable Options within a modal for non-selected options

Question

I want to write a frontend functionality for configurable products.

If there is no configurable attribute given, I want a modal to popup which asks the user to select options. The options should be within the modal of course.

As of now, I got nothing, I wanted to ask for the right way of solving this. Maybe somebody can layout the todo's here schematically? That would be very helpful.

Answer 1

One way to do this is to create your own controller action, which is basically a duplication of the standard product view action.

It will require its own layout directives, which you can start off as purely an update handle for the existing view.

Code: (untested)

you simply need to place a router directive, into your extension config.xml

<frontend>
    <routers>
         <catalog>
                <args>
                    <modules>
                        <YOUR_NAMESPACE_MODULENAME after="Mage_Catalog">YOUR_NAMESPACE_MODULENAME</YOUR_NAMESPACE_MODULENAME>
                    </modules>
                </args>
            </catalog>
    </routers>
</frontend>

You will then create the corresponding controller into the controllers folder of your extension. ProductController.php

The contents will be something like this:

    <?php

    require_once(Mage::getModuleDir(
            'controllers',
            'Mage_Catalog'
        ) . DS . 'ProductController.php');

    class YOURNAMESPACE_MODULE_ProductController extends Mage_Catalog_ProductController
{

        /**
         * Product view action
         */
        public function popupAction()
        {
           return parent::viewAction();
        }

}

You'd have the following in a layout directive, specified by your extension:

<catalog_product_popup translate="label">
        <update handle="catalog_product_view"/>
        <!-- examples on removing current layou directives -->
        <remove name="header"/>
        <!-- or using unsetChild, to remove a child block from a referenced area -->
        <reference name="root">
            <action method="unsetChild">
                <name>breadcrumbs</name>
            </action>
        </reference>
 <!-- an example of how to simply change the template of an existing block -->
        <reference name="product.info.addtocart">
            <action method="setTemplate">
                <value>somepath/catalog/product/view/addtocart.phtml</value>
            </action>
        </reference>
    </catalog_product_popup>

Once you got the full view of the product in your popup, you can strip away all the display layer parts you don't need, purely using layout directives.

Possibly assign your own .phtml to blocks for more display control. Doing t this way you really are using all core functionality to display your product, so will be stable. :)

You can call this like this: /catalog/product/popup/id/883 (where 883 is my configurable product id)

There will most likely be a few sticky points (registry entry for 'current_product' comes to mind), but a potential idea for you.