Change the text “Choose an option…” on Magento pro

问题:

I created a configurable product, it has three option: color, size and style.

Now in product page, each option has the default text "Choose an Option..." in dropdown, but I want the text should be "Select color", "Select size" and "Select style".

I edited function getJsonConfig() in app\code\core\Mage\Catalog\Block\View\Type\Configurable.php

From:

    'chooseText'        => Mage::helper('catalog')->__('Choose an Option...'),

To:

    'chooseText'        => ('Select ').$attribute->getLabel(),

And edit line 39 of the file frontend/base/default/template/catalog/product/view/type/options/configurable.phtml to:

<option><?php echo $this->__('Select ') ?><?php echo $_attribute->getLabel() ?></option>

But the result is not good, it alway show the text "Choose style" in three options. Please give me a hint for this issue, thank you very much!

回答1:

My version of the same problem. You need to change only template catalog/product/view/type/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">
                <?php $chooseText = $this->__('Select %s', $_attribute->getLabel()); ?>
                <select data-choose-text="<?php echo $chooseText; ?>" name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $chooseText; ?></option>
                </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        Product.ConfigDefaultText = new Class.create(Product.Config, {
            fillSelect: function($super, element) {
                $super(element);
                var chooseDefaultText = element.getAttribute('data-choose-text');
                $(element).options[0] = new Option(chooseDefaultText, '');
            }
        });
        var spConfig = new Product.ConfigDefaultText(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>

Note (extracted from comments) If the selected default value happens not to be "Select %s", replace

$(element).options[0] = new Option(chooseDefaultText, '');

with

$(element).options[0].innerHTML = chooseDefaultText;

回答2:

I was looking for a more simple way to do this. I didn't want to extend any core files or muck around with extending JavaScript. Instead I parsed the settings JSON, updated the chooseText setting, and converted back to JSON:

---

/~theme/default/template/catalog/product/view/type/options/configurable.phtml

<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = 'Select..';
?>

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>

---

More information and further examples here.

回答3:

The only way I think is just to modify the javascript class that populates that dropdowns. As we can see in frontend/base/default/template/catalog/product/view/type/options/configurable.phtml that class is:

    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>

The file with needed class located in js/varien/product.js

The place where first <option> tag is set up is:

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

The variable chooseText used there on line 368. This variable was created in function getJsonConfig() in app/code/core/Mage/Catalog/Block/Product/View/Type/Configurable.php (you was digging the right way). You need to modify the javascript that I described earlier to achive what you need (based on var attributeId you can assign options with different text to elements you need)

回答4:

If you only change file configurable.js
It will only change first select when page load
So I must change template file
Get attached file for test.(I just write it to an small extension)

<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php
        $_attributeId = $_attribute->getAttributeId();
        $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
        $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
        ?>
            <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 kevin-black-<?php echo $_attributeLabel;?>">
                    <option><?php echo $_attributeInfo->getFrontendLabel() ?></option>
                    </select>
                </div>
            </dd>
        <?php endforeach; ?>
    </dl>
<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    //[e-mail] Change Text follow attribute Label
    function changeFristText(){
        <?php foreach($_attributes as $_attribute): ?>
            <?php
            $_attributeId = $_attribute->getAttributeId();
            $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
            ?>
            var label = '<?php echo $_attributeInfo->getFrontendLabel();?>';
            $$('select.kevin-black-'+label).each(function(elem){
                var options = elem.childElements();
                options[0].update(label);
            });
        <?php endforeach;?>
    }
</script>
<?php endif;?>


in file : js/varien/configurable.js replace line 171 = element.options[0] = new Option(element.config.label, ‘’);

It for all attribute set .

回答5:

simplest answer:

replace js/varien/configurable.js line 172

element.options[0].innerHTML = 'Choose ' + this.config.attributes[attributeId].label;

回答6:

I extended class Product.Config (method fillselect) by these code:

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

It's ok!

回答7:

    <script type="text/javascript">
    <?php
        $jsonConfig = $this->getJsonConfig();
        $jsonConfig = str_replace("Choose an Option...", "Select Size", $jsonConfig);
    ?>
    var spConfig = new Product.Config(<?php echo $jsonConfig; ?>);
</script>

回答8:

file catalog/product/view/type/options/configurable.phml

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <?php 
            $_attributeId = $_attribute->getAttributeId();
            $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
            $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
        ?>
        <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 kevin-black-<?php echo $_attributeLabel;?>">
                    <option><?php echo $this->__('Select '.$_attributeLabel) ?></option>
                  </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
        //Change Text follow attribute Label
        function changeFristText(){
            <?php foreach($_attributes as $_attribute): ?>
                <?php 
                    $_attributeId = $_attribute->getAttributeId();
                    $_attributeInfo = Mage::getModel('eav/entity_attribute')->load($_attributeId);
                    $_attributeLabel = str_replace(' ','-',strtolower($_attributeInfo->getFrontendLabel()));
                ?>
                var label = '<?php echo $_attributeLabel;?>';
                $$('select.kevin-black-'+label).each(function(elem){
                    var options = elem.childElements();
                    options[0].update('Select ' + label);
                });
            <?php endforeach;?>
        }
    </script>
<?php endif;?>

and add one line changeFristText(); after line 171 (element.options[0] = new Option(this.config.chooseText, '');) in file js/varien/configurable.js

It for all attribute set.

回答9:

This worked for me on CE 1.8.1. It's based off Shein's answer, and addresses the wrong option getting selected on load. I basically just copied/pasted the Product.Config.fillSelect() method from /js/varien/product.js. Within the pasted code I changed:

element.options[0].innerHTML = this.config.chooseText;

to

element.options[0].innerHTML = element.config.label;

This allows keeping product.js unmodified, and just override the method. The only drawback is any future core updates to that method will need migrating.

Since the new code just gets the "label" setting, the data-choose-text attribute on isn't needed on the select tag

---

<?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 $_attribute->getLabel() ?></option>
                </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        Product.ConfigDefaultText = new Class.create(Product.Config, {
            fillSelect: function (element) {
                var attributeId = element.id.replace(/[a-z]*/, '');
                var options = this.getAttributeOptions(attributeId);
                this.clearSelect(element);
                element.options[0] = new Option('', '');
                element.options[0].innerHTML = element.config.label;

                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++;
                        }
                    }
                }
            }
        });
        var spConfig = new Product.ConfigDefaultText(<?php echo $this->getJsonConfig() ?>);
    </script>
<?php endif;?>