Magento Onepage Checkout, Quick But Not Dirty

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]

Continue reading “Magento Onepage Checkout, Quick But Not Dirty”

Adding a Custom Block to Magento CMS Page

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)

Continue reading “Adding a Custom Block to Magento CMS Page”

Magento utility: add multiple products to cart from catalog page

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]

Continue reading “Magento utility: add multiple products to cart from catalog page”

Magento Support – Add, Edit and Remove Magento Top Links

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]

Continue reading “Magento Support – Add, Edit and Remove Magento Top Links”

Magento form validation using Varien JavaScript objects

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.

Continue reading “Magento form validation using Varien JavaScript objects”

Magento Admin panel: Adminhtml

The Magento Admin panel is controlled by the Adminhtml module. And all Adminhtml pages require validation/authentication.

In fact, Magento has different ways treating GET and POST  admin pages, i.e.: $secretKey vs. ‘form_key’

magento admin panel

(This is a developer’s guide.)

For GET request, we must provide http:// … /id/’secretKey’
For POST request, we must provide ‘form_key’ as a post parameter.

Example for GET:  simple attach to the end of the URL in the block .php, note that the secret key only involves the controller and the action, not the module name.

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

public function getSearchResultGetUrl(){
    //must pass on the key to maintain logged in
    $secretKey = Mage::getSingleton('adminhtml/url')->getSecretKey('adminhtml_search', 'result');
    return Mage::getUrl('pet/adminhtml_search/result/key/'.$secretKey);
}

[/codesyntax]

Continue reading “Magento Admin panel: Adminhtml”

Magento Adminhtml, a Widget Heavy Approach

adminhtml

Magento Adminhtml, a Widget Heavy Approach

After 5  custom modules, I started to feel comfortable coding with Magento and picked up my coding speed. And then came the first project with massive modifications in the Admin panel, i.e. Adminhtml module. I had to admit that I totally underestimated the complexity of the task. The Adminhtml is, well, very different.

A common frontend module usually has an exact mapping between the actions in the controller and the views (block .php file plus template .phtml file), as defined in the layout file. Basically I can begin with the action in the controller, then use the layout .xml to look up the template .phtml files, and the outline of the code is clear.

However, such strict mapping is absent in the Adminhtml module, whose blocks are often directly controlled by the PHP code and also heavily rely on the block widgets.

I took a couple of days to investigate the source code, despite some remaining grudge against this ‘free-form’ module. I found the block widgets quite convenient.
There are many nice widgets like: Mage_Adminhtml_Block_Widget_Form, …_Grid, and etc.

Continue reading “Magento Adminhtml, a Widget Heavy Approach”