Preselection of Magento Configurable Products Attributes

October 22, 2012 Alex Huk Tips&Tricks
Preselection of Magento Configurable Products Attributes

The first time you load a page with configurable products, no attributes are selected. But what if you want the options to be selected by default to promote this product configuration or for any other reasons? This is an issue with a solution.

A product attributes data is passed into spConfig object. The object is initialized in the template


Attributes configuration object has the following structure:

Magento doesn’t build all the <select> elements with PHP. It rebuilds <select> with the help of JS as soon as any attribute changes. In .phtml template mentioned above we can see that <select> tags and one option only are formed with PHP.

Preselection therefore should be realized by using JS. Let’s open the following file:


In object initialization method we can see observer tagging the “change” event of each of the attributes selects.

Event response triggers selects rebuilding by the script. We can see it in the method below:

As well as select configuring and rebuilding method itself


It makes no sense to follow all the called methods. We have the required data.

To preselect attributes we need the following source data:

1. Attributes in the priority queue (the choice of the next attribute depends on the choice of the previous one)

Here is the example of the simple array with attributes in the priority queue:

Array was sorted with PHP; we are not going into all of the uses of the script.

2. Attributes ID and their options values

In the current example, it is an object with the following structure

We’re interested in Conditions field only. As we see, “conditions” is an object with data

Attribute Id   => Option Value

Let’s check out the select element to ensure that existing data is enough.

There are two ways to preselect attributes:

1. Select the option in attribute select alternately and call the select rebuild method.

2. Emulate the alternate option selection in the attributes.

Variant  1:


Variant 2 :

As a matter of fact, the second variant is same as the first one, except in the first example we implicitly call the spConfig.configureElement(select) method; but we might as well use the selects choosing emulator by making beforehand the option selected.

Event.simulate(select, ‘change’);

This way is better as Magento methods are not used; file root/js/varien/configurable.js source code replacement will therefore be negligible.


The second variant works properly in Chrome, IE and Opera browsers. There are issues in Firefox though: not all the attributes are preselected (as a rule, 2-3 ones only). This is due to the fact that looping through the attributes takes more time than selects rebuild process.

1 comment

  1. According to js/varien/configurable.js (Variant 2):

    (function(){ …
    should be placed (replaced)?

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *