1

I'm trying to add a jQuery slider into my Magento theme. The slider is working perfectly in HTML of the theme I have. But I'm having problem integrating it into Magento theme, probably due to jQuery conflict with Magento's prototype js. This is what I've done so far:

I've added jquery file through jquery library direct link, and then added noConflict function, as shown below:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>

I've also added the necessary jQuery file in local.xml file, and when the page is rendered it is correctly shown in page source, as shown below:

<script type="text/javascript" src="http://localhost/menstyle3/skin/frontend/webdezynertheme/default/js/plugins.js"></script>

The code in the plugins.js file starts something like this, and goes on:

    if (!(window.console && console.log)) {
    (function() {
        var noop = function() {};
        var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
        var length = methods.length;
        var console = window.console = {};
        while (length--) {
            console[methods[length]] = noop;
        }
    }());
}

    ;(function($){
            $.fn.pajinate = function(options){

I've tried but I was unable to make it work. Should I just replace the starting '$' with 'jQuery' or should I replace every instance of '$'? Is that all I should try, or do I have to do something else as well?

P.S: Firefox->Inspect Element->Console is not showing any JS errors.

1 Answer 1

0

It looks like the plugin is using a closure to namespace the dollar variable. If you scroll down to match up the brackets, does it by any change look like this:

(function($) {
    $.fn.pajinate = function(options){
    // lots of code here
}($));

If it does, then you should just be able to change it to be:

(function($) {
    $.fn.pajinate = function(options){
    // lots of code here
}(jQuery));
2
  • Guess what...it is already in this form: (function($) { $.fn.pajinate = function(options){ // lots of code here }(jQuery)); But still isn't working... Dec 14, 2013 at 8:03
  • adding this above jQuery code: var $j = jQuery.noConflict(); and then replacing the normal "$" with a new shorthand worked! Thanks anyway! Dec 14, 2013 at 8:28

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.