Magento – way to automatically select the first colour swatch on the product page

I have built this, in a modular way. Will post the code on github soon.

It triggers on a JavaScript call and fetches the images with Ajax. So it does not effect page speed or caching system.

PM me if you want the code asap. Otherwise follow me on Twitter @willemwigman to hear when I post the code.

Edit: I've put the code on github https://github.com/wigman/AjaxSwatches

Have a look at /skin/frontend/rwd/default/js/configurableswatches/swatches-product.js

It overrides many of the functions in configurable.js, and is responsible for loading all of the <select> fields with their options upfront rather than as they are selected (which is how configurable.js handles them). I'm guessing there is a swatches-product.js or similar in the Porto theme (don't have the theme, so I can't confirm).

I wish I could offer a more helpful answer, but I've only come across your question because I'm having a similar problem. I may be able to update later once I've investigated further, but I hope this at least offers some direction in the meantime.

Update:

I think you may be looking for this, which is on line 612 of swatches-product.js:

/**
 *
 * Reset all the options and their availability, the attribute labels, and the stock status
 **/
resetAvailableOptions: function() {
    var opt = this._E.optionOver;

    if (opt) {
        var attr = opt.attr;

        // Reset last label
        attr._e.attrLabel.innerHTML = attr._e.selectedOption ? this.getOptionLabel(attr._e.selectedOption) : '';

        // Reset current action
        this._F.currentAction = false;

        // process
        if (!attr._f.isCustomOption) {
            // Reset the availability of all options
            this.setAvailableOptions();
            // Set stock status
            this.checkStockStatus();
        }

        // reset the last optionOver
        this._E._last.optionOver = false;
    };
},