Prototype addMethods - Checkout Step

Hello all,

I'm new to this forum so I apologize now if this post is in the wrong board.

I'm working on an extension that fires after save payment, before review on checkout. I've got everything as far as the module complete and I'm having an issue with overriding a method in the Payment class (in opcheckout.js).

The prior developer to me, simply added their own copy of the file with modified information, and commented out the original call for this file. This would not work as we'd like this to be done without needing any override or manual changes in .ptml files. I've already had to rewrite everything else used, and this is my last step in completing the extension.

I am attempting to use addMethods() from prototype, or wrap the function, however the original method is being called still (I have a console message in both functions).

The particular method I am trying to override is Payment.nextStep. I need to add an additional check within this function which incurs a pop-up to the user when JSON sends back error => popup (I am using popup1 to test)

Here is my code to override the function. It's found in a file opcheckoutmod.js included AFTER the original opcheckout.js.

PHP Code:

---

// Start addMethods(); to override Magento 
if (typeof Payment !== 'undefined') {

    Payment.addMethods({
        nextStep: function(transport){ 
        
            console.log('Here'); // Added to see if this runs
            
            if (transport && transport.responseText){
                try{
                    response = eval('(' + transport.responseText + ')');
                }
                catch (e) {
                    response = {};
                }
            }
            
            if (response.error) {
                if (response.error == 'popup1'){
                    // Run my code
                }
            }            
             
            if (response.error) {
                if (response.fields) {
                    var fields = response.fields.split(',');
                    for (var i=0;i<fields.length;i++) {
                        var field = null;
                        if (field = $(fields[i])) {
                            Validation.ajaxError(field, response.error);
                        }
                    }
                    return;
                }
                //alert(response.error);
                return;
            }

            checkout.setStepResponse(response);

            // checkout.setPayment();
        }
    });
    
} // End addMethods(); 


---

I've not had any luck using this and I've included it both inline and within a separate file, but both times in DOM it shows the correct path to the function definition so it does not make sense why this original is being used.

The same occurs with prototype wrap, which an example is below:

PHP Code:

---

Payment.prototype.nextStep
   = Payment.prototype.nextStep.wrap(function(parentMethod){
                 alert("hello world");
}); 


---

Does anyone have a clue as to what else is missing? I can provide access to see the site via PM if needed.

Thanks in advance!

In the context of the class Validator, we already have a method defined to adding new validators (add or addAllThese for multiple validators).
add : function(className, error, test, options) {
var nv = {};
nv[className] = new Validator(className, error, test, options);
Object.extend(Validation.methods, nv);
},
addAllThese : function(validators) {
var nv = {};
$A(validators).each(function(value) {
nv[value[0]] = new Validator(value[0], value[1], value[2], (value.length > 3 ? value[3] : {}));
});
Object.extend(Validation.methods, nv);
}

I personally prefer to use addAllThese as it provides room for adding newer validators later rather than having to add one validator at a time.
For the context of this tutorial, I’m going to add a new validator that simply returns true no matter what. (Just as an example)
Let’s start by creating our own javascript file in our skin folder.

Navigate to /skin/frontend/yourpackage/yourtheme/js/
Create a new file: (e.g. myvalidator.js)

In it, we can directly reference the Validator object, add our own validator to it.
Validator.addAllThese([
['validate-yourvalidatorname', 'This is the error message. But we never return false, so you'll never see it.', function(v) {
//Add your own validation code here
return true; //For now, we'll just return true
}]
]);

In /app/design/frontend/yourpackage/yourtheme/layout/local.xml (if you don’t have one, create one), add your new js file in the “head” block.

Now in any fields you’d like to use your validator in, you just add the class “validate-yourvalidatorname” to it and Validator will automatically validate your field using your new validation method.

Prototype. Don't use Element#seen() , it just exams if a CSS attribute show: none exists. AddMethods( visible: feature() return offsetWidth > zero && offsetHeight > zero; );. Growing Rails Applications in Practice. Check out our new e-book: I overhauled the whole step so it makes use of Javascript to locate visibility in Selenium.

Class#addMethods is a method available on classes that have been defined with Class.create . It can be used to add new instance methods to that class, or overwrite existing methods, after the class has been defined. New methods propagate down the inheritance chain.