1

I purchased an Theme on Themeforest called POL and am recently trying to move from one shopping cart to woocommerce and i found that 1 of the theme's Visual Composer plugin is conflicting with the Woocommerce admin panel. The code that is causing the issue is located in the jquery that may have a typo or incorrectly closed argument per the chrome console.

The error is "Uncaught type error: Cannot Read property 'extend' of undefined", and this is followed by some lines pertaining to jquery/jquery migrate.

Can someone help me fix this?

Chrome Console Error Picture

Full code:

(function($, $window){

var templateOptions = {
    custom: {
        escape: /\{\{([^\}]+?)\}\}(?!\})/g,
        evaluate: /<#([\s\S]+?)#>/g,
        interpolate: /\{\{\{([\s\S]+?)\}\}\}/g
    },
    default: {
        escape: /<%-([\s\S]+?)%>/g,
        evaluate: /<%([\s\S]+?)%>/g,
        interpolate: /<%=([\s\S]+?)%>/g
    }
};

function initViews(){

    /**
     * Icon select view
     */

    window.VcGGTIconView = vc.shortcode_view.extend( {
        events: function () {
            return _.extend( {
                'click button': 'buttonClick'
            }, window.VcToggleView.__super__.events );
        },
        buttonClick: function ( e ) {
            e.preventDefault();
        },
        changeShortcodeParams: function ( model ) {
            var params,
                $container;

            if ( ! this.iconTemplate ) {
                this.iconTemplate = this.$el.find( '.vc_ggt_icon-container' ).html();
                if( ! this.iconTemplate){ // old version
                    this.iconTemplate = '<div class="ggt-param-template">'
                    + '<h4 class="wpb_element_title"><i class="vc_element-icon icon-ggt-icon"></i>Icon</h4>'
                    + '<div class="vc_ggt_module_container vc_ggt_icon-container">'
                    + '<div class="vc_ggt_icon-title vc_admin_label"><span class="ggt-vc-icon-title">Title: {{ params.icon_title }}</span></div>'
                    + '<i class="mdi {{ params.icon_class }}"></i></div>'
                    + '</div';
                    this.oldVerTemplate = true;
                }
            }
            if ( ! this.$wrapper ) {
                this.$wrapper = this.$el.find( '.wpb_element_wrapper' );
            }

            window.VcGGTIconView.__super__.changeShortcodeParams.call( this, model );

            params = model.get( 'params' );
            if ( _.isObject( params ) ) {
                var $element = $( _.template( this.iconTemplate, { params: params }, templateOptions.custom ) );

                $container = this.$wrapper.find( '.vc_ggt_icon-container' );

                if(this.oldVerTemplate){
                    if($container.length){ // new version
                        this.$wrapper.html( $element.html() );
                    }
                    else{
                        this.$wrapper.append($element);
                    }
                }
                else{
                    $container.html( $element );
                }
            }
        }
    } );


    /**
     * Button view
     */

    window.VcGGTButtonView = vc.shortcode_view.extend( {
        events: function () {
            return _.extend( {
                'click .theme-btn': 'buttonClick'
            }, window.VcToggleView.__super__.events );
        },
        buttonClick: function ( e ) {
            e.preventDefault();
        },
        changeShortcodeParams: function ( model ) {
            var params,
                btnColorClass = "",
                $container,
                $btn,
                $icon;

            if ( ! this.btnTemplate ) {
                this.btnTemplate = this.$el.find( '.vc_ggt_button-container' ).html();

                if( ! this.btnTemplate){ // old version
                    this.btnTemplate = '<div class="ggt-param-template"><h4 class="wpb_element_title"><i class="vc_element-icon icon-ggt-button"></i>Button</h4>' + '<div class="vc_ggt_module_container vc_ggt_button-container">' +
                    '<a href="#" class="theme-btn ggt-vc-button btn-{{ params.button_size }} icon-{{ params.icon_position }}">{{ params.button_text }}</a>' +
                    '</div></div>';
                    this.oldVerTemplate = true;
                }
            }
            if ( ! this.$wrapper ) {
                this.$wrapper = this.$el.find( '.wpb_element_wrapper' );
            }

            window.VcGGTButtonView.__super__.changeShortcodeParams.call( this, model );
            params = model.get( 'params' );

            switch(params.button_color_mode){
                case "theme":
                    btnColorClass = "main-color";
                    break;

                case "theme_alt":
                    btnColorClass = "main-color-alt";
                    break;

                case "select":
                    btnColorClass = "theme-color-preset-" + params.button_color_preset;
                    break;

                case "custom":
                    btnColorClass = "custom-color";
                    break;

                case "none":
                    btnColorClass = "no-color";
                    break;

                default:
                    btnColorClass = "no-color";
                    break;

            }

            if ( _.isObject( params ) ) {
                var $element = $( _.template( this.btnTemplate, { params: params }, templateOptions.custom ) );
                $container = this.$wrapper.find( '.vc_ggt_button-container' );

                if(this.oldVerTemplate){
                    if($container.length){ // new version
                        this.$wrapper.html( $element.html() );
                    }
                    else{
                        this.$wrapper.append($element);
                    }
                }
                else{
                    $container.html( $element );
                }

                $btn = this.$el.find(".theme-btn");

                $btn.addClass(btnColorClass);

                if(params.button_color_mode === "custom"){
                    $btn.css({
                        "background-color": params.button_color_custom,
                        "color": params.button_color_custom_inv
                    });
                }

                if(params.add_icon === "yes"){
                    $icon = $('<i class="ggt-vc-btn-icon ' + params.icon_class + '"></i>');
                    if(params.icon_position === "left"){
                        $btn.prepend($icon);
                    }
                    else if(params.icon_position === "right"){
                        $btn.append($icon);
                    }
                }
            }
        }
    } );

    /**
     * End of views
     */
}

$(document).ready(function() {
    initViews();
});

}(jQuery, jQuery(window)));
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
Jiff Solat
  • 11
  • 1
  • 3
  • do you have jquery loaded? if so what version – Jay Lane Sep 18 '17 at 17:38
  • The `extend()` method is being called on an instance of the Underscore library - have you included that in your page correctly? – Rory McCrossan Sep 18 '17 at 17:45
  • Could you please explain how i can check that? This is a wordpress theme plugin. Everything else is functioning just fine. Not sure how to check that in chrome console? Also this is effecting WordPress Admin Panel portion of WooCommerce. (when the plugin above is turned off everything works fine but i loose function for visual composer) – Jiff Solat Sep 18 '17 at 17:46
  • Attaching a screenshot (that some people may not view) is not always a good idea. Clarify the error, or at least the gist of it, in the question itself, then people will get more of an idea and be more likely to view your console. Also, enclose all of your code in code brackets. – Rachel Gallen Sep 18 '17 at 20:52
  • Sorry I'm a new user, it wont let me attach screenshots that are embeded. Please tell me what else you need from the console and i will add it. I'm not sure how much data i can put here from the chrome console since its wordpress / backend... As far as files loading I'm sure everything else in terms of java running. As far as code i tried, the stack editor wouldn't keep the last line in. again excuse my noob-ness – Jiff Solat Sep 18 '17 at 21:06

0 Answers0