Get Free Audit

How to Create and Customize Javascript within the Magento Framework

Oct 3, 2017

914 David Narbutovich

How to 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:

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:

Then we add the class to the necessary validation field:

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

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:

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

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

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.

Magento Development

Take your online store to the next level with BelVG Magento Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *