Archive for 2009

Magento Onepage Checkout, Quick But Not Dirty

Thursday, June 18th, 2009 by

Magento Onepage Checkout, Quick But Not Dirty

The Magento Onepage Checkout is a very special feature in Magento. Beyond the regular Model-Controller-View structure, the Onepage MCV is quite a hybrid of PHP and JavaScript.

The first place to look is of course the Mage_Checkout_OnepageController, this is pretty much the bread and butter of many nice little tricks.

The index action together with the corresponding block and template file are indeed very important here.  Indeed, our first treat today lies in the block file (Checkout/Block/Onepage.php):

[codesyntax lang="php" lines="fancy"]

$stepCodes = array('billing', 'shipping', 'shipping_method', 'payment',  'review');

[/codesyntax]

(more…)

Adding a Custom Block to Magento CMS Page

Tuesday, April 21st, 2009 by

Adding a Custom Block to Magento CMS Page

Adding a custom block to Magento CMS page is a very good way to improve the flexibility of these static pages. This will help us to keep our CMS page tight, without copy-pasting the same large paragraph of scripts into every single page.

It’s usually an over-shoot to build a whole new module for this, a new block class would be sufficient for this purpose.
Since it’s CMS related, we can simply do the following:

  • Extend the Magento core module: core/Mage/CMS
  • Create local/Mage/Cms/Block/xxx.php
  • Also create the corresponding .phtml template
  • (No update needed for the layout/ folder)

(more…)

Magento utility: add multiple products to cart from catalog page

Monday, March 30th, 2009 by

Magento utility: add multiple simple/configurable products to cart from catalog page

In the endless struggle to make our Magento stores more user-friendly, often we want to enable the customers to add multiple products in the catalog view page directly into shopping cart. This is a very convenient feature for wholesale websites, since the customer does not have to go through every single product detail page.

(This is a developer’s guide.)

We are shooting for a clean and direct fix, which I classify as a Magento utility.

The first step is to modify the /catalog/category/view.phtml, for each product in the product list, insert a form:

[codesyntax lang="php"]

<form action="<?php echo $this->getBaseUrl() ?>utility/expressCart/add" method="post" >
    <input type="hidden" name="addToCartProductId" value="<?php echo $product->getId() ?>" />
    <p><?php echo $inputString ?></p>
    <p><input type="submit" value="<?php echo $this->__('Add to Cart') ?>"></p>
</form>

[/codesyntax]

(more…)

Magento Support – Add, Edit and Remove Magento Top Links

Monday, January 19th, 2009 by

magento top links

Magento Support – Add, Edit and Remove Magento Top Links

This is a simple trick, and often requested for Magento support. The general rule for each Magento top link is that each is mostly controlled by the Magento layout,  so check layout/module_name.xml first.

To Add a new top link:
Sample code:
[codesyntax lang="xml" lines="fancy"]

<default>
    <reference name="top.links">
        <action method="addLink" translate="label title" module="module_name">
            <label>My Top Link Name</label>
            <url helper="module_name/get_top_link_target_url"/>
            <title>My Top Link Title</title>
            <prepare/>
            <urlParams/>
            <position>1</position>
        </action>
    </reference>
</default>

[/codesyntax]

(more…)

Magento form validation using Varien JavaScript objects

Sunday, January 4th, 2009 by

Magento form validation using Varien JavaScript objects

When building new pages in Magento, form validation is usually a necessary but highly repetitive process.

Luckily, Magento already comes with very nice form validation functions written in JavaScript.

Here is a quick demo of how to use it, based on the Magento customer login form.

At the end of the .phtml template file, attach the following code:

[codesyntax lang="javascript" lines="fancy"]

<script type="text/javascript">
//<![CDATA[
    var loginForm = new VarienForm('login-form', true);
    $('login-email').observe('keypress', bindLoginPost);
    $('login-password').observe('keypress', bindLoginPost);
    function bindLoginPost(evt){
        if (evt.keyCode == Event.KEY_RETURN) {
            loginForm.submit();
        }
    }
    function onepageLogin(button){
        if(loginForm.validator &&  loginForm.validator.validate()){
            button.disabled = true;
            loginForm.submit();
        }
    }
//]]>
</script>

[/codesyntax]

The key is to wrap a VarienForm object around our form element with id=’login-form’, and then loginForm.validator.validate() will handle everything with ease.

(more…)