Magento Grouped Products Containing Associated Configurable Products

Home / Blog / Magento Grouped Products Containing Associated Configurable Products

We currently have a post explaining how to associated simple products that have required options to a parent grouped product (link), but another product configuration that many people ask about is associating configurable products within a grouped product. This association allows a Magento store to more intuitively display their products on a single page, rather than forcing the user to navigate to multiple configurable product pages.

There are quite a few steps to get this working correctly, but since we’ve implemented this for a few clients, we’ve bundled the code into a module that you can download here: groupedconfigurable.

Here, I’ll list the basic steps to get this working, and you can download the code and modify to your liking.

Step 1: Allow the Association

By default, Magento wont allow you to link a configurable product from a grouped product. If you check config.xml in the module we wrote, we updated the allowable product types for a grouped product.

Step 2. Add our product.js File to your layout

Since the configurable product, by default, is a page-centric configuration, we had to write a new javascript class to handle having multiple configurable products on a single page. In your grouped product layout handle, add the brim/product.js file.

Step 3. Check for a configurable product, and use our new configurable template

In the grouped.phtml file, while it is iterating through the associated products, check if the product is configurable. If it is, use our Helper class to echo out the configurable template. This would look something like: (this is basically pseudo code)

if($_item->getTypeId() == Mage_Catalog_Model_Product_Type::TYPE_CONFIGURABLE):

echo Mage::helper('groupedconfigured')->getAssociatedConfigurableProductHtml($this, $_item) ;

else:

// default to original behavior

Within the method getAssociatedConfigurableProductHtml, it will create a block using the configurable template we’ve provided.

Another thing to mention is that since Magento by default has a single form for adding products to cart, you’ll want to remove the form declaration from the grouped.phtml file, and instead, just use the forms that are provided by our template.

To show the module in work, I added configurable products to the “recently viewed” template on the right-hand side of a base magento install. You can see it here:

The screen shown above isn’t pretty (I didn’t style anything), but as you can see, you can display a configurable product anywhere in your store using a convenient helper method. We’ve provided the code necessary in this post, but if anyone has specific customization questions or needs any help, send us an email through our site’s contact form or comment below.

– UPDATE –

Jason (see comments below) pointed out a flaw in my config.xml file and the lack of some required overrides. I’ve updated my module, and the link above is the latest version.

– Update (8/5/11) –

We have packaged this blog post up into an easy to install Magento extension available in our new Magento Extension Store. The new extension is now called Grouped Options.

Showing 39 comments
  • Jason

    OK, total rookie questions here so I appreciate the patience.

    I’ve added the file “Brim_Groupedconfigured.xml” to: /app/etc/modules/

    I’ve added the folder “Brim” to: app/code/local

    If I’m understanding things correctly, that’s what it takes to be able to add configurable products to grouped products in the ADMIN. But I’m not able to as of now. I’m obviously missing something.

    The remaining files:
    groupedconfigured & product.js are for the presentation layer on the front end, correct?

    I’m not totally sure how/where to place these files so any guidance would be very much appreciated. Right now, I’m just trying to be able to add multiple configurable products to a grouped product in the admin. Next step would be the presentation layer.

    Thanks in advance for assistance and patience!

  • tmillhouse

    A couple things:

    1. What version of Magento are you using. This module has been tested with Enterprise 1.9 and Basic 1.4

    2. After you added the xml file to the modules directory and the Brim folder to the app/code/local directory, did you clear the Magento cache? If not, then the new configurations wouldn’t be picked up yet.

    If you have done the above 2 things and its still not allowing you to associate configurable products to grouped products in the admin section, then I’ll download the module and attempt to get it working on a clean magento install.

    We’ll be creating a commercial module for this soon, which will include easier installation, but that is about a few weeks off. I may have missed an override or 2 in the module. I’ll confirm and make any necessary fixes later tonight.

  • Jason

    Update, ok so we can add configurable products to a grouped product, but only if the configurable product has no simple products associated with it. I’m confused.

    What we need is to be able to offer on the front end:

    Top: Small, Medium, Large
    Bottom: Small, Medium, Large

    This is for a clothing store. The plan was to have:
    Top, Small be it’s own SKU
    Top, Medium be it’s own SKU

    etc..

    Then added to a configurable product, which is then added to a grouped product so that we can have tops & bottoms.

    But as mentioned as soon as I added simple products to a configurable product, I can’t add that configurable product to a grouped product.

    Again, assistance and patience is appreciated.

  • Jason

    Thanks for the response, we are using Magento Professional 1.9.1.0

  • tmillhouse

    Ah, I know what it is. You’ll need to add the overrides that I provided with the “grouped-to-simple” solution. The reason this module worked for me is because I had both installed. Basically, a grouped product in magento, by default, doesn’t allow the association of any product that has “required options” to a grouped product. Well, Magento sees a configurable product with simple products as “required options”.

    The required overrides are listed here: http://www.brimllc.com/2010/07/magento-associating-simple-products-with-required-options-to-a-grouped-product/

    OR if you can wait until later tonight, I can bundle these overrides within this module as well.

  • Jason

    Aha! I can wait, a bundle would be awesome but if you can’t get to it, I’m sure I can figure it out based on your step-by-step instructions.

    Thanks so much.

  • tmillhouse

    No problem … actually, thank you for catching my mistake. I’ll have the module updated with all necessary overrides by midnight tonight EST time. I’ll shoot you an email once I get it up (assuming you’re the same Jason that I’ve been exchanging messages with the past couple days).

  • Jason

    You rock! Yes, same Jason :)

  • tmillhouse

    My apologies for the delay; I got sidetracked last night. Anyway, as soon as I get some time today, I’ll update the module, but I didn’t want to slow you down any further. If you’d like to make the changes within your code, you’ll want to follow the instructions here: http://www.brimllc.com/2010/07/magento-associating-simple-products-with-required-options-to-a-grouped-product/, specifically:

    * Block/Adminhtml/Product/Edit/Tab/Super/Group.php
    * Model/Product/Type/Grouped.php
    * etc/config.xml
    * Model/Mysql4/Indexer/Stock/Grouped.php

    In my post, I place these files in various modules, but you can just put the ovverrides into the same module; just be sure to properly define the overrides in the config.xml.

    Sorry again, and I’ll be sure to notify you when I get the module updated.

  • Jason

    tmillhouse – I appreciate all of the assistance you’ve been providing me me and others. I have placed all of your provided code on our server in the following places:

    From this post: http://www.brimllc.com/2010/12/magento-grouped-products-containing-associated-configurable-products/

    app/code/local/Brim/Groupedconfigured/Helper/Data.php
    app/code/local/Brim/Groupedconfigured/etc/config.xml
    app/etc/modules/Brim_Groupedconfigured.xml

    Then from this post: http://www.brimllc.com/2010/07/magento-associating-simple-products-with-required-options-to-a-grouped-product/

    app/code/local/My/CatalogInventory/Model/Mysql4/Indexer/Stock/Grouped.php
    app/code/local/My/CatalogInventory/etc/config.xml
    app/code/local/My/Catalog/Model/Product/Type/Grouped.php
    app/code/local/My/Catalog/Block/Adminhtml/Product/Edit/Tab/Super/Group.php
    app/code/local/My/Catalog/etc/config.xml

    And we’ve flushed the Magento cache. We’re still unable to add configurable products, that have simple products associated with them to a grouped product.

    Any idea what we’re missing?

    Thanks in advance for your continued assistance.

  • tmillhouse

    Hi Jason, it really could be a variable number of things that is causing the issue at this point. Most likely there is something wrong with the new override declarations. It the other post, I created multiple modules to house the files, each of which would need an associated config.xml to define the overrides. Instead of adding the overrides separate modules, add them to the Groupedconfigured module in their respective folders. Then just update the config.xml to reflect the overrides.

    I’m going to be unavailable to look into this further until this evening, at which I’ll be putting this first priority to fix my module.

  • tmillhouse

    Jason – I had a bit of time this afternoon to add the files to the module and test locally. What I found is that I mistakenly placed the allow_product_types configuration under the wrong parent tag in the config.xml. The entire catalog/product/type/grouped/allow_product_types/configurable xml needs to be placed directly after the helpers tag, but still within the global tag (i hope that makes sense). Once I made this change, and I added the overrides which I described above, I was able to successfully make the associations in the admin panel.

    I’m stuck behind a firewall right now, but I’ll email you the updated module this evening.

    Sorry for the confusion!

  • Jason

    I want to thank tmillhouse for the assistance and code. Worked like a charm. Anyone needing to be able to add configurable products to a grouped product, look no further.

    Thanks again.

  • Adam Moss

    Thanks for all your help with this Tim, the module is genius due to its simplicity and effectiveness.

  • Sean

    Thanks for this. I’ve been trying to enable this module on a site. The issue that I’m running into is that, while there is an options drop-down for the two configurable products on the grouped product page. None of the drop-downs are showing product options.

    A little additional information, the grouped product I am creating has two configurable products, each with two configurable options.

    Any insight would be appreciated.

    Thanks.

  • tmillhouse

    If the dropdowns aren’t being populated, it sounds like there is a JS error on the page prohibiting my JS from populating the dropdowns. Your page should be including my product.js, and then on the configurable.phtml template, you’ll have this Js under the select input:

    var spConfig = new Product.GroupedConfig(< ?php echo $this->getJsonConfig() ?>, < ?php echo $_product->getId() ?>);
    spConfig.setOptionsPrice(new Product.OptionsPrice(< ?php echo Mage::helper('groupedconfigured')->getProductViewJsonConfig($_product) ?>));

    To debug, I would use either chrome developer tools for firebug for firefox to identify if there were any javascript errors on the page keeping the inputs from being populated.

    If this doesn’t help, email me your template file at tim@brimllc.com and I’ll have a look either later tonight or in the morning.

  • Olivier

    Hi Tim,

    First, thanks for this great module! Unfortunately I’m running into the same issue than Sean did: none of the drop-downs are being populated. Moreover I don’t see any JS error while debugging with chrome…
    I’m using Magento 1.5.0.1. I know you’ve been testing your module on 1.4.1, so the issue might come from the new version.

    Thank you in advance for your help!

  • tmillhouse

    Hi Olivier,

    The version difference definitely could be the issue. I’ve had a couple other clients that had the same issue related to the dropdowns not populating, but in both cases, it was caused by JS issues.

    If you could, email me (tim@brimllc.com) your groupedconfigured/product/view/type/groupedconfigured/configurable.phtml so that I can see if I can spot anything obviously wrong.

    One other thing to check is that you’re not including a <form> tag on the product/view.phtml template when you’re using my module. This is because my configurable.phtml template injects a form tag for each configurable product. This could potentially be interfering with the code.

    If the issue isn’t being caused from my suggestions above, and I don’t see anything wrong in your file, I’ll download the latest Magento version and see if I can replicate your issue later this evening.

  • Olivier

    Thank you very much Tim!! It works now, I forgot to remove the tag from my view.phtml template!

    Best regards,
    Olivier

  • tmillhouse

    Great, I’m glad you found the problem.

    One client of mine required the grouped-configurable products, but they still needed to support the other product types as well. What I did to facilitate that was to create an event hook that listened for the “before render” event of the product view page, and at that point I would check whether or not the grouped product contained children configurable products. If I found this to be the case, then I would get a reference to the layout block, and modify the view.phtml to be the version without the

    . If this wasn’t found, then it would default to the version of the template that did have the form.

    If this is something that would be helpful for you in your scenario, let me know, and I’ll supply the code.

    Thanks,
    Tim

  • Olivier

    Hi Tim,

    What I did in order to support other product types is that instead of modifying directly the product/view.phtml template file I created a specific template file for grouped products (product/groupedview.phtml) and simply added the following line in my layout/catalog.xml file:

    Catalog Product View (Grouped)

    catalog/product/groupedview.phtml

    [...]

    I don’t know if there is a more convenient way to do it, but for me it did the job well!

    Regards,
    Olivier

  • Olivier

    Tags have been processed in my last comment so the piece of code is not complete… sorry for that.

    First find the block ‘PRODUCT_TYPE_grouped translate=”label” module=”catalog”‘, then simply add an ‘action method=”setTemplate”‘ tag under the ‘reference name=”product.info”‘ tag…

  • tmillhouse

    Ah, yes, that sounds like it will work just fine. Nice work.

  • HPVD

    Hi
    is there some a live shop where we could see this solution working?
    Best regards

    HPVD

  • tmillhouse

    Sure, we implemented this solution on the VivaTerra site a while back:

    http://www.vivaterra.com/furniture/beds/gustavian-bed-collection.html . Let me know if you have any questions.

  • David

    Hi! I’m trying to do get the configurable grouped products using the core API (after crying tears of blood I managed to make the api work with configurable products).

    When I create the wrapper product with CatalogProductCreate, should I use type “configurable”or type “groupedconfigurable”or how would I go and do that?

    Thanks for such a great contribution!

  • tmillhouse

    Hi David, sorry for the late reply; I’m just getting back from vacation…

    When you create the products via the admin panel, you should create the wrapper product as a grouped product. Using my extenstion/module, you should be able to then go to your associated products tab and select the configurable products you’d like to associate. If you’re having more issues with this, email me at tim@brimllc.com, and I’ll shoot you an email with my latest module that contains the necessary code to make this work. Most of it should match that which is in this post, but if you’re having issues with it, it may have update that you don’t have.

  • joshb

    noob question.
    Can you tell me if this works with magento 1.5 community? If so, what are the paths that Im suppose to upload the files to in the zip?
    Thanks

  • tmillhouse

    I haven’t tested this specifically for 1.5; however, I don’t see why it wouldn’t work. The code base wasn’t changed that drastically. You want to upload the module code to app/code/local/Brim, and then add the module xml to etc/modules.

  • ram

    dropdown dosen’t populated in my case. please help me,where we uplode product.js file?now iam uploaded product.js
    on js folder,using magento version 1.4.2.0

  • Landykos

    Hey Tim,
    I must say what you have done here is amazing and Thanks so much for your work on this!!

    I almost have it fully working but seem to be stuck at one last thing on the frontend. I’m able to add products to groups in the admin. They show up correctly on the group product detail page. But when I add in your check to see if it is type Configurable:
    echo Mage::helper(‘groupedconfigured’)->getAssociatedConfigurableProductHtml($this, $_item) ;

    I am getting nothing back from this. I feel like I must be missing something simple here but it seems like your helper is not loading correctly. Any ideas as to where I should look or what I might have missed??

    Thanks again!
    LK

  • Neil

    Can you please give step by step instructions on how to implement this i downloaded the zip file .But i cant make any sense of what goes where .Any help would be appreciated.

  • Konrad

    Hi!
    I just downloaded the .zip file and did the steps which were described in the second comment, to allow associate configured products to grouped products. I flushed the cache, but it is still not possible to add configured products.
    Is there a step by step instruction of how to do that?
    Or is there already a extension for that?
    Best regards.

  • Neil

    Hey Tim can you mail me the latest version ,with changes to view.phtml.I cannot remove the form tag because the other product types fail.And my dropdows are not getting populated with the configurable options.

    Thanks and Best Regards,
    Neil

  • Neil

    Hi Tim
    I have mailed you and posted comments on this site . I have not received any reply .Could you please mail me the changes required in view.phtml , so that i do not have to remove the form tag .

    Thanks and Best Regards
    Neil

  • tmillhouse

    Please email inquiries about this module to devs@brimllc.com. My business parter will be bundling this functionality into a magento connect module soon, and it will contain an easy installer. Until then, if you email the previously mentioned address, our other devs will be able to respond.

  • tmillhouse

    My apologies for the delays in my responses. Regarding the view.phtml, I don’t have that file readily available. Please email devs@brimllc.com with any inquiries/questions since all of our devs will get it in their inbox. I’ve had limited availability lately.

  • Stephew

    Thank you. It’s significant, the effect that tweaking MySQL variables can have on query speeds.

    Thanks again, Stephew.

  • Neil

    Hey Tim what did you mean by
    “l. What I did to facilitate that was to create an event hook that listened for the “before render” event of the product view page, and at that point I would check whether or not the grouped product contained children configurable products. If I found this to be the case, then I would get a reference to the layout block, and modify the view.phtml to be the version without the
    . If this wasn’t found, then it would default to the version of the template that did have the form.”

    Can you please explain this with an example ?

    Thanks and Best Regards
    Neil