Magento – Configurable products show option box without any options

configurable-productmagento-1.7

Below is a screenshot of my configurable product that has two simple products correctly associated:

enter image description here

The configurable product is visible (catalog/search) and the simple products are not visible individually.

When I go view my configurable product, I find that I do see a "Select Size" option but with no options inside for some reason.

Below is a screenshot:

enter image description here

Does anyone have any idea what could be causing this?

I have not edited or overridden any core files but I did notice that the options were being inputted by a foreach loop in configurable.phtml

The code is included below: (frontend/base/default/template/catalog/product/view/options/configurable.phtml)

<?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 class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

UPDATE:

I tried to debug this issue and noticed that on another store view with its own design theme, the configurable product worked fine. Also I noticed that on my original design theme, the add to cart button did not function. I figured perhaps some javascript was interfering and after removing my local.xml file which included all my external JS scripts, everything functioned just fine. Now… to figure out what specifically is causing the error.

Best Answer

The problem was that I had added jQuery without putting it in no conflict mode.

my local.xml code is now as follows:

<reference name="head">
        <block type="core/text" name="jquery.cdn.google">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>]]></text>
            </action>
        </block>
        <block type="core/text" name="google.jquery.noconflict" after="google.jquery">
            <action method="setText">
                <text><![CDATA[<script type="text/javascript">var $j = jQuery.noConflict(); </script>]]></text>
            </action>
        </block>

        ....

Hope this helps someone!

Related Solutions

Magento – Show All Configurable Product Options in View

I've toyed around for a while with configurable.js and replaced the fillSelect() function for a fillRadio() function that reads like this:

fillRadio: function(element){
    var attributeId = element.id.replace(/[a-z]*/, '');
    var attributes = this.getAttribute(attributeId);
    var options = this.getAttributeOptions(attributeId);

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

    if(options) {
        var index = 1;
        var inputs = [];
        for(var i = 0; i < options.length; i++) {
            var allowedProducts = [];

            var input = document.createElement('input');
            jQuery(input).attr({
                type: 'radio',
                name: attributes.code,
                disabled: 'disabled',
                value: options[i].id,
                price: options[i].price,
                id: attributes.code + attributeId + '-' + i
            }).appendTo(element);

            var label = document.createElement('label');
            jQuery(label).attr({
                for: attributes.code + attributeId + '-' + i
            }).html(this.getOptionLabel(options[i], options[i].price)).appendTo(element);

            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;
                jQuery(input).removeAttr('disabled');
            }
            if(!element.options)
                element.options = [];
            element.options[i] = input;
            element.options[i].config = options[i];
        }
    }
}

I have also modified configurable.phtml file and removed the select tags and moved the id and classes to the input container:

<?php foreach($_attributes as $_attribute): ?>
    <dt><label class="required"><?php echo $_attribute->getLabel() ?></label></dt>
    <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
        <div class="input-box super-attribute-select" id="attribute<?php echo $_attribute->getAttributeId() ?>">
        </div>
    </dd>
<?php endforeach; ?>

Now I'm only debugging the javascript functions (event firing, etc) so that the radio buttons are disabled with every "main" option change

Magento – Get Admin Label of Configurable Option Value

As you have using this at frontend,then you cannot easy get those option. Get need to use option collection and filter the option collection by Attribute id and option ids.

Get Option ids:

Get option list from your code:

    $productAttributeOptions = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product);

$attributeOptions = array();
$attributeList=array();
foreach ($productAttributeOptions as $productAttribute) {


    foreach ($productAttribute['values'] as $attribute) {
        $attributeList[$productAttribute['attribute_id']][]=$attribute['value_index'];

        $attributeOptions[$productAttribute['label']][$attribute['value_index']] = $attribute['store_label'];
    }
}

get Admin label:

then call eav option collection then filter collection by option is

 foreach( $attributeList as $key=>$value){
    $attributeId=$key;
    $options=array_unique($value);
            $collection = Mage::getResourceModel('eav/entity_attribute_option_collection');
                $collection->getSelect()->where('main_table.option_id IN (?)',$options);
                $collection->setPositionOrder('asc');
                $collection->setAttributeFilter($attributeId)
                ->setStoreFilter(0);
            $collection->load();
echo "<pre>";
print_r($collection->toOptionArray());

}

and 0 for store admin