Magento – Custom Product Page Design and Options

layoutproductxml

I'm working on a turning some static HTML into a Magento template / theme, but I'm having some problems figuring out the best way to do things in Magento.

The product page design we have is quite different to the default layout in Magento, so my first thought was to make a custom layout for the product page and apply that as the default for all products. At first this approach seemed like a good one, however it's very quickly showing its limitations.

I'm trying to get the custom options for a product, but it's just returning null even though there are custom options, etc.

I was wondering if there was a better way of adding a custom product page, or a better of of approaching the problem. Maybe there is a way of inheriting some XML so that I can access the pre-made code for getting custom options etc?

Here is the code for my custom layout, it's just a basic custom layout XML:

app/etc/modules/Product_Page.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Product_Page>
            <active>true</active>
            <codePool>local</codePool>
            <depends>
                <Mage_Page />
            </depends>
           </Product_Page>
    </modules>
</config>

app/code/local/Product/Page/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <Product_Page>
            <version>0.0.1</version>
        </Product_Page>
    </modules>
    <global>
        <page>
            <layouts>
                <productpage module="page" translate="label">
                    <label>Product</label>
                    <template>page/html/product.phtml</template>
                    <layout_handle>product_page</layout_handle>
                </productpage>  
            </layouts>
        </page>
    </global>
    <frontend>
        <layout>
            <updates>
                <product_page>
                    <file>product_page.xml</file>
                </product_page>
            </updates>
        </layout>
    </frontend>
</config>

app/design/frontend/{template}/default/layout/product_page.xml

<?xml version="1.0"?>
<layout>
    <product_page translate="label">
        <label>Product</label>
        <reference name="root">
            <action method="setTemplate">
                <template>page/product.phtml</template>
            </action>
            <action method="setIsHandle">
                <applied>1</applied>
            </action>       
        </reference>
    </product_page>
</layout>

I will try and provide any extra information you might want as fast as possible.

Thanks!

Best Answer

If you want to customize your product view for every products then in YOURTHEME/layout/local.xml add :

<catalog_product_view>
    <!-- Allow you to change the global structure of the page -->
    <reference name="root">
        <action method="setTemplate"><template>page/your-custom-layout.phtml</template></action>
    </reference>
    <!-- Allow you to change the content of the product area -->
    <reference name="product.info">
        <action method="setTemplate"><template>catalog/product/your-custom-view.phtml</template></action>
    </reference>
</catalog_product_view>

Feel free to do all the changes you want through local.xml with the catalog_product_view handler.

Then create YOURTHEME/template/page/your-custom-layout.phtml based on template/page/1column.phtml (for example)

And create YOURTHEME/template/catalog/product/your-custom-view.phtml based on template/catalog/product/view.phtml

Related Topic