How to Execute Custom JavaScript Functions in Magento

How to Execute Custom JavaScript Functions in Magento

The article contains the answer written by the certified Magento developer. You’ll know the upgrade-safe ways to execute custom JavaScript functions when a one-page checkout step is submitted. Developers who are about to pass Magento certification will find the article useful.

How many upgrade-safe ways can I find to execute custom JavaScript functions when a one-page checkout step is submitted?

One Page checkout uses JavaScript to control the navigation between steps. This JavaScript layer is also responsible for updating the content of the checkout steps. You can find the JavaScript code used by One Page checkout in the following files:

  • /js/varien/accordion.js contains a JavaScript class that combines checkout steps into an accordion-like object.
  • /skin/frontend/base/default/js/opcheckout.js contains JavaScript classes that represent individual checkout steps and the checkout as a whole. Note that this file is located in the skin folder, so it is possible to have various One Page JavaScript for different skins.

A checkout object is the centerpiece of the One Page checkout JavaScript layer. Its responsibility is to control the checkout process flow by displaying, hiding, and updating checkout steps in response to customer actions and in a correct sequence. Checkout registers a click event listener to every accordion section title element. This listener reads the name of the clicked section from the element ID and opens it by calling the checkout object’s gotoSection method:

This method not only opens a step but requests an update on the progress block (this.reloadProgressBlock(section)) that is performed by an Ajax request. In order to apply your JavaScript when a customer clicks next step on checkout, you need override /skin/frontend/base/default/js/opcheckout.js file to your theme folder. Then edit this file after line 129:

Or you may create a custom.js file and fill in it by code like this:



Post a new comment

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