This tutorial will demonstrate some functionality specific to the Configurable product type. This post complements the overview of this product type, which you can find in my previous posts: Magento Configurable Product Type (Part 1) and Magento Configurable Product Type (Part 2).

I will lead you through developing a simple Magento extension that will make a small change in the way configurable products are presented in the front-end. Normally, when you open a product detail page of a configurable product its options are not selected. Because of this a customer is unable to add the product to cart immediately. We are going to load configurable products with their options already pre-selected. The test shop the extension is developed for runs sample product data, which you can download here.

Before we start, take a look at the screenshot of a product page. This T-shirt has an option “size” and after the page is loaded the drop-down list has no selected value:

First step is to create a basic directory structure for our extension. I will put it into the local code pool, package “Solvingmagento”. The name of the extension is “ConfigurablePreSelect”.

	app
		-code
			-local
				-Solvingmagento
					-ConfigurablePreSelect
						-Model
						-etc

We also have to add an XML file Solvingmagento_ConfigurablePreSelect.xml to the /app/etc/modules directory. Its content is standard:

<?xml version="1.0"?>
<config>
        <modules>
                <Solvingmagento_ConfigurablePreSelect>
                        <active>true</active>
                        <codePool>local</codePool>
                </Solvingmagento_ConfigurablePreSelect>
        </modules>
</config>

How are we going to pre-select configurable attributes? The selection of the attributes is controlled by the spConfig Javascript object. If you supply it with property defaultValues then the script will automatically select respective items in the option drop-down lists.

The spConfig uses configuration data generated by block class Mage_Catalog_Block_Product_View_Type_Configurable. Its function getJsonConfig goes through all the configurable settings of a product and compiles an object that is then passed to the front-end Javascript. This process has been discussed in more details in the first part of the Configurable product type overview. In the first lines of this function the system checks if the current product has pre-configured values:

$preconfiguredFlag = $currentProduct->hasPreconfiguredValues();
if ($preconfiguredFlag) {
    $preconfiguredValues = $currentProduct->getPreconfiguredValues();
    $defaultValues       = array();
}

Pre-configured values can be an instance of the Varien_Object class with a super_attribute property. This property should contain an array with keys corresponding to configurable attribute IDs and elements containing values for these attributes.

We are going to inject this preconfigured_values property into every product object of configurable type whenever a product detail page is displayed. For this purpose we are going to listen to an event dispatched after a product object is initiated. This event is catalog_controller_product_init_after and it is dispatched by function Mage_Catalog_Helper_Product::initProduct, which itself is called when a product detail view is generated. In our observer we will have to check if we are on a detail page, because this event can also be dispatched from pages generated by Mage_Wishlist and Mage_Checkout modules.

Let’s add the observer configuration to the config.xml file of our module:

<config>
        ...
        <frontend>
                ...
                <events>
                        <catalog_controller_product_init_after>
                                <observers>
                                        <solvingmagento_configurablepreselect>
                                                <class>solvingmagento_configurablepreselect/observer</class>
                                                <method>preSelectConfigurable</method>
                                        </solvingmagento_configurablepreselect>
                                </observers>
                        </catalog_controller_product_init_after>
                </events>
                ...
        </frontend>
        ...
</config>

Note that the event configuration is within the <frontend> node. This will restrict our observer to listening only to the front-end event. If this event is dispatched from the back-end, our observer will ignore it.

Since we are addressing the observer class by a configuration path solvingmagento_configurablepreselect/observer we must define it as well:

<config>
        ...
        <global>
                ...
                <models>
                        <solvingmagento_configurablepreselect>
                                <class>Solvingmagento_ConfigurablePreSelect_Model</class>
                        </solvingmagento_configurablepreselect>
                </models>
                ...
        </global>
        ...
</config>

Now it is time to create the observer class. As it is often with observers, it does not need to extend any parent class. Important is, however, that our observer has a public function preSelectConfigurable, which we’ve defined earlier in the event-observer configuration.

Here are the first lines of this function:

class Solvingmagento_ConfigurablePreSelect_Model_Observer
{
        public function preSelectConfigurable(Varien_Event_Observer $observer)
        {
                $product    = $observer->getEvent()->getProduct();
                $request    = Mage::app()->getRequest();
                $controller = $request->getControllerName();
                $action     = $request->getActionName();
                $candidates = array();
        }
}

First we get the product object passed by the event. We also take a request object and get the names of the current controller and action. These we will check to find out if we are indeed on a product detail page of a configurable product. We add this check after initializing an empty array $candidates, which we are going to use to fill with possible configurable options:

if (($action === 'view') && ($controller === 'product') && ($product->getTypeId() === 'configurable')) {
}

Now what we are going to do is:

1. get a list of the configurable attributes of the configurable product (it ca be only one attribute or many);
2. get the first associated product, which is saleable;
3. retrieve the associated product’s values for the configurable attributes and pack these attribute-values combinations into the $candidates array;
4. set the $candidates array as pre-configured values for our configurable product.

We can get the list of configurable attributes by fetching a type instance of a configurable product and calling the getConfigurableAttributes method. The associated products are also returned by calling the type instance’s method getUsedProducts:

$configurableAttributes = $product->getTypeInstance(true)
            ->getConfigurableAttributes($product);

$usedProducts = $product->getTypeInstance(true)
            ->getUsedProducts(null, $product);

You may wonder, why in the call to the getUsedProducts function the first parameter is null. After all, shouldn’t we pass a list of configurable attributes there so that only associated products with attributes’ valid values are returned? Well, in this case it is unnecessary because the earlier call to method getConfigurableAttributes has already generated a list of child products. And these products are already filtered by the attributes required by our configurable. This list is now can be retrieved from the $product object’s property _cache_instance_products, which the product type instance does without querying the database again.

With attributes and products ready we can start a loop through associated products to find one that is saleable and get its values for configurable attributes:

foreach ($usedProducts as $childProduct) {
        if (!$childProduct->isSaleable()) {
            continue;
        }
        foreach ($configurableAttributes as $attribute) {
            $productAttribute   = $attribute->getProductAttribute();
            $productAttributeId = $productAttribute->getId();
            $attributeValue     = $childProduct->getData($productAttribute->getAttributeCode());
            $candidates[$childProduct->getId()] =
                                        array($productAttributeId => $attributeValue);

        }
        break;
    }

The elements of the configurable attribute list are of type Mage_Catalog_Model_Product_Type_Configurable_Attribute, which is not the same as the class representing the product attribute, Mage_Catalog_Model_Resource_Eav_Attribute. We get attribute instances from the items:

$productAttribute   = $attribute->getProductAttribute();

The ID and name of the configurable attribute we get from the $productAttribute object. We use the name, or attribute_code, to get the attribute’s values from an associated products At the end of the loop, the $candidates array is in a form that can be passed on as pre-configured values. The object to hold these values can be an instance of the Varien_Object class. We create such an instance and assign the $candidates array to its property super_attribute:

$preconfiguredValues = new Varien_Object();
$preconfiguredValues->setData('super_attribute', $candidates);
$product->setPreconfiguredValues($preconfiguredValues);

Our function does not need to return anything. The product object is accessed by reference and the changes we mage are available to the code that does further processing.

Since the product now has pre-configured values the “preconfiguredFlag” from Listing 2 is set to true. Further in the getJsonConfig function these values a passed to the $defaultValues array, which is later converted into a property under the same name in the spConfig Javascript object in the front-end:

if ($preconfiguredFlag) {
        $configValue = $preconfiguredValues->getData('super_attribute/' . $attributeId);
        if ($configValue) {
                $defaultValues[$attributeId] = $configValue;
        }
}

That is it, the extension is ready. Clear the shop cache and open a configurable product. Its configurable options must now come pre-selected.

Incidentally, this would also work for products with more than one configurable attribute. Create such a product and give it a try.

Conclusion

While developing this simple extension we’ve tackled the topic of configurable product type and employed some of the methods provided by class Mage_Catalog_Model_Product_Type_Configurable to alter the front-end behavior of configurable products. With this practical demonstration we’ve gained insight into the internal works of the Configurable type. Get the Magento Configurable type extension code from GitHub.