StudioForty9 Blog

An Irish Module for Magento

2011-03-08T23:02:21+00:00

Just in time for St. Patrick's Day!

I had been meaning to write a small "Ireland" module for Magento for a while but only got around to it last week.

It has 2 pieces of functionality:

It adds the counties of Ireland (including Northern Ireland), into the 'directory_country_region' table of the Magento database so the list of Irish counties appears when you change the country to Ireland on any of the forms in Magento (checkout, cart, etc.)
It adds a shipping method for An Post, the national postal carrier of Ireland.

There's nothing much to say about part 1, but there's a few points I'd like to mention about part 2:

The code is based on WebShopApps MatrixRate module (http://www.magentocommerce.com/magento-connect/webshopapps/extension/604/webshopapps-matrixrate--the-original-multiple-table-rate-solution--certified-bug-free). It's a really great module and would recommend it for anyone who needs to use tablerates as their shipping method.
The main advantage of this module is that it provided partial postcode matching out of the box. So it was easy to setup an "all--Ireland" rate since all Northern Ireland postcodes start with "BT". Just give all "GBR" shipping destinations with postcode starting with "BT" the same cost as the Irish rate.
The next issue, which I've come across a number of times, is the concept of an EU rate and a non-EU European rate. Rather than having to put in the same rates 27 times to account for each EU country, and another 10 or 20 times for the non-EU countries, I decided to custom code things. I put the value of "EUR" and "!EU" into the database to denote EU and non-EU respectively. When retrieving rates, I check to see if the country code (e.g., 'DE' for Germany) is in an array which contains all the country codes for EU and non-EU countries respectively. If so, I return the EU/non-EU shipping rate. 5-10 lines of code saving thousands of lines in the database/CSV.
Matrixrate is based on importing a CSV with the desired rates. So first I created a CSV for all the different zones (Ireland, UK, EU, Non-EU, Rest of the World) with all the different shipping options An Post offers (Standard Post, Registered Post, Express Post, Courier Post) and imported that. I then made a backup of the resulting database table and put the SQL for this table into the installer script for the module.
Finally, I should point out that An Post has different rates based on what type of package is being sent (Envelope, Large Envelope, Packet, Package). Envelope and Large Envelope are ignored in this module. There is an assumption that Packets are used for the lightest shipments, and Packages are used thereafter. I think this is a reasonable assumption - take a look at the An Post rates on their website here - http://www.anpost.ie/AnPost/PostalRates/Standard+Post.htm

Anyway, if you're interested in using the module, you can find it here: http://www.magentocommerce.com/magento-connect/SF9/extension/5980/sf9_anpost

Taking Control of Product Options in Magento

2011-02-21T12:05:41+00:00

It's about 18 months since I first grappled with custom options for products in Magento. This was for the MyBlinds website which I've blogged about previously, and will do so again. A large number of products (2000), a number of different product types (7) as well a reasonable number of options per product (on average 6) meant a complicated category setup. Ultimately, in this scenario, I built a custom import script that imported the custom options for each product type.

Unfortunately, at the time, I wasn't aware of Custom Option Templates. This module allows you to create a template of custom options, and apply it to whatever products you like. So there's no need to import the custom options for the products, but just assign the appropriate template post-import.

I've only come across one problem with this module. It has problems assigning more than 200 products to a particular template. This isn't the end of the world, as we can just create a duplicate of a particular template, and assign the duplicate template to the products beyond 200. You need to be careful in doing this, as it can be easy to assign 2 or more templates to 1 product, and none to another, if you're not careful about how you go about it.

What's also important, I think, in getting to grips with custom options for products in Magento, is to seriously consider scrapping the default product view template (/app/design/frontend/<your_interface>/<your_theme>/template/catalog/product/view.phtml). It's very restricting in how it renders custom options. There's no flexibility in terms of more sophisticated validation, tooltips to explain the meaning/importance of certain options, etc.

As an example of the restrictions in the rendering of custom options in the default template, the input fields have ids something like "option_728". What is the use of a unique identifier that I have no way of knowing what it is in advance, so that I can not target it using Javascript or CSS?

Instead I find it better to create a custom view template for each of your product types where you can hand-craft the HTML to fit your user experience needs. This gives you complete control over how the page looks and you can create radically different product view pages based on the product type or category. In hand-crafting the HTML, it can become a little more complex to put in the appropriate option ids and names on the input fields. Thus far, I've been updating the options with the appropriate names using AJAX on product load. This isn't ideal and I will be working on some custom functions to do this as part of the page rendering on a current project. But ultimately you can add the necessary ids and classes to your custom options so you can target them to your heart's content.

The only problem in this approach, is that the "custom layout update" field needs to be filled in for each product with the appropriate update to use the custom template rather than the default template:

<reference name="product.info">
	    <action method="setTemplate"><template>catalog/product/custom.phtml</template></action>
	</reference>

Obviously, if you want to make a change to the name of the template being used, you can use the mass update attributes action in the product grid in the Magento backend. It does seem like overkill however. Wouldn't it be nice to be able to simply set the product page template at the category level. This is possible with a small piece of custom code. By default, Magento will let you set the page layout or custom design of a category to be applicable to its subcategories and products. However, this doesn't extend to "custom layout updates". So that's what the following code does. It means that when you set a custom layout update in a category, and set it to apply to all of its children, that it will be taken up by the products. In this way, we can set a custom product template for an entire category, in one place only.

<global>
	        <models>
	            <catalog>
	                  <rewrite>
	                    <category>SF9_Custom_Model_Category</category>
	                    <product>SF9_Custom_Model_Product</product>
	                    </rewrite>
	               </catalog>
	        </models>
	</global>

<?php
	class SF9_Custom_Model_Category extends Mage_Catalog_Model_Category
	{   
	    public function getCustomLayoutUpdate(){
	        $customLayoutUpdate = $this->getData('custom_layout_update');
	        if ($customLayoutUpdate == "") {
	            $parent = $this->getParentCategory();
	            if($parent){
	                $customLayoutUpdate = $parent->getCustomLayoutUpdate();
	               }
	        }
	        return $customLayoutUpdate;
	    }
	}
?>

<?php
	class SF9_Custom_Model_Product extends Mage_Catalog_Model_Product
	{   
	    public function getCustomLayoutUpdate(){
	        $customLayoutUpdate = $this->getData('custom_layout_update');
	        if ($customLayoutUpdate == "") {
	            $parent = Mage::registry('current_category');
	                 if($parent){
	                     $customLayoutUpdate = $parent->getCustomLayoutUpdate();
	                }
	        }
	        return $customLayoutUpdate;
	    }
	}
?>

jQuery in Magento made easy

2011-02-13T15:03:15+00:00

(or sophisticated depending on your point of vew)

First of all I'd like to credit my colleague Eoghan. He's the Javascript guru in the company, and really this blog post is based on a library he developed for use on our projects, adapted for Magento. I'm still feeling my way around Javascript, in terms of taking advantage of the existing frameworks (jQuery, Prototype, MooTools) to write modular code that is loosely coupled with the underlying HTML/CSS.

For those of you who have used Magento, you will know that it comes packaged with Prototype and Scriptaculous. The entire functionality both frontend and backend is dependent on the 10 or so Javascript classes written on top of Prototype. While technically it is possible to strip back this Javascript to allow orders to be placed for users without Javascript enabled, it really depends on your setup and is a reasonable amount of work for a questionable pay-off.

But of course, Prototype is somewhat limited as a framework. Not only does it not have the same amount of 3rd party modules written for it, in comparison with jQuery, but it also tends to be a bit more verbose in terms of getting it to do what you want. So it's not surprising that Magento Connect is littered with modules that provide functionality (e.g., slideshows) that are written in jQuery.

Of course, you can't just throw the jQuery library and some custom code into a Magento template and expect it to work. There will be conflicts between Prototype and jQuery as both use the '$' sign notation. Fortunately, jQuery has the noConflict() method that you can use to allow Prototype and jQuery to function happily together.

But as online shops become more sophisticated in terms of the user experience, there can be an increase in the number of jQuery modules being used on the store. For example, on a store I am building at the moment you have a sliding panel and a lightbox on every page, as well as an image zoom, a colour picker and another sliding panel on the product page. If we start putting <script> tags into the Magento template files where each particular functionality is needed, we soon end up with code that is difficult to maintain. Not only that, but including Javascript inline like that, slows down page loads.

So rather than having each piece of jQuery in the appropriate template, remembering to wrap it with noConflict() each time, let's put it in one file for the entire site. Here's the example I'll be using:

(function($){

     $.studioforty9= {
          version: '0.1',
          website: 'http://dev.studioforty9.com/',
          sections: {
               'cms-index-index' : 'this.initHome()',
               'cms-page-view' : 'this.initCMS()',
               'catalog-category-view' : 'this.initCategory()',
               'catalog-product-view' : 'this.initProduct()',
               'checkout-cart-index' : 'this.initCart()',
               'checkout-onepage-index' : 'this.initCheckout()'
          },
          init: function()
          {
               this.TopPanel();
               this.LightBox();
          },
          initSiteSection: function(section){
               var section = $('body').attr('class').split(' ')[1];
               eval(this.sections[section]);
          },
          initHome: function(){},
          initCMS: function(){},
          initCategory: function(){},
          initProduct: function(){
               this.ProductOptions();
               this.ProductZoom();
               this.ColourPicker()
          },
          initCart: function(){},
          initCheckout: function(){},
          Utilities:
          {
               external: function() {
                    $('A[rel*="external"]').click(function(e) {
                         var url = $(this).attr('href');
                         window.open(url);
                         e.preventDefault();
                    });
               }
          },
          Forms:
          {
               focus: function() {
                    var prevLabel = '';
                    $('.focus').focus(function() {
                         if ( $.trim($(this).val()) == $(this).attr('title') ) {
                              prevLabel = $(this).val();
                              $(this).val('');
                         }
                    });
                    $('.focus').blur(function() {
                         if ( $(this).val() == '' ) {
                              $(this).val(prevLabel);
                         }
                    });
               }
          },
          TopPanel: function() {
               $('#lightbox-link').bind('click', function(event){
                    event.preventDefault();
                    $('.lightbox').slideDown('slow');
                    $('#close-link').show();
               });
              
               $('#login-link').bind('click', function(event){
                    event.preventDefault();
                    $('.login').slideDown('slow');
                    $('#close-link').show();
               });
              
               $('#close-link').bind('click', function(event){
                    event.preventDefault();
                    $('.login').slideUp('slow');
                    $('.lightbox').slideUp('slow');
                    $('#close-link').fadeOut('slow');
               });
          },
          LightBox: function(){
               $('.lightbox-img').lightBox({
                    containerResizeSpeed: 800,
                    imageLoading: 'http://dev.studioforty9.com/skin/frontend/default/modern/img/lightbox-ico-loading.gif',
                    imageBtnClose: 'http://dev.studioforty9.com/skin/frontend/default/modern/img/lightbox-btn-close.gif',
                    imageBtnPrev: 'http://dev.studioforty9.com/skin/frontend/default/modern/img/lightbox-btn-prev.gif',
                    imageBtnNext: 'http://dev.studioforty9.com/skin/frontend/default/modern/img/lightbox-btn-next.gif',
               });
          },    
          ProductOptions: function(){
               if($('#choose-options').length > 0){
                    $('#choose-options').bind('click', function(event){
                         event.preventDefault();
                         $('.options').slideToggle('slow');
                    });
               }
          },
          ProductZoom: function(){    
               var options = {
                             zoomWidth: 300,
                             zoomHeight: 260,
                           xOffset: 122,
                           yOffset: -82,
                           position: "right",
                           title: false
               };

               $('.product-image-zoom a').jqzoom(options);
          },
          ColourPicker: function(){    
               $('#picker-link a').bind('click', function(event){
                    event.preventDefault();
                    $('#colour-picker').fadeToggle();
               });                    
              
               $('#colour-picker').farbtastic({callback : '.product-essential', width: 150});
          }
     }

     $(function() {
          $.studioforty9.init();
          $.studioforty9.initSiteSection();
     });

})(jQuery.noConflict());

There's a few things I'd like to point out about this code.

First of all, there's only one call to noConflict(). The entire code is wrapped as an anonymous function, and noConflict() applied to this. Easy!

Second, also at the bottom of the code is the equivalent of the onDomReady function. This is the code that is run when the page is finished loading. 2 lines. Easy to see what's going on. There's the init() function that calls other functions that we want to run on every page on the site. So in our case this is the TopPanel that slides down when particular links are clicked and the LightBox for particular images.

The other function is initSiteSection(). As we've said already, we want certain code to only be run on certain pages. Rather than introduce a raft of if...else statements, we can leverage Magento to figure this out in a more seamless manner. Each Magento page has particular classes on the

tag. The main ones are listed in the sections object. We associate these classes with a particular function to run (e.g., when the

tag has a class of 'catalog-product-view' we want to run the initProduct() function). This way it's very easy to find out exactly what code from the class is running on any given page.*

* I should point out that it's also necessary to include the relevant libraries in the appropriate layout XML file. So for example, we would want to add the following lines of code to catalog.xml file of our theme to add the jqZoom library to

of the page:

<catalog_product_view translate="label">
          ...
        <reference name="head">
          ...  
          <action method="addItem"><type>skin_js</type><name>js/jquery.jqzoom1.0.1.js</name></action>
          <action method="addItem"><type>skin_css</type><name>css/jqzoom.css</name></action>
          ...
        </reference>

        ...
</catalog_product_view>

Restricting Product Purchase to Authorised Users in Magento

2011-02-07T10:44:06+00:00

Quick ways to exend Magento's default functionality

I haven't written about e-commerce for quite a while now. Magento has been keeping me busy and now I've a list of thoughts and insights that I hope to share in the coming weeks.

So first off, I'd like to describe a recent module I wrote that might seem reasonably complex. However, I'd like to show how easy it can be when taking advantage of Magento's features.

The idea behind the module is that a customer may only purchase a particular product by entering a code. There's 4 parts to the module:

The product view page where the customer can enter their code.
An override of the default Add to Cart functionality in Magento to validate the given Code
A section in the Magento backend for managing Codes.
An event listener to observe when a customer places an order so that the code can be marked as "used".

The basics of the module can be setup using ModuleCreator (http://www.magentocommerce.com/magento-connect/Daniel+Nitz/extension/1108/modulecreator). The module doesn't really install properly in Magento 1.4.x but I've used it enough times at this stage to be able to copy the files over manually and do some search and replace over them to get it the way I want it.

Once the files, are in place, the most important thing is to design the table structure in the database and write the SQL installation script. The fields I needed were:

code_id
country_id
customer_ip
valid_to
valid_from
used_timestamp
status

Once installed in Magento, you can start fixing up the grid and add/edit screens to show you the fields for your particular module (rather than the default ModuleCreator fields). Having useful field types in the grid is a topic I intend to return to in a future post.

After that, it's just a matter of creating a test product and giving it a custom option where the customer can enter the code.

We then override the Add to Cart functionality. So I override /app/code/core/Mage/Checkout/Model/Cart.php. To do this I add the following lines to the config.xml file of my module:

<models>
	   ...
	   <checkout>
	      <rewrite>
	         <cart>SF9_Codes_Model_Cart</cart>
	      </rewrite>
	   </checkout>
	</models>

and I create my own Cart.php file

class SF9_Codes_Model_Cart extends Mage_Checkout_Model_Cart
{
     public function addProduct($product, $info=null){
        $code_title = Mage::getStoreConfig('codes/codes/custom_option_title', 1);
        $error_message = Mage::getStoreConfig('codes/codes/invalid_code_error_message', 1);
    
          $options = array();
         
          foreach ($product->getOptions() as $_option) {
               $options[$_option->getId()] = $_option->getTitle();
          }
         
          if(!in_array($code_title, $options)){
               parent::addProduct($product, $info);
               return;
          }         
         
          foreach($info['options'] as $key => $value){
               if(in_array($key, array_keys($options)) ){
                    $code = $value;
               }
          }         
    
          $timestamp = date('Y-m-d H:i:s');
         
          $codes = Mage::getModel('codes/codes')->getCollection()
                         ->addFieldToSelect('*')
                         ->addFieldToFilter('code', $code)
                         ->addFieldToFilter('status', 0)
                         ->addFieldToFilter('valid_from', array('date' => true, 'to' => $timestamp))
                         ->addFieldToFilter('valid_to', array('date' => true, 'from' => $timestamp))
                         ->setPageSize(1);
         
          if(count($codes) > 0){
               parent::addProduct($product, $info);    
          }else{
               Mage::throwException($error_message);
          }
         
     }
}

Finally, I create an observer for the order_placed event. To do this, I add the following lines to config.xml

<events>
	   <checkout_type_onepage_save_order_after>
	      <observers>
	         <sf9_codes_observer>
	            <type>singleton</type>
	            <class>SF9_Codes_Model_Observer</class>
	            <method>update_used_codes</method>
	         </sf9_codes_observer>
	      </observers>
	   </checkout_type_onepage_save_order_after>
	</events>

and create the following Observer.php file

class SF9_Codes_Model_Observer{
        
          //runs when order is saved in Onepage Checkout
          public function update_used_codes($observer){
               $event = $observer->getEvent();
               $order = $event->getOrder();
              
               $code_title = Mage::getStoreConfig('codes/codes/custom_option_title', 1);
              
               $items = $order->getAllItems();
               foreach($items as $item){
                    $_options = $item->getProductOptions();
                    foreach($_options['options'] as $_option){
                         $options[$_option['label']] = $_option['value'];
                    }
                    if(isset($options[$code_title])){
                         $code = $options[$code_title];
                         $codes = Mage::getModel('codes/codes')->getCollection()
                                             ->addFieldToSelect('*')
                                             ->addFieldToFilter('code', $code)
                                             ->setPageSize(1);
              
                         $update = $codes->getFirstItem();
                         $timestamp = date('Y-m-d H:i:s');                             
                         $update->setStatus(1)
                                   ->setUsername($order->getBillingAddress()->getName())
                                   ->setUserIp($_SERVER['REMOTE_ADDR'])
                                   ->setUsedTimestamp($timestamp)
                                   ->save();
                    }
               }
          }
     }

What's nice about the module is how it exemplifies in a very succinct way the different ways to extend Magento's core functionality. You can extend a core PHP file when you want to alter the default behaviour or create an observer that listens to one of the approximately 280 events that Magento fires off when you want to do something extra at a particular time (in this case, update the code's status to "used" and write its "used timestamp".

Now, let's hope I can make blogging about Magento more of a habit!!

West Cork Homeless

2010-12-31T18:22:00+00:00

A little search engine boost for a good cause

I just set up a teeny tiny brochure site for West Cork Homeless and now I want to give it a small shove into the Search Engine's spotlights.

The Tenancy Sustainment and Support Service is run by Novas Initiatives in partnership with Cork County Council and the HSE South. The TSS role is to aid people who are homeless or at risk of homelessness. There are a number of Tenancy Support and Advice Clinics run as part of the service across West Cork.

Useful Services for Really Small Sites

This little New Year's Eve job was done on a "favour for a good cause" basis, but I still wanted to provide some level of functionality in terms of Content Mangement and Contact Forms. Obviously our standard tool of choice when it comes to a CMS, Expression Engine, is too full-on and industrial strength for such a small job so I was in the unusual position of looking for a very small and handy CMS for the site. I quickly whittled the candidates down to Perch and CushyCMS.

Perch has the advantage of being run off your own server, is brandable, and is yours for a once-off small fee (35 GBP).

CushyCMS is also brandable for a monthly charge (29 USD), it does CMS via FTP so realistically there's no set up, and if you don't mind the CushyCMS branding (which in this case I didn't) it's free.

Otherwise, the two are relatively similar in how they operate: within the HTML you identify the regions of the site you want to edit and the system will allow your client / editor to edit them in a simple interface. In fairness, both systems would have been ideal for this job - but at no cost and no setup I decided to go for CushyCMS for this particular job. If I needed branding and management on the site's own server, I would certainly have preferred to pay a once-off fee for Perch rather than the monthly charge for CushyCMS (although it should be noted that the monthly charge is for unlimited sites under your control).

For simple-to-setup (and free) forms I go for the incomparable and incredible powerful Wufoo. It's pretty stunning what you can do with this service now, and in fairness we do have one or two clients who pay the monthly fee to Wufoo for the more advanced features - but if you need a simple form, with notifications (both to you and your client), as well as online storage of entries you really can't beat Wufoo - a fantastic service.

Best wishes to West Cork Homeless and their new services and clinics.

Fota Wildlife wins Best Tourism & Travel Website… and also takes the Eircom Spiders Grand Prix

2010-11-19T10:05:16+00:00

Congratulations to Fota Wildlife Park who won the Best Tourism & Travel Website 2010 and then won the Eircom Spiders Grand Prix for Best Overall Website 2010.

Which, by one measure at least, means we built this year's best Irish website. Wow.

But that's just the icing on the cake, it's always been an honour to be the company who built the Fota Wildlife website. We've had some inspirational clients over the past number of years - and Fota are definitely on that list. They're outstanding to work with, forward thinking - and a really nice bunch of people! So huge congratulations to everybody over there on winning the two awards!

The sms text I got from Fota's marketing manager Stephen Ryan after Fota Wildlife were announced as Grand Prix winners was "I'm in shock I nearly fell off my chair". Well congratulations Stephen - a fully deserved award for all your effort in keeping the site and associated social networks current, lively and active!

From our side, I'd like to give credit to the super-talented web developer Eoghan O'Brien for doing trojan work on the website and also thank Alan Morkan for his moral support (we'll get an e-commerce site nominated next year Alan!).

Here's the opinion of the Grand Prix judges:

Well developed, rich in content, visually appealing with good navigation. The site makes good use of images and interactive tools, building up a strong relationship with its users. It has also grown a strong online community encouraging repeat visits. There is also good integration with social media tools which are constantly updated and always have something new to offer.

That's pretty cool! Actually that's really cool, the brief from day one was all about 'building the community'.

Well now that there's a reputation to maintain - let's get to work!

Realex Redirect with PHP

2010-09-15T15:38:01+00:00

Automatically submit Realex Redirect form

Recently, we've been working with Realex and the Redirect method for simple once off payments which also require custom data (such as name, email address and a dynamic amount value) taken from user input.

This can be awkward when using the Redirect method as you must first handle the user input before sending the user to pay. Usually, you would need to display a new page showing a form with hidden fields for the data which needs to be passed to Realex and a button such as 'Proceed to Secure Server'. This two step process seems a bit cumbersome so we've tried to make it easier for people to go from our custom form straight to payment at the Realex server.

In an effort to cut down on the amount of code, we've put together a small library of PHP code to do just that and help speed up the development process in future. You can buy our library for €25 excluding VAT.

The library requires PHP version 5.1.4 and includes the following files:

documentaion.html
example.html
library
    Studioforty9
        HtmlPage.php
        Realex
            Redirect
                Form.php
                Response.php
                Request.php

Buy Now

Here is an example of how you can create a HTML page dynamically, pass your Request variables to a Realex Form class and submit the form automatically.

<?php
$formIsValid = FALSE;

function __autoload($class)
{
	$classfile = str_replace('_', '/', $class).'.php';
	$path_to_library = '/path/to/library/';
	require_once $path_to_library.$classfile;
}

# Validate User Input Here
if (isset($_POST['amount']) {
	$amount = clean($_POST['amount']);
	$formIsValid = TRUE;
}

# Check that all the initial User Input data is valid
if (TRUE === $formIsValid) {

	# You can now store the user input or email it to an administrator

	# Create Request
	$Request = new Studioforty9_Realex_Redirect_Request;
	$Request->setMerchant_ID('merchant_id');
	$Request->setSecret('secret');
	$Request->setAccount('internet');
	$Request->setOrder_ID('123');
	$Request->setCurrency('EUR');
	$Request->setTimestamp(strftime("%Y%m%d%H%M%S"));
	$Request->setCust_num('123');
	$Request->setProd_ID('012345');
	$Request->setVar_Ref('0123456789');
	$Request->setAmount($amount * 100);
	$Request->setSha1Hash($Request->generateHash());
	
	# Create Form
	$Form = new Studioforty9_Realex_Redirect_Form;
	$Form->setRequest($Request);
	$Form->setAttributes(array('id' => 'realex', 'name' => 'secureserver'));
	
	# Create Page
	$Page = new Studioforty9_HtmlPage();
	$Page->html();
	$Page->head(); // Must be called to allow for title, meta, styles and scripts to be added, render() method will not run without it
	$Page->title('Realex Redirect Payment');
	$Page->addMeta(array('http-equiv' => 'content-type', 'content' => 'text/html; charset=UTF-8'));
	$Page->addMeta(array('name' => 'robots', 'content' => 'nofollow,noindex'));
	$Page->addStyleToHead(array('href' => '/css/realex.css'));
	$Page->addScriptToHead(array('src' => '/js/realex.js'));
	
	# Attach Loading paragraph, 
	$loading = '<p class="loading">Please wait while we redirect you to our secure server.</p>';
	$Page->body(
		array('onload' => 'document.secureserver.submit();'),
		$loading.$Form->render()
	);
	
	echo $Page->render();
} else {
	# Redirect the user back the initial form and show errors
}

?>

Lets break this down

Firstly, we're automatically loading the needed classes on demand with our __autoload() function, if you decide to use our library make sure you set the correct path to the library folder. If you are on a windows server be sure to change forward slashes to backslashes.

Next, you should validate the user input from the initial form, once we know the user input is valid, we can then store the data to a file or database or just send it out to an administrator.

The Request Class

Here's where it gets interesting, we know the data is valid, we've stored it and now we want to send our eager customer to Realex to relieve them of some of their hard-earned cash. Using the Studioforty9_Relex_Redirect library we can create a new Request object like so:

<?php

$Request = new Studioforty9_Realex_Redirect_Request;

?>

We can pass in any variables to this object using the setVariable_Name methods. These method names map to request variables provided by Realex. Notice the underscores in the variables are also present in the method names. (e.g. $Request->setAuto_Settle_Flag(TRUE);)

merchant_id
secret
account
order_id
currency
timestamp
cust_num
prod_id
var_ref
amount
sha1hash
shipping_code
shipping_co
billing_code
billing_co
return_tss
auto_settle_flag

<?php

$Request->setMerchant_ID('your_merchant_id');
$Request->setSecret('your_shared_secret');
$Request->setAccount('internet');
$Request->setOrder_ID('123');
$Request->setCurrency('EUR');
$Request->setTimestamp(strftime("%Y%m%d%H%M%S"));
$Request->setCust_num('123');
$Request->setProd_ID('012345');
$Request->setVar_Ref('0123456789');
$Request->setAmount($amount * 100);

?>

The last thing you need to do with the Studioforty9_Realex_Redirect_Request object is generate the Realex sha1 hash, our Request class provides an easy method for this so that all you need to do is call:

<?php

$Request->setSha1Hash($Request->generateHash());

?>

The Form Class

Once we have passed all our variables to the Request, we can then create a new Form object to dynamically build the form that will send the customer to Realex.

<?php

$Form = new Studioforty9_Realex_Redirect_Form;
$Form->setRequest($Request);
$Form->setAttributes(array('id' => 'realex', 'name' => 'secureserver'));

?>

All we need to do is create a new instance of Studioforty9_Realex_Redirect_Form and pass the Request object with the setRequest() method. Then I've added two attributes, and id for styling purposes and a name so that I can submit the form automatically when the page loads. The Form object also has a render() method which we will use later.

The HtmlPage Class

The Studioforty9_HtmlPage class provides a simple interface to create a HTML page without writing a single line of HTML. It uses the built in DOMDocument class to programatically create and render a valid HTML page. We will use it to build a page for our Realex form on the fly and pass attributes to our <body> tag to send the form automatically.

<?php

$Page = new Studioforty9_HtmlPage();
$Page->html();
$Page->head(); // Must be called to allow for title, meta, styles and scripts to be added, render() method will not run without it
$Page->title('Realex Redirect Payment');
$Page->addMeta(array('http-equiv' => 'content-type', 'content' => 'text/html; charset=UTF-8'));
$Page->addMeta(array('name' => 'robots', 'content' => 'nofollow,noindex'));
$Page->addStyleToHead(array('href' => '/css/realex.css'));
$Page->addScriptToHead(array('src' => '/js/realex.js'));
$loading = '&lt;p class="loading">Please wait while we redirect you to our secure server.</p>';
$Page->body(
	array('onload' => 'document.secureserver.submit();'),
	$loading.$Form->render()
);
?>

This class is fairly straight forward, we create an instance of Studioforty9_HtmlPage and call its constructor method, which automatically creates a new XHTML Strict Document, we call the html method to create the root HTML node, we must also call the head so we have a parent node for title, meta, style and script

You set the title of the document using the title method, the addMeta meta simply takes an array of attributes, the addStyleToHead and addScriptToHead methods will figure out whether to link to a resource or embed the code based on the attributes you provide, so for example, if you don't pass an src attribute to addScriptToHead it will assume you wish to embed javascript in the head which you can do like so $Page->addScriptToHead(array(), "var greeting = 'Hello World!';");.

Next, we need to create a loading message to show the customer while the browser attempts to automatically submit your form, if you want to show a spinner/animated gif, you can either add to image in directly here or add a CSS class hook to allow for more control. Lastly you need to pass some variables to the body method, the onload attribute needs some simple javascript code to submit the form and we also need to pass in our loading content as well as our Studioforty9_Realex_Redirect_Form object's render method

Finally, we run echo $Page->render(); which sends everything to the browser for display. You should now have a simple, re-usable, programmatic approach to using the Realex Redirect method.

Blinds & Magento

2009-11-17T10:16:02+00:00

Percentage Price Changes and Free Samples

We've just finished quite a lengthy job for MyBlinds.ie. This is a company that sells a wide variety of window blinds with free delivery in Ireland. In the process, we had to address a number of interesting issues in Magento relating to percentage price changes on configuarble products and an easy way to handle free product samples.

I had said this in my previous post about curtains, but the importance of custom product order forms can't be stressed enough in some cases. When there are 6 or 7 different ordering processes, with different interdependent custom options, it becomes extremely painful very quickly if static forms aren't used (being updated by AJAX with appropriate names/values).

Another interesting issue that cropped up in this project was the issue of percentage price changes. Custom options can have a price related to them, be it a €5 increase or a 20% decrease. Unfortunately, Magento doesn't apply percentages in a very intuitive way in terms of configurable products. Instead of applying them to the currently chosen option, it applies the percentage to the base price. Now, the base price of configurable products is often zero, so the percentage change becomes defunct. To get around this we need to set the price of the configurable product to €1 and then do some tricky maths in the background so that it all appears as expected in the cart.

When initially faced with supplying fabric samples, it seemed like it could be done as a glorified contact form. But why lose out on the order management, shipping, etc that Magento provides by default. So we set up a product sample as a €0 virtual product. In the checkout, we can enable the Zero-Total payment method so we can skip through the necessity of payment details. So the only thing to check for is to change the "billing address" to "shipping address" if the cart subtotal is €0. I'm quite happy with how that worked out.

Finally, some online shops really are only intended for a domestic market. So we know in advance where we are going to be shipping the products. Unfortunately, Magento doesn’t provide any default indication of shipping costs in the cart - waiting until the checkout to calculate the shipping costs or for the user to generate a shipping estimate and update the quote (2 clicks). So when loading the cart we set the current shipping address country to be Ireland and automatically add into the quote the appropriate shipping amount so it shows up straight away. Nice!

Fota Wildlife shortlisted for Golden Spider Award

2009-11-09T12:13:35+00:00

Online Membership and Adoption Process Launched

Great to hear that Fota Wildlife Park was shortlisted for a Golden Spider in the category of Best Community & Charity website. To celebrate we've launched their brand new Membership and Adoption Process!

Firstly, warm congratulations to Fota Wildlife Park for getting shortlisted in the 2009 Golden Spider Awards. For those who don't know what this is, the Golden Spider awards are the Irish internet industry's answer to the Oscars. Competition for a Golden Spider is fierce, and Fota is in extremely good company in the Best Community & Charity Website category.

Fota Wildlife Park is a favourite destination in Cork. A wildlife park where the animals roam freely - the monkey island at Fota is one of the delights of a childhood in Cork.

Fota Wildlife has always had a loyal community of visitors and supporters who are members of the park and visit regularly or who like to support what the park does by adopting an animal for a year.

Membership makes a lovely gift, particularly for families with kids as it gives free access to the park for the year - and comes with all sorts of additional benefits including free access to Dublin Zoo.

Now on their new website, you can make use of the easy online process to become a member and to adopt an animal - and get your certificate and packages in the post. You can also purchase membership and adoption packages as gifts - Christmas presents anyone?!

Fingers crossed for the Golden Spider!

Curtains & Magento

2009-11-02T13:10:54+00:00

Complex Forms and Related Products

Every Magento build is a learning experience. Very few products are straightforward enough to not need some customization of the default Magento setup. Perfect Curtains was no different in this regard.

Curtains create two complications. Firstly, there is the potential for an exponential explosion in the number of simple products, if the number of size intervals aren't kept to a minimum. (Fortunately, the price matrix was kept down to a size of 15 - much more manageable than a previous experience with 400!) Each curtain is a configurable product with the various intervals being the simple products. The customer inputs his/her exact dimensions and an AJAX call selects the next appropriate size interval. Fairly straightforward once you know what you're doing.

Secondly, curtains have a lot of interdependent custom options. There are headings and poles and rails, etc. Many of them can affect the final dimensions that the merchant needs to know and can also affect the price in other ways. So a very customized product order form needed to be created to bring the customer gradually through the ordering process, ensuring that nothing was too complicated, whilst ensuring that all of the necessary information was provided.

With some experience in complex Magento order forms of late, I've decided that building them via static HTML to the point where the user experience is satisfactory before dealing with how they will integrate with Magento is the best way to go. In the case of curtains, where the heading chosen by the customer determined which product would be purchased (and hence which product ID etc, should be sent to the cart) it was always going to be necessary to do an AJAX call to determine the exact product ID. So if we're going to do an AJAX call at this point, why not pull out all the custom option IDs at the same time, dynamically putting them into the names and values of the input fields of the static HTML form?!

The other learning area on this project was Related Products. Two things:

It's pretty useless having a configurable product as a related product in Magento. You can't configure them by default in the related products box so you can't add them automatically at the same time as the main product. In the example of the Roman Blinds Rail in Perfect Curtains, I had to add in the appropriately sized Roman Blind Rail at the time when the customer updates the quote for their Roman Blind after they have input their desired dimensions. It's not perfect, as the customer could simply click "add to cart".
Related Products don't have to be related in the Magento backend. It's not possible by default to import related products via a CSV. So the thought of going through the Magento backend and associating all the related products didn't inspire me. Until I found out that any product can be added to the shopping cart as a "related product". All that is required is an input field with a name of "related_products" and the product ID as the value! Sweet.

What is 3-D Secure?

2009-10-20T16:12:03+00:00

There's been plenty of talk about 3-D Secure over the course of the last few years. Recently, however, we've been hearing a lot more about it as banks move to require that merchants offer this service to customers of their E-Commerce websites. Nevertheless, many merchants are still wondering what 3-D Secure is exactly and what it will mean for their online business.

Originally developed by Visa as Verified by Visa and since adopted by MasterCard, 3-D Secure is an additional layer of security for online credit card and debit card transactions.

Everybody remembers when the Card Security Code (a.k.a. Card Verification Value, CVV, CV2, CVC, CVVC etc...) came in. These are the three digits on the back of your credit card required to verify a transaction when you use a card online or over the phone. The idea is that it verifies the credit card in Card Holder Not Present transaction situations.

3-D Secure is the latest such security measure. Each cardholder will create a password which is associated with the card. When a transaction is underway online, the cardholder will be redirected to a third-party site representing the Card Issuing Authority, and asked for this password to authenticate the online transaction.

The obvious advantage to the cardholder is the added layer of security that a password brings. While card numbers and expiry dates etc may still be copied by fraudsters - they will also need the cardholder's password to use the card.

But how do you, the merchant, benefit?

Without 3-D Secure, if a fraudster on the other side of the globe orders a grand's worth of merchandise from you, and you unwittingly send it off, you are liable for this fraudulent transaction. This is the case even if the transaction is fully authorised by the CVV Number. When the legitimate cardholder complains that a fraud has taken place and demands a chargeback you must return the money paid to you as part of the transaction. So you're out of pocket and your merchandise is lost.

However, if you have used 3-D Secure to authorize the transaction you will not be liable in the case of a fraud. Your goods are gone - but you keep the money paid for them.

At StudioForty9, we will be rolling out the 3-D Secure ready version of our HSBC Payment Gateway Module for Magento. If you have any questions about this module, or if you would like to be notified of its release (estimated as Dec. 1st, 2009)

A rewrite.script file to replace .htaccess files for Expression Engine users on Register365

2009-06-22T15:02:46+00:00

Namesco a.k.a. Register365 are soon to begin the process of moving their users from a 'legacy' H-Sphere system to a new hosting platform. Annoyingly, they don't really mention that the new platform runs on Zeus server software rather than Apache. This is set to cause headaches for a lot of users as urls which are rewritten using the mod_rewrite module will no longer work.

Although users will be automatically moved at some point in the future, you can choose to manually move your data and reconfigure any settings now should you so wish.

Which is what we did for one of our clients over the weekend. Only to find that the "Linux Web Hosting" package is on a Zeus server. Whoever heard of the LZMP stack?

Anyhow, the first casualty was our SEO and human friendly URLs. So if you're using Expression Engine on a Names.co.uk or Register365.ie Zeus server, and you've been dropping the index.php from URLs by using mod_rewrite in a .htaccess file, then this is for you:

Create a rewrite.script file - this goes into the same directory as your old .htaccess file.

Copy the following code into the file:

RULE_0_START:
	# get the document root
	map path into SCRATCH:DOCROOT from /
	# initialize our variables
	set SCRATCH:ORIG_URL = %{URL}
	set SCRATCH:REQUEST_URI = %{URL}
	
	# see if theres any queries in our URL
	match URL into $ with ^(.*)\?(.*)$
	if matched then
		set SCRATCH:REQUEST_URI = $1
		set SCRATCH:QUERY_STRING = $2
	endif
RULE_0_END:

RULE_1_START:
	# prepare to search for file, rewrite if its not found
	set SCRATCH:REQUEST_FILENAME = %{SCRATCH:DOCROOT}
	set SCRATCH:REQUEST_FILENAME . %{SCRATCH:REQUEST_URI}
	
	# check to see if the file requested is an actual file or
	# a directory with possibly an index.  don't rewrite if so
	look for file at %{SCRATCH:REQUEST_FILENAME}
	
	if not exists then
		look for dir at %{SCRATCH:REQUEST_FILENAME}
		if not exists then
			# check it's not webmail or controlpanel or tech_support
			match SCRATCH:ORIG_URL into % with ^/webmail|^/tech_support|^/controlpanel
			if matched then
				goto END
			else
				set URL = /index.php%{SCRATCH:REQUEST_URI}
				goto QSA_RULE_START
			endif
		endif
	endif
	
	# if we made it here then its a file or dir and no rewrite
	goto END
RULE_1_END:

QSA_RULE_START:
	# append the query string if there was one originally
	# the same as [QSA,L] for apache
	match SCRATCH:ORIG_URL into % with \?(.*)$
	if matched then
		set URL = %{URL}&%{SCRATCH:QUERY_STRING}
	endif
	goto END
QSA_RULE_END:

Please note, this code is almost entirely based on work found in this post: http://drupal.org/node/46508 which was customised for Names.co.uk so as not to break the /controlpanel and /webmail urls. We just added a tiny bit of extra customisation to get it working properly for Expression Engine.

You should also note that for the most part a .htaccess file will still run smoothly on Zeus.

Finally, I've had it confirmed by support at Namesco / Register365 that CRON jobs are not supported on Zeus servers - although they might help you out if you plead your case.

A super clean, professional-looking start for CACM Accountants

2009-06-08T14:49:09+00:00

Another extremely quick turnaround. CACM Accountants launches with a satisfyingly clean and crisp design - built on a light CMS.

CACM Accountants is a brand new practice opened this month in the Atrium Business Centre, Blackpool, Cork by Carla Manning A.D.C.A C.P.A.

What we really liked about this project is the speed at which we were able to turnaround a simple, clean design built on top of a light Content Management System so easy to use almost no training is required before the client is stuck-in and tweaking the content and SEO for each webpage.

Nearly every web project starts with "I want something really simple..."! Much of the time, this encouraging opening is followed by a litany of feature requirements and marketing goals which would strain the ingenuity of the most resourceful web developer. In this case, however, Carla knew from the outset what she wanted - which made the design, build and deployment of this website an extremely satisfying exercise for us.

Visit CACM Accountants

Payment Modules: A Beginning

2009-02-13T12:45:44+00:00

Realex Payment Module for Magento

Getting a commission from Realex, Ireland's biggest payment gateway, to produce a custom-built module for Magento to integrate with its services, was an exciting step in our ongoing exploration of the world of Magento extensions.

Knowing that it would be immediately used by online shops, even if only on our small little island, was an added encouragement to get things right.

The module provides 2 modes of use for the client. Realex Redirect transfers the customer from the Magento merchant site to Realex's server for credit card payment. Realex Remote, takes the credit card details on the Magento site and communicates seamlessly with Realex to verify or refuse payment. It allows customers to use a number of different credit cards and currencies and clients can defer settlement of payment or settle immediately.

We have subsquently extended the module to enable 3D Secure authentication. This module is currently undergoing rigorous testing and we hope to release it to the world soon. Watch this space for further developments.

For more information visit: http://www.magentocommerce.com/extension/699/realex-payment-module

Bestselling T-Shirts

2009-01-30T12:30:11+00:00

Nerdyshirts is a successful online shop selling quirky t-shirts based in California. As a company that had a level of Magento prominence due to its inclusion as a test case in the first ever Magento webinar, we were delighted to take on the challenge of customising the look and feel of the shop.

First up was the homepage. Unlike many online shops, Nerdyshirts homepage is it's direct point of sale. Many users may never browse the categories or other products, instead adding items to their shopping cart straight from the homepage. So, getting it right, was clearly important.

Nerdyshirts wanted a tiered list of all of the available t-shirts. Each week, new t-shirts would be made available, so a simple and as automated as possible a way to display both the current week's and last week's t-shirts at the top of the homepage was required. Following on from the newbies, the big boys, the bestsellers were to be shown. These were made configurable both in terms of the number to be displayed and also in terms of the timeframe over which they sold. Finally, all other t-shirts, not in the previous two categories, are displayed.

The other major piece of customisation was in the area of the checkout. Magento, by default, doesn't provide a multipage checkout - something which early on in its development caused a lot of frustration amongst some users due to the complete dependence on javascript and AJAX for the onepage checkout. Magento, does, however, provide a multishipping checkout - which acts like a multipage checkout but allows you (or forces you to - depending on your point of view) to specify an address for each item in your cart. So rather than try to create a multipage checkout from scratch, we adapted the multishipping checkout to mimic the functionality of a multipage checkout.