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


99 Comments

Ruslan · February 26, 2012 at 5:09 pm

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 · February 26, 2012 at 7:43 pm

    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 · March 12, 2012 at 7:47 pm

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 · March 16, 2012 at 2:30 pm

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

RomanPasichnik · March 18, 2012 at 10:05 pm

Pau, is it solution can dynamically update price?

    Pau · March 18, 2012 at 11:06 pm

    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…

      RomanPasichnik · March 18, 2012 at 11:39 pm

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

Ruslan · March 21, 2012 at 6:11 pm

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 ?

Weverton Naves · March 24, 2012 at 3:07 am

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 · March 24, 2012 at 6:30 am

    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 · March 24, 2012 at 2:36 pm

    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 · March 25, 2012 at 5:20 pm

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 · March 25, 2012 at 7:04 pm

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

      Michael · March 27, 2012 at 11:29 am

      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 · March 27, 2012 at 7:52 pm

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

          RomanPasichnik · March 27, 2012 at 8:57 pm

          SimpleConfigurableProducts extension, u can look there how

Ruslan · March 28, 2012 at 8:34 am

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 · April 11, 2012 at 3:27 pm

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 · April 20, 2012 at 12:03 pm

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

Jonathan Wong · April 27, 2012 at 1:21 pm

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 · May 15, 2012 at 12:04 pm

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 · May 22, 2012 at 5:58 am

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

Darren · June 15, 2012 at 12:10 pm

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 · June 16, 2012 at 6:44 pm

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

    jackie · June 9, 2018 at 8:16 pm

    I know it’s been years but any chance anybody knows the answer to this question about out of stock products?

Marc · July 11, 2012 at 2:56 pm

Thanks for this. Really helped out.

Andy · July 23, 2012 at 9:28 am

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

Golam Faroque · July 26, 2012 at 9:27 am

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 · August 2, 2012 at 12:10 pm

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 · August 4, 2012 at 6:45 pm

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

    Golam Faroque · August 6, 2012 at 6:33 am

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

    Waiting for your reply 🙂

      Marc · August 6, 2012 at 3:30 pm

      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 · August 27, 2012 at 9:29 am

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 · September 7, 2012 at 2:24 pm

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 · September 7, 2012 at 2:27 pm

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 · September 7, 2012 at 3:04 pm

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 · September 27, 2012 at 12:00 pm

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 · October 13, 2012 at 12:11 am

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

Adam · October 23, 2012 at 1:57 pm

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

Shailendra Khare · November 1, 2012 at 10:58 am

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 · November 2, 2012 at 6:31 am

    Thanks, Shailendra. I’ve updated the post!

Alex Jones · November 2, 2012 at 9:38 am

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 · November 12, 2012 at 8:46 am

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

    carlos · February 17, 2013 at 3:00 am

    Same problem for me, do you find the solution?

    carlos · February 17, 2013 at 3:33 am

    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 · November 14, 2012 at 9:16 am

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 · August 2, 2013 at 12:47 pm

    Make sure prototype.js is called in the document .

angel · November 15, 2012 at 11:31 am

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 · November 30, 2012 at 11:35 pm

    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 · November 23, 2012 at 6:34 am

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 · December 4, 2012 at 4:56 am

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 · January 31, 2013 at 4:25 pm

hi

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

Prashant · February 13, 2013 at 9:54 am

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 · February 13, 2013 at 11:12 am

    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 · February 14, 2013 at 9:47 am

Thanks.
This works great :))

Ashish · February 23, 2013 at 5:47 pm

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 · March 14, 2013 at 5:07 am

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 · March 14, 2013 at 7:21 am

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.

Eric Larson · March 20, 2013 at 8:47 pm

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!

Enrique Piatti · March 30, 2013 at 3:23 am

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); )

Umesh chandra · April 13, 2013 at 1:10 pm

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 · April 26, 2013 at 9:46 pm

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 · May 26, 2013 at 12:46 pm

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 · June 4, 2013 at 1:20 pm

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 · July 5, 2013 at 7:55 am

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

loy · July 29, 2013 at 7:08 am

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 · July 30, 2013 at 1:25 pm

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 · August 1, 2013 at 10:48 pm

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 · August 2, 2013 at 12:25 pm

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

      Matt · December 6, 2013 at 4:27 pm

      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 · October 2, 2013 at 1:41 pm

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 · October 2, 2013 at 1:56 pm

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 · January 26, 2014 at 6:49 pm

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

    i m following exactly the steps explained above.

    Thanks

      Bhavik · October 20, 2014 at 1:51 pm

      Hi,

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

      Thanks

Matt Mumpower · November 14, 2013 at 8:14 pm

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 · March 18, 2014 at 1:39 pm

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 · April 21, 2014 at 11:02 am

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

    sandeep · December 10, 2014 at 1:52 pm

    same problem pls let me knw if u found any solutions

Reshma · June 4, 2014 at 6:16 am

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

    AndreaL · December 18, 2014 at 3:36 pm

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

    AndreaL · December 19, 2014 at 8:44 am

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

      Jerico · June 30, 2016 at 3:13 pm

      Hi AndreaL,

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

manoj · June 25, 2014 at 11:33 am

There is no value only Drop down displayed.

manoj · June 25, 2014 at 2:48 pm

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 · July 24, 2014 at 12:12 pm

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

Akanksha · April 18, 2015 at 4:19 am

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 · April 18, 2015 at 7:15 am

There is no value only Drop down displayed.

durai · September 26, 2015 at 6:24 am

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

hunny · December 23, 2015 at 6:16 am

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 · February 4, 2016 at 2:04 am

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 · February 4, 2016 at 2:08 am

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!

Ahmad Redzwan Ab Ghani · April 4, 2016 at 1:01 am

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 · October 9, 2016 at 10:35 pm

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 · November 14, 2016 at 10:50 pm

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!

Fred Eric · March 29, 2017 at 1:16 pm

Hallo,

thanks for this great tutrial!
I tried it with the Magento Version 1.9.2.1 and i get this error:
Fatal error: Class ‘Mage_‘core’_Helper_Data’ not found in /homepages/36/d278809629/htdocs/shop/app/Mage.php on line 547

I found out wich line produces the error.
It’s an the configurable_category.phtm the following line:
$_attributes = Mage::helper(‘core’)->decorateArray($this->getAllowAttributes());

Does anybody knows what could be the problem?
Thanks in advance!

Dave · June 24, 2017 at 9:46 pm

Hi there

thanks for this great post. Have you seen anyone do this for Magento 2.x?

Cheers

Dav

    Pau · June 28, 2017 at 5:14 am

    Hi Dave,

    Magento 2 does this natively on the theme Luma 🙂 Install the sample data and you’ll see it working!

jack · October 4, 2017 at 11:26 am

hi
i follow all the steps but option not display in drop down so can you please help me on this issue i read all the above comments but it’s not helpful for me..

Leave a Reply to Sean Russell Cancel reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.