One of the big ways in which Magento differentiates itself is by its flexibility. I’ll show you one way in which we utilized that flexibility at a group buying website in The Netherlands called GroupDeal.

At GroupDeal, usually we sell localized daily deals which have a from-price, a to-price and a discount percentage on display on the product page. A product page looks like this:

When a user presses the buy button, he goes into the checkout process and pays through our payment service provider. So far a pretty standard situation.

However, our business developer came across an opportunity to feature a completely different kind of deal on the website: a deal for saving on your energy bill. This kind of deal does not have a fixed from-price, to-price and discount percentage, so our regular product page design would not do.

In addition to that, this deal could also not be paid through a payment service provider. Instead, our customers had to leave extra information like birth dates and bank account numbers, so they could be registered later by the energy company.

The window of opportunity was about 5 days so we had to act quickly or lose this deal.

Product page

Luckily, Magento features a very flexible layout system where any block of your website can be controlled, even on the product level. The important bit of the product page we had to change was this:

In the design tab of the different deal, we entered some XML to point Magento to a different template file only for this piece of the page. For those interested, it looked like this (otherwise just scroll past):

<reference name=”top”>

<remove name=”product.top” />

<block type=”catalog/product_view” name=”product.topnem” template=”catalog/product/product_top_nem.phtml”>

<block type=”catalog/product_view” name=”product.countdown” as=”countdown” template=”paytype/countdown/countdown.phtml” />

<block type=”salesprogress/product_view_salePercentage” name=”product.salepercentage” as=”salepercentage” template=”catalog/product/view/salepercentage_nem.phtml” />

</block>

</reference>

In essence what this says is “use these template files instead of the regular files only at this location in the product page”.

The end result was we made the section for the energy deal look like this:

And the entire product page looked as expected:

No from-price, to-price, or discount, and the text saying how much people are saving in total, was changed too.

Of course, the other deals we were running at the time all had their regular look and feel!

All in all, the changes to the product page took at most a couple of hours. Of course, this highly depends on how the front-end of your website is structured!

Checkout

Our payment methods in the regular checkout (the special deal customers did not see these):

Our payment methods for the changed deal (the regular deal customers did not see this):

For the special deal, the MagentoConnect ecosystem came in handy. We found a module called DebitPayment that captures extra consumer data in the payments method step, so the work for us boiled down to showing that to people buying the special deal only and making it more userfriendly. To make the input for date of birth more userfriendly we used the highly recommended datepicker “Unobtrusive Date-Picker Widget v5″.

Conclusion

This should hopefully give you some idea about how powerful layout update flexibility and the wealth of modules available, can be. Comments / remarks welcome as always.