Create and Customize Javascript within the Magento Framework

The topic is dedicated to Javascript and its ways of working within the Magento Framework. The developers who are going to take the Magento exam will find lots of useful information here.

How to extend an existing JavaScript class instance with new or customized functionality?

In order to extend an existing js class, you should add a new method in its property “prototype”.

For example:

Varien.FileElement.prototype.mySelectFile = function selectFileCustom(event){
    console.log(this);
}

Varien.FileElement.prototype.mySelectFile = function selectFileCustom(event){

console.log(this);

}

How to add custom JavaScript form validation using the framework provided by Magento?

You should use the methods “add” and “addAllThese” of the global object “Validation” in order to add your custom js form validation using Magento framework.

The first parameter the method “add” accepts is the name of CSS class by which the processor is identified. The second parameter is the error message when the third one is the function which checks the value (the function accepts the value which you should check and get the value “true” and “false” back).

The method “addAllThese” is a wrapper of the method “add” which accepts two-dimensional value set.

For example:

Validation.add('IsEmpty', '', function(v) {
    return ;(v == '' || (v == null) || (v.length == 0) || /^\s+$/.test(v));
});
Validation.addAllThese([
    ['custom-validation', 'Error message ....', function(v) {
        return !Validation.get('IsEmpty').test(v);
    }],
    ['validate-no-html-tags', 'HTML tags are not allowed', function(v) {
        return !/<(\/)?\w+/.test(v);
    }],
    ['validate-select', 'Please select an option.', function(v) {
        return ((v != "none") && (v != null) && (v.length != 0));
    }]
]);

Validation.add('IsEmpty', '', function(v) {

return ;(v == '' || (v == null) || (v.length == 0) || /^\s+$/.test(v));

});

Validation.addAllThese([

['custom-validation', 'Error message ....', function(v) {

return !Validation.get('IsEmpty').test(v);

}],

['validate-no-html-tags', 'HTML tags are not allowed', function(v) {

return !/<(\/)?\w+/.test(v);

}],

['validate-select', 'Please select an option.', function(v) {

return ((v != "none") && (v != null) && (v.length != 0));

}]

]);

Then we add the class to the necessary validation field:

<input class="custom-validation validate-email" name="auth::email" type="email">

1	<input class="custom-validation validate-email" name="auth::email" type="email">

How to change the label text of the configurable product dropdowns in an upgrade‐safe way?

If you want to change the label text of the configurable product dropdowns, you should change the Magento configuration.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

<?php
$jsonConfig = json_decode($this->getJsonConfig());
$jsonConfig->chooseText = __('Select...');
?>
<script type="text/javascript">
   var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);
</script>

<?php

$jsonConfig = json_decode($this->getJsonConfig());

$jsonConfig->chooseText = __('Select...');

var spConfig = new Product.Config(<?php echo json_encode($jsonConfig); ?>);

</script>

How to use the JavaScript translation facility for custom text?

There are two ways to add translation facility for custom text using JavaScript translation:

1) The first way means adding translation facility with the help of the method “add” of the global object “Translator”. The first value is the string by which you can get the translation, the second one is translation.

For example:

<script>
    Translator.add('My custom text','<?php echo Mage::helper('mymodule')->__('My custom text')?>');
    Translator.add('result_msg','<?php echo Mage::helper('mymodule')->__('Long long text ….')?>');
</script>

Translator.add('My custom text','<?php echo Mage::helper('mymodule')->__('My custom text')?>');

Translator.add('result_msg','<?php echo Mage::helper('mymodule')->__('Long long text ….')?>');

</script>

2) The second way is using the jstranslator.xml file, which can be created in your module under etc/ folder.

<jstranslator>
    <my_string_identificator translate="message" module="mymodule">
        <message>I have been translated.</message>
    </my_string_identificator>
    <my_another_string_identificator  translate="message" module="mymodule">
        <message>I want to be translated.</message>
    </my_another_string_identificator>
</jstranslator>

<my_string_identificator translate="message" module="mymodule">

<message>I have been translated.</message>

</my_string_identificator>

<my_another_string_identificator translate="message" module="mymodule">

<message>I want to be translated.</message>

</my_another_string_identificator>

</jstranslator>

The method “translate” of the global object “Translator” should be called to get the translation.

<script>
    Translator.translate('My custom text');
    Translator.translate('result_msg');
</script>

Translator.translate('My custom text');

Translator.translate('result_msg');

</script>

You can also check out a related article to learn the upgrade-safe ways to execute custom JavaScript functions when a one-page checkout step is submitted.