Adding configurable product options to category list in Magento

At this moment we’re working on 3 projects, all of them require a category list with products that are only configurable and the customer has to be able to choose the options from the configurable and add it directly to the cart without going to the product page.

Step by Step

How can we add all this to the product category list? Sadly it’s not that easy.

  • The configurable.js only works with one product at a time, so it won’t work
  • The configurable options block can’t be called either: we need a specific block for each product on the category list

Using the previous work from the Inchoo blog I want to detail the procedure.

To solve our problem we need to do the following steps. Note that Inchoo people shared with the world their specific configurable js file for this case.

Step 1

Create a template called configurable_category.phtml and put it on the template/catalog/product/view/type folder of your theme (create the folder if it doesn’t exist). Put the following code in that file:

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>

<?php if ($_product->isSaleable() && count($_attributes)):?>
<dl>
    <?php foreach($_attributes as $_attribute): ?>
    <dt><label><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?><?php }?>>
        <div>
        <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select_<?php echo $_product->getId()?>">
        <option><?php echo $this->__('Choose an Option...') ?></option>
        </select>
        </div>
    </dd>
    <?php endforeach; ?>
</dl>

<script type="text/javascript">
    var spConfig_<?php echo $_product->getId()?> = new Inchoo_Product.Config(<?php echo $this->getJsonConfig() ?>);
</script>
<?php endif;?>

The differences with the original configurable.phtml file and this one are that now we create a different spConfig object for each product. This object contains all the product configurable options. We also add the class super-attribute-select with the product id at the end.

Step 2

Now create the configurable_list.js file that is going to handle and print the options on the select. Create this file in the js directory (we’ll place it directly in /js):

if(typeof Inchoo_Product =='undefined') {
    var Inchoo_Product  = {};
}

/**************************** CONFIGURABLE PRODUCT **************************/
Inchoo_Product.Config = Class.create();
Inchoo_Product.Config.prototype = {
    initialize: function(config){
        this.config     = config;
        this.taxConfig  = this.config.taxConfig;
        var settingsClassToSelect = '.super-attribute-select_'+this.config.productId;
        this.settings   = $$(settingsClassToSelect);
        this.state      = new Hash();
        this.priceTemplate = new Template(this.config.template);
        this.prices     = config.prices;

        this.settings.each(function(element){
            Event.observe(element, 'change', this.configure.bind(this))
        }.bind(this));

        // fill state
        this.settings.each(function(element){
            var attributeId = element.id.replace(/[a-z]*/, '');
            attributeId = attributeId.replace(/_.*/, '');
            if(attributeId && this.config.attributes[attributeId]) {
                element.config = this.config.attributes[attributeId];
                element.attributeId = attributeId;
                this.state[attributeId] = false;
            }
        }.bind(this))

        // Init settings dropdown
        var childSettings = [];
        for(var i=this.settings.length-1;i>=0;i--){
            var prevSetting = this.settings[i-1] ? this.settings[i-1] : false;
            var nextSetting = this.settings[i+1] ? this.settings[i+1] : false;
            if(i==0){
                this.fillSelect(this.settings[i])
            }
            else {
                this.settings[i].disabled=true;
            }
            $(this.settings[i]).childSettings = childSettings.clone();
            $(this.settings[i]).prevSetting   = prevSetting;
            $(this.settings[i]).nextSetting   = nextSetting;
            childSettings.push(this.settings[i]);
        }

        // Set default values - from config and overwrite them by url values
        if (config.defaultValues) {
            this.values = config.defaultValues;
        }

        var separatorIndex = window.location.href.indexOf('#');
        if (separatorIndex != -1) {
            var paramsStr = window.location.href.substr(separatorIndex+1);
            var urlValues = paramsStr.toQueryParams();
            if (!this.values) {
                this.values = {};
            }
            for (var i in urlValues) {
                this.values[i] = urlValues[i];
            }
        }

        this.configureForValues();
        document.observe("dom:loaded", this.configureForValues.bind(this));
    },

    configureForValues: function () {
        if (this.values) {
            this.settings.each(function(element){
                var attributeId = element.attributeId;
                element.value = (typeof(this.values[attributeId]) == 'undefined')? '' : this.values[attributeId];
                this.configureElement(element);
            }.bind(this));
        }
    },

    configure: function(event){
        var element = Event.element(event);
        this.configureElement(element);
    },

    configureElement : function(element) {
        this.reloadOptionLabels(element);
        if(element.value){
            this.state[element.config.id] = element.value;
            if(element.nextSetting){
                element.nextSetting.disabled = false;
                this.fillSelect(element.nextSetting);
                this.resetChildren(element.nextSetting);
            }
        }
        else {
            this.resetChildren(element);
        }
        //this.reloadPrice();
//      Calculator.updatePrice();
    },

    reloadOptionLabels: function(element){
        var selectedPrice;
        if(element.options[element.selectedIndex].config){
            selectedPrice = parseFloat(element.options[element.selectedIndex].config.price)
        }
        else{
            selectedPrice = 0;
        }
        for(var i=0;i<element.options.length;i++){
            if(element.options[i].config){
                element.options[i].text = this.getOptionLabel(element.options[i].config, element.options[i].config.price-selectedPrice);
            }
        }
    },

    resetChildren : function(element){
        if(element.childSettings) {
            for(var i=0;i<element.childSettings.length;i++){
                element.childSettings[i].selectedIndex = 0;
                element.childSettings[i].disabled = true;
                if(element.config){
                    this.state[element.config.id] = false;
                }
            }
        }
    },

    fillSelect: function(element){
        var attributeId = element.id.replace(/[a-z]*/, '');
        attributeId = attributeId.replace(/_.*/, '');
        var options = this.getAttributeOptions(attributeId);
        this.clearSelect(element);
        element.options[0] = new Option(this.config.chooseText, '');

        var prevConfig = false;
        if(element.prevSetting){
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

        if(options) {
            var index = 1;
            for(var i=0;i<options.length;i++){
                var allowedProducts = [];
                if(prevConfig) {
                    for(var j=0;j<options[i].products.length;j++){
                        if(prevConfig.config.allowedProducts
                            && prevConfig.config.allowedProducts.indexOf(options[i].products[j])>-1){
                            allowedProducts.push(options[i].products[j]);
                        }
                    }
                } else {
                    allowedProducts = options[i].products.clone();
                }

                if(allowedProducts.size()>0){
                    options[i].allowedProducts = allowedProducts;
                    element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id);
                    element.options[index].config = options[i];
                    index++;
                }
            }
        }
    },

    getOptionLabel: function(option, price){
        var price = parseFloat(price);
        if (this.taxConfig.includeTax) {
            var tax = price / (100 + this.taxConfig.defaultTax) * this.taxConfig.defaultTax;
            var excl = price - tax;
            var incl = excl*(1+(this.taxConfig.currentTax/100));
        } else {
            var tax = price * (this.taxConfig.currentTax / 100);
            var excl = price;
            var incl = excl + tax;
        }

        if (this.taxConfig.showIncludeTax || this.taxConfig.showBothPrices) {
            price = incl;
        } else {
            price = excl;
        }

        var str = option.label;
        if(price){
            if (this.taxConfig.showBothPrices) {
                str+= ' ' + this.formatPrice(excl, true) + ' (' + this.formatPrice(price, true) + ' ' + this.taxConfig.inclTaxTitle + ')';
            } else {
                str+= ' ' + this.formatPrice(price, true);
            }
        }
        return str;
    },

    formatPrice: function(price, showSign){
        var str = '';
        price = parseFloat(price);
        if(showSign){
            if(price<0){
                str+= '-';
                price = -price;
            }
            else{
                str+= '+';
            }
        }

        var roundedPrice = (Math.round(price*100)/100).toString();

        if (this.prices && this.prices[roundedPrice]) {
            str+= this.prices[roundedPrice];
        }
        else {
            str+= this.priceTemplate.evaluate({price:price.toFixed(2)});
        }
        return str;
    },

    clearSelect: function(element){
        for(var i=element.options.length-1;i>=0;i--){
            element.remove(i);
        }
    },

    getAttributeOptions: function(attributeId){
        if(this.config.attributes[attributeId]){
            return this.config.attributes[attributeId].options;
        }
    },

    reloadPrice: function(){
        var price    = 0;
        var oldPrice = 0;
        for(var i=this.settings.length-1;i>=0;i--){
            var selected = this.settings[i].options[this.settings[i].selectedIndex];
            if(selected.config){
                price    += parseFloat(selected.config.price);
                oldPrice += parseFloat(selected.config.oldPrice);
            }
        }

        optionsPrice.changePrice('config', {'price': price, 'oldPrice': oldPrice});
        optionsPrice.reload();

        return price;

        if($('product-price-'+this.config.productId)){
            $('product-price-'+this.config.productId).innerHTML = price;
        }
        this.reloadOldPrice();
    },

    reloadOldPrice: function(){
        if ($('old-price-'+this.config.productId)) {

            var price = parseFloat(this.config.oldPrice);
            for(var i=this.settings.length-1;i>=0;i--){
                var selected = this.settings[i].options[this.settings[i].selectedIndex];
                if(selected.config){
                    price+= parseFloat(selected.config.price);
                }
            }
            if (price < 0)
                price = 0;
            price = this.formatPrice(price);

            if($('old-price-'+this.config.productId)){
                $('old-price-'+this.config.productId).innerHTML = price;
            }

        }
    }
}

Step 3

In order to load the configurable_list.js file when browsing a category we need to add it into the head block in the catalog.xml file. So now open the catalog.xml of your theme and look for thetag. There we now add the js file. Simply add the following lines inside it:

<reference name="head">
      <action method="addJs"><script>configurable_list.js</script></action>
</reference>

Step 4

At this point we have prepared our layout to handle the configurable options block. The only thing that lasts is… that configurable block. We cannot add it to the catalog.xml file, because each configurable block will be different than the previous one (and adding it through the xml layout will show always the same block with the same options). To solve this, we need to dynamically create a block in the phtml file. Simply add these lines before the add to cart button in the catalog/product/list of your theme:

<?php Mage::unregister('product') ?>
<?php Mage::register('product', $_product); ?>
<?php if ( $_product->getTypeId() == 'configurable'): ?>
    <?php echo $this->getLayout()->createBlock('catalog/product_view_type_configurable', '', array('template'=> 'catalog/product/view/type/configurable_category.phtml'))->toHtml(); ?>
<?php endif; ?>

It’s very important to «register» and «unregister» the product global object, because the configurable template gets the product from there. If we don’t do this, then the configurable block won’t be able to load the product.

Step 5

At this point, if you load your category product list, you should be the configurable product options and also select them. But the add to cart button won’t use them when adding the product to the cart. By default there is no form tag, but we need to add it to the list.phtml file, inside the foreach loop, concretly inside the div class=”actions”:

<div class="actions">
    <?php if($_product->isSaleable()): ?>
    <form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product) ?>" method="post" id="product_addtocart_form" <?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
    <?php Mage::unregister('product') ?>
    <?php Mage::register('product', $_product); ?>
     <?php if ( $_product->getTypeId() == 'configurable'): ?>

            <?php echo $this->getLayout()->createBlock('catalog/product_view_type_configurable', '', array('template'=> 'catalog/category/configurable_category.phtml'))->toHtml(); ?>
        <?php endif; ?>
        <button type="submit" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
    <?php else: ?>
        <?php if ($_product->getIsSalable()): ?>
            <p class="availability in-stock"><span><?php echo $this->__('In stock') ?></span></p>
        <?php else: ?>
            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
        <?php endif; ?>
    <?php endif; ?>
        <ul class="add-to-links">
            <?php if ($this->helper('wishlist')->isAllow()) : ?>
                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
            <?php endif; ?>
            <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                <li><a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
            <?php endif; ?>
        </ul>
    </form>
</div>

Here the result:

Category list with configurable product options

Category list with configurable product options

    • Ruslan on February 26, 2012 at 5:09 pm

    Reply

    Thanks,
    I try Inchoo , but do some wrong and can’t see change images on sub-product . With magiczoomplus I can change only main image of configurable products , ( I mean only this my product is configurable, http://www.modatadnes.com/shop/woman/1856.html ) . My aim is to work like in site http://www.pruneshop.com/carteras/cartera-de-cuero-p008463qm.html . I wrote to support site , but nobody answer me . I don’t need to use configurable product if simple product can add in cart different images when I choose Attribute option of one my product, not add in cart only main pic 🙁 I tryed to do taht your tutorial – but again do some wrong – will try soon again . Thanks again for your help

      • Pau on February 26, 2012 at 7:43 pm
      • Author

      Reply

      Hi Rusian,

      What you want is different than the thing explained here. You’ll need to develop it by yourself… (if I find something interesting related to this, I’ll tell you!).

      What I can tell you is that they’re using simple configurable products extension (it’s free, and you’ll find it in Magento Connect).

    • Ruslan on March 12, 2012 at 7:47 pm

    Reply

    Hi ,
    Thanks for help . I did steps like you explain. Code working – I can add in cart choose option , but can’t change image in list when made option ( maybe some I made wrong). Can see here http://www.modatadnes.com/shop/woman.html , but only my product 1856 is now configurable. Can you show me your working site ? And can you give me advice how can change image when change option configurable product.
    Thanks again you and Goran 🙂

    • Simon on March 16, 2012 at 2:30 pm

    Reply

    Thanks for this, its just easier to read and understand than the Inchoo version. You broke it down better for a noob. Thanks.

  1. Reply

    Pau, is it solution can dynamically update price?

      • Pau on March 18, 2012 at 11:06 pm
      • Author

      Reply

      Hi Roman,

      I don’t think so. By default, configurable products in Magento have an specific price. If you use extensions like SimpleConfigurableProducts it won’t change the price unless you modify some javascripts.

      I’m not sure whether that is difficult. I’ll try…

      1. Reply

        SimpleConfigurableProducts do this , iam using this extension. OK i ll try to

    • Ruslan on March 21, 2012 at 6:11 pm

    Reply

    Pau , excuse me again. I have problem can’t change image when choose option in configurable product in list . How can contact with you ? Can you help me ?

  2. Reply

    Hello!
    sorry for disturbing
    I tried to make this wonderful tutorial on my site but nothing happened differently, can you help me? I put an echo “configurable” where it should appear configurable_category.phtml code. Also applied a hello world this configurable_category.phtml and did not appear. Apparently he is not pulling the file. I already checked that all files have been published on the server.
    Thank you.

    http://www.noisdois.com.br/loja/bottoms.html

      • Pau on March 24, 2012 at 6:30 am
      • Author

      Reply

      Hi Weverton,

      I think your problem is related to the Step4. In that step we introduce the line that creates the configurable option blocks for each product directly.

      What I see in the address you attached is that none of those products are configurable, so it’s normal that it doesn’t add the configurable options block.

      In any case, try putting an echo before the configurable block is call (before and after), just to be sure that you’re really in the correct template.

      • Ruslan on March 24, 2012 at 2:36 pm

      Reply

      Hi Weverton ,

      I want to correct some Pau ,
      in step 1 say: Create a template called configurable_category.phtml and put it on the template/catalog/product/view/type folder of your theme
      in 4 step address is correct
      but in step 5 use wrong address
      ‘template’=> ‘catalog/category/configurable_category.phtml instead correct
      ‘template’=> ‘template/catalog/product/view/type/configurable_category.phtml

      I think path must be like in step 1 and 4

    • Michael on March 25, 2012 at 5:20 pm

    Reply

    Pau, thank you for this tutorial. This was a huge feature for a client and you’ve made it very easy. Rusian is correct, that your syntax in STEP 5 is slightly off and the dropdowns did not show until I fixed it.

    LINE 8 should read:
    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/product/view/type/configurable_category.phtml’))->toHtml(); ?>

    When I replaced your code with this it worked flawlessly.

    Thank you again!

      • Pau on March 25, 2012 at 7:04 pm
      • Author

      Reply

      Thanks for the feedback Michael and Rusian!!! I’ve updated the post.

        • Michael on March 27, 2012 at 11:29 am

        Reply

        One last follow up: if you want the items in your search results to display dropdowns you will need to add the configurable_list.js reference to catalogsearch_result_index in catalogsearch.xml!

          • Ruslan on March 27, 2012 at 7:52 pm

          Reply

          Ok. But how can I change image and price – when change select attribute option ?

          1. SimpleConfigurableProducts extension, u can look there how

    • Ruslan on March 28, 2012 at 8:34 am

    Reply

    Thanks Roman,
    I know SCP work Ok in product page ( in product page I do similar with Magiczoomplus , and corlletelab extention ) , but I can’t do same in that PAU extension in page catalog list (here in my site http://www.modatadnes.com/shop/woman.html ) . I want in catalog list to change image and price when change select option , but don’t know where must change code. If somebody want help me can add my skype nick Rexi40
    thanks all

    • David on April 11, 2012 at 3:27 pm

    Reply

    Hey,
    I’m struggling to update the dropdown to include the price, and also for it to submit the correct price. Our configurable products have different prices set, and after completing the tutorial they are just adding to basket all with the same price. The price is from the first associated product and doesn’t include any tax.

    I assume that I need to update the javascript class to get the new prices, but I’m at a loss as to how the js class is getting any of it’s information. I assume its `$$(settingsClassToSelect)` but I’m not sure.

    Any thoughts would be great, thanks.

    • Surya on April 20, 2012 at 12:03 pm

    Reply

    I have use this code, but when i go to add to cart its open product detail page not to basket page,

  3. Reply

    I just want to say thank you as I have been looking for this solution in the past. The tutorial works except for step 4, as some has already pointed out, the template path in the list.phtml should match step 1.

    Thanks again

    • antoineg on May 15, 2012 at 12:04 pm

    Reply

    Nice post, working nice for me but I would love to be able to add sub-product in cart and not parent, like the product view page does.

    The form action is updated with product id and same for a hidden field named “product”.

    action=”http://hp.local/checkout/cart/add/uenc/aHR0cDovL2hwLmxvY2FsL25vcy1wcm9kdWl0cy5odG1s/product/52/”

    Switches to /product/56 when selecting options
    Same here : —> value=”56″

    How to do that easily with JS ?

    • Menelom on May 22, 2012 at 5:58 am

    Reply

    Yes … the design is clearly needed to be changed 🙂
    What would be brighter , nebudu (

    • Darren on June 15, 2012 at 12:10 pm

    Reply

    Thank you for this excellent post. I’ve tried many times and searched for a long time for this.

    I’m a bit confused because it only works when list.phtlm in step 4 is…

    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/product/type/configurable_category.phtml’))->toHtml(); ?>

    …and step 5 is…

    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/product/view/type/configurable_category.phtml’))->toHtml(); ?>

    …yet the configurable_category.phtml is located in /catalog/product/view/type/

    Unfortunately I too am looking for dynamic price updating so I hope a solution can be found on this awesome thread.

    Thanks again!

    • Michael on June 16, 2012 at 6:44 pm

    Reply

    How can I exclude options from the drop down menu that are OUT OF STOCK?

    • Marc on July 11, 2012 at 2:56 pm

    Reply

    Thanks for this. Really helped out.

    • Andy on July 23, 2012 at 9:28 am

    Reply

    I get all working except that the “Add to Cart” Button adds the selected product directly to cart instead of linking to the product detail page. Any hints available 😉

    Kind regards and many thanks for the tutorial, Andy

  4. Reply

    Thanks for the post. Its really a good one. I have tried several times to do this by following instructions from http://inchoo.net/ecommerce/magento/display-multiple-configurable-products-with-options-on-one-page-in-magento/ – but didn’t get success. I use it in the upsell block and all works perfect.

    I was wondering if the upsell products can be added to the cart with the main product. If you guys have any idea then please post it here 🙂

    • Steve on August 2, 2012 at 12:10 pm

    Reply

    Thanks for this great post.

    The script works well but the price block does not update when the option is selected.

    Has anyone found a solution on how do get it to update.

    Many thanks.

    • Marc on August 4, 2012 at 6:45 pm

    Reply

    I was able to combine this technique with the Simple Configurable Products Extension. It updates the price and image, and also includes a quantity input field. No styling at all. Not completely tested, so please post any bugs.

    https://github.com/illuminatistudios/magento-configurable-simple

    1. Reply

      Hello Marc, can you please guide me on integrating product price. I am using Simple Configurable Products Extension.

      Waiting for your reply 🙂

        • Marc on August 6, 2012 at 3:30 pm

        Reply

        It’s integrated with the extension. I’d recommend uninstalling your current version of Simple Configurable Products, then manually install the version in our repository on Github. Once thats done, you’ll have enable it in the admin panel under System > Configuration > Advanced > SCP Config > SCP Product List > Enable Configurable Product List.

    • Atul on August 27, 2012 at 9:29 am

    Reply

    Hi

    i m new to magento can you please help
    i want the same configurable drop down in crosssell option (checkout option)
    please help….

    • Joey on September 7, 2012 at 2:24 pm

    Reply

    Hi,

    Great tutorial! However, I bumped into a problem. I executed all the steps however the options aren’t loaded in the dropdown. Do you have an idea where it might go wrong?

    Kind regards,

    Joey Gomes

    • Joey on September 7, 2012 at 2:27 pm

    Reply

    Hi,

    I already found the problem, the js file wasn’t loaded correctly when I placed it in the catalog.xml. I just placed it in the page.xml and it works fine now. Thanks!

    • Joey on September 7, 2012 at 3:04 pm

    Reply

    Hi,

    I have to come back at my previous comment, adding the js in the page.xml makes the custom options to show, however when I try to add them to the cart, the product page shows and it says i have to specify the product options.

    Does this have to do with step 5?

    Cheers,

    Joey

    • John on September 27, 2012 at 12:00 pm

    Reply

    Hi,

    I’ve got the same problem as Joey, when I click the add-to-cart button, it redirects to the product page with the “Please specify the product’s option(s).” message.
    I tried both, adding the JS through page.xml and catalog.xml, same effect.

    @Joey: Found the solution yet?

    • Matt on October 13, 2012 at 12:11 am

    Reply

    Same issues as John and Joey, Ill post a solution if I find it.

    • Adam on October 23, 2012 at 1:57 pm

    Reply

    Hi,

    Got it pulling in the options fine however on 1.7 CE it’s not pulling through the price attribute on the options inside the drop down like it does on the product page. Therefore it won’t update the price for the particular product you change attribute for.

    Anyone else having this problem or have a solution for it?

    Thanks,
    Adam

  5. Reply

    Hello

    First of all thanks for sharing this tutorial

    Here is the solution for the problem

    Update following line in step 5 :

    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/category/configurable_category.phtml’))->toHtml(); ?>

    Replace it with :

    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/product/view/type/configurable_category.phtml’))->toHtml(); ?>

    This will work fine

    Enjoy Magento 🙂

      • Pau on November 2, 2012 at 6:31 am
      • Author

      Reply

      Thanks, Shailendra. I’ve updated the post!

  6. Reply

    Hi all.

    Having an issue with it where on the list page when you assign the options to a product its assigning the attributes of the product to the configurable product but not using the simple product with the attributes instead. We created the site with configurable product as a template with the images then created simple products off that with the options required.

    Take a look at the picture on the link below to see what i mean. The top one is created from the list page with the code in this tutorial and the bottom one is from the individual product page.
    http://www.hillsidegroup.co.uk/lordwholesale-configurable-options.jpg

    The issue is that, the prices weren’t assigned to attributes they were assigned to the simple products such as the bottom one with the long name in the image. Is there anyway for it to pick up the simple product from the attributes rather than just adding the attributes to the configurable product template.

    I hope you understand what I’ve been going on about.

    Thank you for any help about this

    Kind regards

    Alex

    • Julian on November 12, 2012 at 8:46 am

    Reply

    I have the same problem as John, Joey and Matt. Shailendra’s solution didn’t help.

      • carlos on February 17, 2013 at 3:00 am

      Reply

      Same problem for me, do you find the solution?

      • carlos on February 17, 2013 at 3:33 am

      Reply

      OK, In my case, I am using list view as default view, I only revised the Grid view section.
      I revised the list view section,this works~
      Thanks for this post and looking forward to auto updating price function!

    • Luca on November 14, 2012 at 9:16 am

    Reply

    Hello everyone,
    this seems almost to work, dunno why but I can get the dropdown but they don´t show options, just fixed to “choose your options”…..got version 1.6.1

    someone knows?

    thanks

      • Reid on August 2, 2013 at 12:47 pm

      Reply

      Make sure prototype.js is called in the document .

    • angel on November 15, 2012 at 11:31 am

    Reply

    Hello, I try this code but it give me an error:

    Fatal error: Call to undefined method Mage_Catalog_Model_Product_Type_Simple::getConfigurableAttributes() in app/code/core/Mage/Catalog/Block/Product/View/Type/Configurable.php on line 59

    how can I solve it?

    Thanks

      • Axel on November 30, 2012 at 11:35 pm

      Reply

      The evidence of the issue is in the error.

      You are trying to call “getConfigurableATtributes()” on a SImple Product object.

      I would recommend changing:
      isSaleable() && count($_attributes)):?>

      to

      isSaleable() && count($_attributes) && $_product->isConfigurable()):?>

      This will make sure that the attribute code is only run against configurable products, which inevitably have attributes.

    • UmaNatarajan on November 23, 2012 at 6:34 am

    Reply

    I want to display cross sell products with configurable options,above code seems almost to work, I can get the dropdown but they don´t show options, just fixed to “choose your options”….I am working on magento1.7.2 version.How can i get the color and size dropdown in cart pagr for cross sell products? any one have an idea?

    • Deek on December 4, 2012 at 4:56 am

    Reply

    Hi i did all these steps but i didn’t get drop down .. and also i didn’t get any error.. can you help me?

    • hemisha on January 31, 2013 at 4:25 pm

    Reply

    hi

    even i didnt get the dropdown option….can u pls explain further ?

    • Prashant on February 13, 2013 at 9:54 am

    Reply

    Hello

    I follow the step as define and i got the drop down of attributes for configuration product but when i select any option from drop down the price info was not changed. it seems as old so how can i solved this issue . any idea?

      • Pau on February 13, 2013 at 11:12 am
      • Author

      Reply

      Hi Phrashant, please note that by default, magento only uses the configurable product price, so the prices won’t be updated when you change the option. That will need more development…

    • Karthi on February 14, 2013 at 9:47 am

    Reply

    Thanks.
    This works great :))

    • Ashish on February 23, 2013 at 5:47 pm

    Reply

    I used your suggestion on this page,,https://ledworld.nl/led-spots/gu10.html
    but normal product directly added to cart , but configurable product redirect to product page
    what is the reason behind it

    • kris on March 14, 2013 at 5:07 am

    Reply

    Hi I’m having issues getting this working. Can you please read though your process again and be a little more clear.. You’re kinda vauge on some steps.

    • kris on March 14, 2013 at 7:21 am

    Reply

    You’re the man. I figured out why it wasn’t working I had ability to select grid or list view disabled and i had it defaulted to grid view. You saved me a lot of coding! Nice job! Go though and read your instructions one more time though they could be a little clearer.

  7. Reply

    Anyone know how to make color swatches appear on the grid view? An example site is: http://shop.camelbak.com/packs/bike/browse-all/l/110

    Thanks in advance!

  8. Reply

    You don’t need to unregister and register $_product and create the block dynamically, you can declare the block in your layout and reuse it without problems if you set the product to the block instance before calling $block->tohtml() ( just use $block->setProduct($_product); )

  9. Reply

    Hi ,

    I am using this script but i am getting problem.
    Its not working fine suppose i have more five configurable product and if i add to cart product number 5then it adding product number 1 in cart.

    Please suggest me what i am doing wrong.
    Its very urgent.

    • maria on April 26, 2013 at 9:46 pm

    Reply

    Hi, I’m having this same problem: I want to display cross sell products with configurable options,and it seems ok – I can get the dropdown but they don´t show options, just fixed to “choose your options”….I am working on magento1.7.2 version.How can i get the color and size dropdown showing up?

    • Ben on May 26, 2013 at 12:46 pm

    Reply

    Hello,
    thanks for the extension. Is it possible to disable the “out of stock” option?

    http://www.w3schools.com/tags/att_option_disabled.asp

    • Atwix on June 4, 2013 at 1:20 pm

    Reply

    Hi! Thanks for the useful post. We have some recommendations on this topic as well http://www.atwix.com/magento/configurable-product-options-category-view/. You are welcome to look through it and leave your thoughts in the comments.

    • Jai on July 5, 2013 at 7:55 am

    Reply

    I want to implement same fucntionality for UPSELL product so need help please

    • loy on July 29, 2013 at 7:08 am

    Reply

    Is it possible to display all bundled products in a view.phtml. what all changes i need to make in the above code for displaying the bundled products.

    • Jai on July 30, 2013 at 1:25 pm

    Reply

    When I click ‘Add to Cart’ it display detail page with message ” Please specify the product’s option(s)” . How to add validation so ‘Add to cart’ display alert message for selection of color and size?

    Any help will be god’s grace

    • Reid on August 1, 2013 at 10:48 pm

    Reply

    Great instruction, thank you.

    The configurable select menus are appearing for each item in the category view, but the options aren’t showing in the menus. For each product, in my error console, it shows:

    Uncaught ReferenceError: Inchoo_Product is not defined
    (anonymous function)

    I can see in the source that it is looping through and grabbing the product ID. I have the js in the head of the document.
    It seems several people have had this issue. Any ideas?

      • Reid on August 2, 2013 at 12:25 pm

      Reply

      Resolved. The configurable_list.js was not in the head properly. It needs to follow prototype.js.

        • Matt on December 6, 2013 at 4:27 pm

        Reply

        What if there is no prototype.js in my catalog.xml file? Should I just add it. I have tried adding it to page.xml which got the dropdowns to work but then caused problems with list view page.

    • thomas.wolter@object-source.com on October 2, 2013 at 1:41 pm

    Reply

    HI,

    Great tutorial. Thanks a lot.

    It works for me.

    But I need to add the Quantity field to it.
    How can I do that?

    Thanks

    • thomas.wolter@object-source.com on October 2, 2013 at 1:56 pm

    Reply

    Hi again,

    I added now the Quantity input to each product. However when I click ‘Add to Cart’ it display detail page with the message ” Please specify the product’s option(s)” .

    Any help??

      • s0trek on January 26, 2014 at 6:49 pm

      Reply

      I am getting the same error. any luck??
      anyone has solved this??

      i m following exactly the steps explained above.

      Thanks

        • Bhavik on October 20, 2014 at 1:51 pm

        Reply

        Hi,

        I’m getting this error too.
        have any solution?

        Thanks

  10. Reply

    Great Post. For step 5 my theme is a little different and it doesn’t have div class action. How might I get add to cart button to apply? Right now it is just pulling up a box with product options.

    getPriceHtml($_product, true) ?>
    isSaleable()): ?>

    getTypeId() == ‘configurable’): ?>
    getLayout()->createBlock(‘catalog/product_view_type_configurable’, ”, array(‘template’=> ‘catalog/product/view/type/configurable_category.phtml’))->toHtml(); ?>

    getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
    <button type="button" title="__(‘Add to Cart’) ?>” class=”button btn-cart” onclick=”setLocationAjax(‘getAddToCartUrl($_product) ?>’,’getId()?>’)”>__(‘Add to Cart’) ?>

    <button type="button" title="__(‘Add to Cart’) ?>” class=”button btn-cart” onclick=”showOptions(‘getId()?>’)”>__(‘Add to Cart’) ?>
    <a href='getUrl(‘ajax/index/options’,array(‘product_id’=>$_product->getId()));?>’ class=’fancybox’ id=’fancyboxgetId()?>’ style=”display: none;” >__(‘Add to Cart’) ?>

    • Sean Russell on March 18, 2014 at 1:39 pm

    Reply

    Hey thanks for the post. After following the steps and changing System – configuration – catalog – frontend – list mode
- list (default)/grid, I have got the options showing correctly but get sent through to the product page with the message Please specify the product’s option(s). Has anyone sussed this out yet?

    Thanks

    • saravana on April 21, 2014 at 11:02 am

    Reply

    Hi ,
    Nick tutorial, i got one problem, i am not getting drop down options, any one please tell me…….

      • sandeep on December 10, 2014 at 1:52 pm

      Reply

      same problem pls let me knw if u found any solutions

    • Reshma on June 4, 2014 at 6:16 am

    Reply

    Hi. I got one problem. When in change the option there is no change in price. how to solve this?

      • AndreaL on December 18, 2014 at 3:36 pm

      Reply

      Same problem here 🙂
      If anyone can help I´d be grateful. (Magento version 1.9)

      • AndreaL on December 19, 2014 at 8:44 am

      Reply

      Solved. The js file was not loaded properly in my case.

        • Jerico on June 30, 2016 at 3:13 pm

        Reply

        Hi AndreaL,

        I have the same issue too, how did you able to solve it. what do you mean js not loaded properly.

    • manoj on June 25, 2014 at 11:33 am

    Reply

    There is no value only Drop down displayed.

    • manoj on June 25, 2014 at 2:48 pm

    Reply

    Hi i follow your instruction after complete all the step my page only show drop down box there is no value but details page have 4 value. so How to fix this error ?????

    • Nikul Panchal on July 24, 2014 at 12:12 pm

    Reply

    I am using magento version 1.9 but this doesn’t work for me. Will it be work for version 1.9 ?

    • Akanksha on April 18, 2015 at 4:19 am

    Reply

    hey i follow instructions and got success in showing configurable products on category page but on selecting options price not getting change.. i tried a lot by making changes but not get success yet. Please help

    • Rushi on April 18, 2015 at 7:15 am

    Reply

    There is no value only Drop down displayed.

    • durai on September 26, 2015 at 6:24 am

    Reply

    Call to a member function getTypeInstance() on null in app\code\core\Mage\Catalog\Block\Product\View\Abstract.php on line 44

    • hunny on December 23, 2015 at 6:16 am

    Reply

    Hi great post but i got one problem. When i choose value from dropdown, the product price change to 0.00. http://fataakse.in/test.html.
    Please help me to fix this issue.

    • Bilal Abdeen on February 4, 2016 at 2:04 am

    Reply

    Excellent effort. However, I faced the same problem, which many people complained about (No Options in the drop down element.) As some people indicated, this is because the js file was not loaded. After very long and painful research, I found the following solution (Thanks to “Vinod VT” @ http://stackoverflow.com/questions/26093139/how-to-add-include-js-file-into-magento-theme)

    Basically, the solution is (1) to ignore Step 3, and (2) add a line “close” the bottom of the script (configurable_list.phtml).

    So, instead of the following code for (configurable_list.phtml):
    …..

    var spConfig_getId(); ?> = new Inchoo_Product.Config(getJsonConfig(); ?>);

    Use the following:
    <script type="text/javascript" src="getSkinUrl(); ?>js/configurable_list.js”>

    var spConfig_getId(); ?> = new Inchoo_Product.Config(getJsonConfig(); ?>);

    Does it work for you?

    • Bilal Abdeen on February 4, 2016 at 2:08 am

    Reply

    As I said above, I managed to fix the options display problem. However, I could not, yet, solve the following problem, which few people complained about. If you found a solution, please share it.

    The problem is that the (Add to Cart) button takes the user to the product’s view page, instead of the Cart page!

  11. Reply

    Hi,

    First, thank you for the guide, I did great help me out. The only things now how can I enforce user to select the options before click ‘add to cart’. maybe show the button after options has been select..

    • Alberto Braschi on October 9, 2016 at 10:35 pm

    Reply

    tested in the 1.9.2.4 version and working perfect.
    only need to review the format – enconding – the js gave me a lot of work rs
    great code!

    • Alejandro on November 14, 2016 at 10:50 pm

    Reply

    Hi, thanks for the tutorial. I follow all the steps and it’s working!
    But I have one question, I will like that the user can also select the quantity for the selected product. I found this solution http://stackoverflow.com/questions/12286716/get-all-simple-product-from-a-configurable-product-in-magento-product-view
    Basically inside configurable_category.phtml I add this script

    spConfig.getIdOfSelectedProduct = function () {
    var existingProducts = new Object();
    for (var i = this.settings.length – 1; i >= 0; i–) {
    var selected = this.settings[i].options[this.settings[i].selectedIndex];
    if (selected.config) {
    for (var iproducts = 0; iproducts < selected.config.products.length; iproducts++) {
    var usedAsKey = selected.config.products[iproducts] + "";
    if (existingProducts[usedAsKey] == undefined) {
    existingProducts[usedAsKey] = 1;
    } else {
    existingProducts[usedAsKey] = existingProducts[usedAsKey] + 1;
    }
    }
    }
    }
    for (var keyValue in existingProducts) {
    for (var keyValueInner in existingProducts) {
    if (Number(existingProducts[keyValueInner]) < Number(existingProducts[keyValue])) {
    delete existingProducts[keyValueInner];
    }
    }
    }
    var sizeOfExistingProducts = 0;
    var currentSimpleProductId = "";
    for (var keyValue in existingProducts) {
    currentSimpleProductId = keyValue;
    sizeOfExistingProducts = sizeOfExistingProducts + 1
    }
    if (sizeOfExistingProducts == 1) {
    alert("Selected product is: " + currentSimpleProductId)
    }
    }

    and I change the select to this

    <select name="super_attribute[getAttributeId() ?>]” id=”attributegetAttributeId() ?>” class=”required-entry super-attribute-select_getId()?>”>
    __(‘Choose an Option…’) ?>

    obviously this is not enough to make it work, but I think I’m in the correct path. I’m not a Magento or Java expert so if someone can help me will be awesome!

Leave a Reply

Your email address will not be published.