0

I'm facing a strange issue. I have main.js file in my theme (that is extended luma theme), there I have included javascript and jquery of megamenu, add to compare, etc. Now, the issue I'm facing is that the megamenu in mobile view is working fine on local machine but when I deploy the same code(main.js) in server, its not working and it saying the below error when i click the mega menu:

(index):1 Uncaught ReferenceError: show is not defined
    at HTMLAnchorElement.onclick ((index):1)

Below is my main.js file:

define([
    "jquery",
    "lgsign",
    "slick"

],
        function ($, lgsign, slick) {



           // Use the conventional $ prefix for variables that hold jQuery objects.
var $slider2;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration2() {
  // When possible, you should cache calls to jQuery functions to improve performance.
  var windowWidth = $(window).width();
  var numberOfVisibleSlides;

  if (windowWidth < 420) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 768) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 1200) {
    numberOfVisibleSlides = 3;
  }
  else {
    numberOfVisibleSlides = 3;
  }

  return {
    pager: true,
    controls: false,
    auto: true,
    slideWidth: 5000,
    startSlide: 0,
    nextText: ' ',
    prevText: ' ',
    adaptiveHeight: true,
    moveSlides: 1,
    slideMargin: 20,
    minSlides: numberOfVisibleSlides,
    maxSlides: numberOfVisibleSlides
  };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider2() {
  var config = buildSliderConfiguration2();

  if ($slider2 && $slider2.reloadSlider) {
    // If the slider has already been initialized, reload it.
    $slider2.reloadSlider(config);
  }
  else {
    // Otherwise, initialize the slider.
    $slider2 = $('.explore-slider').bxSlider(config);
  }
}

$('.slider-prev').click(function () {
  var current = $slider2.getCurrentSlide();
  $slider2.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
  var current = $slider2.getCurrentSlide();
  $slider2.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider2);
// Configure the slider once on page load.
configureSlider2();



// Use the conventional $ prefix for variables that hold jQuery objects.
var $slider1;

// If the only purpose of the windowWidth() function is to set the slide variables,
// it can be renamed and rewritten to supply the full configuration object instead.
function buildSliderConfiguration1() {
  // When possible, you should cache calls to jQuery functions to improve performance.
  var windowWidth = $(window).width();
  var numberOfVisibleSlides;

  if (windowWidth < 420) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 768) {
    numberOfVisibleSlides = 1;
  }
  else if (windowWidth < 1200) {
    numberOfVisibleSlides = 1;
  }
  else {
    numberOfVisibleSlides = 1;
  }

  return {
    pager: true,
    controls: false,
    auto: true,
    slideWidth: 5000,
    startSlide: 0,
    nextText: ' ',
    prevText: ' ',
    adaptiveHeight: true,
    moveSlides: 1,
    slideMargin: 20,
    minSlides: numberOfVisibleSlides,
    maxSlides: numberOfVisibleSlides
  };
}

// This function can be called either to initialize the slider for the first time
// or to reload the slider when its size changes.
function configureSlider1() {
  var config = buildSliderConfiguration1();

  if ($slider1 && $slider1.reloadSlider) {
    // If the slider has already been initialized, reload it.
    $slider1.reloadSlider(config);
  }
  else {
    // Otherwise, initialize the slider.
    $slider1 = $('.washing-slider').bxSlider(config);
  }
}

$('.slider-prev').click(function () {
  var current = $slider1.getCurrentSlide();
  $slider1.goToPrevSlide(current) - 1;
});
$('.slider-next').click(function () {
  var current = $slider1.getCurrentSlide();
  $slider1.goToNextSlide(current) + 1;
});

// Configure the slider every time its size changes.
$(window).on("orientationchange resize", configureSlider1);
// Configure the slider once on page load.
configureSlider1();



/** menu tab footer script**/

jQuery(document).ready(function(){
  jQuery(".menu").click(function(){
    jQuery(".navbar").toggle();
  });

  jQuery(".footer-arrow").click(function(){
    jQuery(".footer-bottom-innr").toggle();
  });

  jQuery(".tab-cl").click(function(){
    var clid=jQuery(this).attr("id");
  var id=clid.split("-");
  jQuery(".offer-tab-con").hide();
  jQuery(".tab-cl").removeClass("active");
  jQuery("#tabcon-"+id[1]).show();
  jQuery("#cl-"+id[1]).addClass("active");

  });

});


/*** toggle nav **/


/***** Home page tab  ****/

jQuery('#tabs li a').click(function(){
  var t = jQuery(this).attr('id');

  if(jQuery(this).hasClass('inactive')){ //this is the start of our condition 
    jQuery('#tabs li a').addClass('inactive');
    jQuery(this).removeClass('inactive');

    jQuery('.container').hide();
    jQuery('#'+ t + 'C').fadeIn('slow');
 }
});


/*** Acton Calculator ****/

jQuery(".arrow").click(function(){
     jQuery(".action-calculator-body").toggleClass("calculator-full");
     jQuery(".arrow-close").css({'z-index':'99','display':'block'});
     jQuery(".arrow").hide();
  });

  jQuery(".arrow-close").click(function(){
    jQuery(".action-calculator-body").toggleClass("calculator-full");
    jQuery(".arrow").show();
    jQuery(".arrow-close").hide();
  });




/**** Compare product ****/
jQuery(document).ready(function(){
  jQuery(".collaps-all").click(function(){
    jQuery(".sub-catagory-outer").toggle();
  });
  jQuery(".catagory-main-title").click(function(){
    jQuery(".sub-catagory-outer").toggle();
  jQuery(this).toggleClass("arrow-open");
  });
});

jQuery('body').on('click','.sub-catagory-title',function(){
  jQuery(this).closest('table').toggleClass('hidden-area');
});

jQuery(window).scroll(function() {
    var scroll = jQuery(window).scrollTop();
     //>=, not <=
    if (scroll >= 300) {
        //clearHeader, not clearheader - caps H
        jQuery(".compare-pro-list").addClass("com-fixed");
    jQuery(".fixed-com-print").addClass("com-fixed");
    jQuery(".compare-item-info").addClass("com-fixed");
    }else if(scroll < 300) {
        //clearHeader, not clearheader - caps H
        jQuery(".compare-pro-list").removeClass("com-fixed");
    jQuery(".fixed-com-print").removeClass("com-fixed");
    jQuery(".compare-item-info").removeClass("com-fixed");
    }
}); //missing );


/******* Compare Product in list page slider ******/


/******* End Compare list page **********/

/***** compare product list slick slider *****/

jQuery(document).ready(function() {
      "use strict";
      jQuery('.itm > ul > li:has( > ul)').addClass('menu-dropdown-icon');
      jQuery('.itm > ul > li > ul:not(:has(ul))').addClass('normal-sub');
      jQuery(".menus > ul").before("<div class=\"barshw\"><a class=\"iconsclick\" onclick=\"show(this)\"><i class=\"fa fa-bars hideicon\" aria-hidden=\"true\"></i></a></div><div class=\"contentbody\"><div class=\"contentmenu\" onclick=\"stop_propogate(event)\"><div class=\"itm\">"+document.querySelector('.menu-container .menus').innerHTML+"</div>");

      jQuery('.contentmenu  ul li:has( > ul)').each(function(){ 
                          if(jQuery(this).find('a i').length == 0){ 
                                  jQuery(this).find('a')[0].insertAdjacentHTML('beforeend', '<i class="fa fa-angle-down" aria-hidden="true"></i>'); 
                          } 
                  });
      document.querySelectorAll('.contentmenu .u_cat_image').forEach(function(e_im){
        e_im.closest('li').remove();
      });

      jQuery(".menus > ul > li").hover(function(e) {
        if (jQuery(window).width() > 943) {
          var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
          if(el.querySelector('ul li') != undefined){
            jQuery(this).children("ul").stop(true, false).fadeToggle(150);
            setTimeout(function(){
              var el = e.target.tagName.toLowerCase() == 'li' ? e.target : e.target.closest('li');
              var sty = el.querySelector('ul').style.display;
              if(sty == 'block'){
                el.querySelectorAll('.menus > ul > li > ul').forEach(function(se){
                  se.style.display = 'flex';
                });
              }
            }, 160);
            e.preventDefault();
          }
        }
      });
      jQuery("li:has( > ul)").each(function(){
      if(jQuery(this).find('i').length > 0){
        jQuery(this).find('i')[0].addEventListener('click', function(ev){
          if (jQuery(window).width() <= 943) {
              ev.preventDefault();
              ev.stopPropagation();
              jQuery(ev.target).closest('li').children("ul").fadeToggle(150);
           }
        })
       }
     });


      document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 300) + 'px';
    });
    jQuery(window).resize(function() {
      jQuery(".itm > ul > li").children("ul").hide();
      jQuery(".itm > ul").removeClass('show-on-mobile');
    });


// jQuery(function(){
// jQuery(".menus > ul > li > ul").css('height','auto');
// });


  // });





jQuery(document).ready(function($){
  $("#collapse").click(function(){
    $("#overslide").toggle();
  });
});

require(['jquery', 'jquery/ui'], function(jQuery) {
  setTimeout(function(){
    jQuery(document).on('ready scroll', function() {


 jQuery( document ).ready(function() {
   //      setTimeout(function(){
   // if(document.querySelector('.overslide') != undefined){
   //     document.querySelector('.overslide').style.display = 'flex';
     // }
        jQuery('.regular').not('.slick-initialized').slick({
      dots: true,
    infinite: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    arrow:false,
    dots: false,
    collapsible: true,
    mobileFirst: true,
    responsive: [
    {

    breakpoint: 599,
    settings: {
    slidesToShow: 2,
    slidesToScroll: 0,
    prevArrow: null,
    nextArrow: null,
    infinite : false

    },
    breakpoint: 999,
    settings: {
    slidesToShow: 3,


    },
    }
    ]
        });


    });

  });
  }, 1000);

     });



/*** slick end ***/


});

function show(e){
      var att = e.getAttribute('active');
      if(att == undefined || att == "false"){
        e.setAttribute('active', 'true');
        document.querySelector('.contentmenu').style.left = "26px";
        setTimeout(function(){
          document.querySelector('body').addEventListener('click', close_menu);
        }, 100);
      }else{
        e.setAttribute('active', 'false');
        document.querySelector('body').removeEventListener('click', close_menu);
        document.querySelector('.contentmenu').style.left = - (document.querySelector('.contentmenu').clientWidth + 120) + 'px';
      }
    }
    function close_menu(){
      document.querySelector('.iconsclick').click();
    }
    function stop_propogate(ev){
      ev.stopPropagation();
    }

Any help will be appreciated!

0

Can you please try same after disable JS Minify.

Stores > Configuration > Advanced > Developer > JavaScript Settings

Disable the Option, then Run all following commands:

php bin/magento s:up && php bin/magento s:d:c && php bin/magento s:s:d -f && php bin/magento c:c && php bin/magento c:f

Then this issue does not arise.

Hope this will help you!!

  • Thanks. I will try. But I have query, the js minify is one of the feature in Magento to improve the performance. So, If I disable the option, the performance is not good, right. Please guide me. – Siva Nov 1 at 5:59
  • once try this, if problem gets solved, then we need to purify our js code, so that it gets work with minify. – Oscprofessionals Nov 1 at 6:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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