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]

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]

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.