.perfectScrollbar is not a function

When attempting to click on the Mega Menu equivalent top link in the mobile view, the sub-menu is not displaying. The console then displays the error .perfectScrollbar is not a function. 

You can see for your self at: http://extremeledlightbars.com/. Click the center menu button at the top and click the Products menu item arrow.

I tried adding a reference to perfectScrollbar in the <heade> section, but it did not fix it.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>

How can I fix this?

Thanks in advance,
Chad

Hi Chad,

Can you make sure that perfect-scrollbar.min.js file is present in the Plugins\SevenSpikes.Nop.Plugins.Core\Scripts folder?

Also, in the \Themes\Traction\Views\Shared\Head.cshtml file, around line 51 you should have this: Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/perfect-scrollbar.min.js");

Looking forward to your reply!

Thanks Hristian for your quick reply. So I do have that .js file, but I did not have that reference to it in Head.cshtml, so I added it at line 51 (see below in bold):

@using Nop.Web.Framework;
@using Nop.Core.Infrastructure;
@using Nop.Web.Framework.UI;
@using Nop.Core;
@{
    var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
    
    var browser = Request.Browser;
    var isIeEightOrLess = false;
    if (browser.Browser == "IE" && browser.MajorVersion <= 8)
    {
        isIeEightOrLess = true;
    }
    if (isIeEightOrLess)
    {
        Html.AppendCssFileParts("~/Themes/Traction/Content/css/ie8-fix.css");
    }

    if (supportRtl)
    {
        if (browser.Browser == "Safari")
        {
            Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/safari-fix.rtl.css");
        }
        
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/980.rtl.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/768.rtl.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/480.rtl.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/mobile-only.rtl.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/tables.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/980.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/768.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/tables.css");
    }
    
    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/styles.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Traction/Content/CSS/styles.css");
    }

    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.js");
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/perfect-scrollbar.min.js");
    if (isIeEightOrLess)
    {
        Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/selectivizr.min.js");
        Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/respond.min.js");
    }
    Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/footable.js");
    Html.AddScriptParts("~/Themes/Traction/Content/scripts/traction.js");
}

However, now I do not get that error, but when clicking the Products link arrow to show the categories, the sub-tree of categories is not displayed and no errors are thrown in the chrome console.

I can see the .close class being added to the <div class="plus-button"></div> element, so something is firing, but the categories are not displayed. You can verify this yourself by navigating to http://ExtremeLEDLightBars.com with your mobile device or by emulating a mobile device in Chrome dev tools.

Any ideas?

Thanks in advance!
Chad

Hi Chad,

I can see that there are a lot of mark up difference between your site and our demo site ( http://themes.traction.nop-templates.com/ ) and maybe this is the reason why the menu is not expandable on mobile devices.

Could you please update your theme to the latest version as I believe this will fix everything that is related to the menu. You can follow this article: https://www.nop-templates.com/how-to-update-a-nopcommerce-theme

Hope this helps!