Change the text "Choose an option..." on Magento product page - magento

Question

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!

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

Answer 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.

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

Answer 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() ?>);
//kevin.qazware#gmail.com 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 .

Answer 5

simplest answer:
replace js/varien/configurable.js line 172
element.options[0].innerHTML = 'Choose ' + this.config.attributes[attributeId].label;

Answer 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!

Answer 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>

Answer 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.

Answer 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;?>