4

I'm using the HelloResponsive EE theme on a Magento 1.13 EE deployment.

In setting up an extention for the eWAY gateway, I was told there was an error in the Prototype.js file that was interfering with the JSON post.

Uncaught TypeError: Object.keys called on non-object prototype.js:126 addMethods prototype.js:126 create prototype.js:115 (anonymous function) wishlist.js:38

for (var i = 0, length = properties.length; i < length; i++)
  klass.addMethods(properties[i]);

The custom theme does use JQuery as well, so this may be a conflict issue. But when I try moving the JQuery call before the Prototype call, the JQuery functions stop working.

Can anyone help explain

  1. whether or not the error is related to the Prototype / JQuery conflict (I am using a noConflict script) and
  2. how best to fix this?

Here's the code in Wishlist.js, starting at line 38:

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {
action: null,
isValid: false,

initialize: function($super, action) {
    var _templateString = '<ul class="form-list">' +
            '<li><label for="wishlist-name">' + Translator.translate('Wishlist Name') + '</label><div class="input-box"><input type="text" id="wishlist-name" maxlength="255" class="input-text required-entry validate-length maximum-length-255" name="name"/></div>' +
            '<li class="control"><div class="input-box"><input type="checkbox" id="wishlist-public" name="visibility"></div><label for="wishlist-public">' + Translator.translate('Make This Wishlist Public') + '</label></li>' +
        '</ul>' +
        '<div class="buttons-set form-buttons"><button type="submit" class="button btn-save"><span><span>' + Translator.translate('Save') + '</span></span></button><button type="button" class="button btn-cancel"><span><span>' + Translator.translate('Cancel') + '</span></span></button></div>';

You're help is greatly appreciated!

Improve this question

3 Answers 3

Reset to default
6

It would be helpful to see the code in and around line 38 in wishlist.js, as that's where the "real" error is triggered.

(anonymous function) wishlist.js:38

The code you've linked is Prototype JS framework code, and the problem is something dodgey was passed into the framework code.

Additionally, most Prototype JS/jQuery conflicts are cause by not being in "noConflict" mode (even though you think you are). Try opening a javascript console window and checking the value of $. If it's something like this

> $
function (a,b){return new e.fn.init(a,b,h)}

Then jQuery has rewritten the value of $, and you're not in no conflict mode. If it's more like this

> $
function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

Then jQuery is correctly in no conflict mode, so that's probably not the problem.

Update: Based on the code sample provided, my guess the Enterprise.Widget variable defined in 

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {

isn't defined before it's used. Inheritance in Prototype JS's class system works by itterating over methods on the base class-object and adding them to the new class object (the new class object here is Enterprise.Wishlist.Widget.Form). I'd check that Enterprise.Widget is defined before being used with alert or console calls

alert(Enterprise.Widget);
alert(Enterprise);

console(Enterprise.Widget);
console(Enterprise);

Enterprise.Wishlist.Widget.Form = Class.create(Enterprise.Widget, {

If it's not, then your problem is either

  1. The javascript class file which defines Enterprise.Widget isn't being included in a script tag

  2. The javascript class file which defined Enterprise.Widget is being included, but it's being included after wishlist.js.

Improve this answer
3
  • I checked the value of $ as suggested and it does return the 2nd set of code you've listed above. So it should be in no conflict mode. I'm trying to figure out how to post the code in Wishlist.js. Commented Sep 7, 2013 at 6:24
  • @user2755319 Updated the answer with some additional information/theorizing Commented Sep 8, 2013 at 1:49
  • Through trial and error, shifting around JS calls, reverting to the default theme etc, I discovered the custom theme used an old scripts.js file (dated 2010). The newer version (dated 2013) that comes with Magento Enterprise had about another 200 lines of code in it...including the definition of the variable Enterprise.Widget. :) Thank you Alan! Commented Sep 9, 2013 at 23:15
3

We had the same issue and discovered the js/scripts.js file wasn't even loading in our theme. Updating our page.xml to include the call resolved the issue:

<action method="addItem"><type>skin_js</type><name>js/scripts.js</name></action>
Improve this answer
3

I had exactly the same issue.

In order to fix this issue you just have to add the js/script.js file in the head block in your layout and before adding the js/wishlist.js file, it would be something like this:

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="head">
            [...]
            <action method="addItem">
                <type>skin_js</type><name>js/scripts.js</name>
            </action>
            [...]
            <action method="addItem">
                <type>skin_js</type><name>js/wishlist.js</name>
            </action>
        </reference>
    </default>
</layout>

And remember to include this file into your parent's or child theme skin folder, you can find the source of this file inside an enterprise theme.

Guaranteed!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.