How to Execute Custom JavaScript Functions in Magento

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:

 gotoSection: function(section){
   var sectionElement = $('opc-'+section);
   sectionElement.addClassName('allow');
   this.accordion.openSection('opc-'+section);
   this.reloadProgressBlock(section);
 }

gotoSection: function(section){

var sectionElement = $('opc-'+section);

sectionElement.addClassName('allow');

this.accordion.openSection('opc-'+section);

this.reloadProgressBlock(section);

}

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:

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

Talk to Igor

gotoSection: function (section, reloadProgressBlock) {

   if (reloadProgressBlock) {
       this.reloadProgressBlock(this.currentStep);
       // custom scrip
   }
   this.currentStep = section;
   var sectionElement = $('opc-' + section);
   sectionElement.addClassName('allow');
   this.accordion.openSection('opc-' + section);
   if(!reloadProgressBlock) {
       this.resetPreviousSteps();
   }

}

gotoSection: function (section, reloadProgressBlock) {

if (reloadProgressBlock) {

this.reloadProgressBlock(this.currentStep);

// custom scrip

}

this.currentStep = section;

var sectionElement = $('opc-' + section);

sectionElement.addClassName('allow');

this.accordion.openSection('opc-' + section);

if(!reloadProgressBlock) {

this.resetPreviousSteps();

}

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

Checkout.prototype.gotoSection = function (section, reloadProgressBlock) {
   if (reloadProgressBlock) {
       this.reloadProgressBlock(this.currentStep);
   // custom scrip
   }
}