Magento update configurable option drop down on product detail page

create a configurable.phtml file in the given directory
app/design/frontend/magma/default/template/catalog/product/view/type/options
and put the below code on that file..

Clear your cache and than refresh your browser.







<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>

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


                 
                 
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label>        
            <span 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>
              </span>        
    <?php endforeach; ?>
    </dl>
    
    
                 
                 
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
        
         
         
 function replaceSelectOption() {
    jQuery('.product_attribute_option_link').remove();
    jQuery('#selected_combination').text('');
    jQuery(".super-attribute-select").each(function () {
        var drop_down = jQuery(this);
        drop_down.hide();
        drop_down.find("option[value!='']").each(function () {
            var option = jQuery(this);
            jQuery("<a>", {
                text: option.text(),
                href: '#product-options-wrapper',
                class: 'product_attribute_option_link',
                'data-id': drop_down.attr('id'),
                'data-name': drop_down.attr('name'),
                'data-value': option.val(),
                'data-label': option.text(),
                click: function () {
                    drop_down.val(option.val());
                    var obj = drop_down.get();
                    Event.observe(obj[0], 'change', function () {
                    });
                    fireEvent(obj[0], 'change');
                    replaceSelectOption();
                    var selected_combination = [];
                    jQuery(".super-attribute-select").each(function () {
                        if (jQuery(this).val()) {
                            jQuery(".product_attribute_option_link[data-value=" + jQuery(this).val() + "]").addClass('product_attribute_option_link_selected');
                            selected_combination.push(jQuery(this).find("option:selected").text());
                        }
                    });
                    jQuery.each(selected_combination, function (index, selection) {
                        jQuery('#selected_combination').append(selection);
                        if (index + 1 < selected_combination.length)
                            jQuery('#selected_combination').append(" - ");
                    });
                    return false;
                }
            }).appendTo(drop_down.parent());
        });
    });
}

document.observe('dom:loaded', function () {
    replaceSelectOption();


    jQuery(".product-view .add-to-cart .button.btn-cart").attr('onclick', '');
    jQuery(".product-view .add-to-cart .button.btn-cart").on('click', function () {
        var chk = true;
        jQuery(".input-box .product_attribute_option_link").each(function () {
            if (jQuery(this).hasClass("product_attribute_option_link_selected")) {
                chk = false;
                return false;
            }
        });
        if (chk) {
            jQuery("#product-options-wrapper .input-box").addClass('validation-failed');
            jQuery("#product-options-wrapper > p.required").css({
                display: 'block',
                position: 'absolute',
                right: '0',
                top: '30px',
                color: 'red'
            });
            jQuery("#product-options-wrapper > p.required").fadeOut(3000, function () {
                jQuery("#product-options-wrapper .input-box").removeClass('validation-failed');
            });
        }
        else {
           productAddToCartForm.submit(this);
        }
    });

    


});
    </script>
<?php endif;?>

Leave a Reply