Profile: Stefan

Hi Gloria,

The DefaultClean theme has nothing to do with the Nop Lavella theme in terms of design. However if you need to add quantity to the shopping cart link just follow the instructions below:

1. In Themes\Lavella\Views\Shared\_Root.cshtml change as shown below:

@using Nop.Services.Orders;
@using Nop.Core;
@using Nop.Core.Infrastructure;
@using Nop.Core.Domain.Orders;
@{
    var storeId = EngineContext.Current.Resolve<IStoreContext>().CurrentStore.Id;
    var customer = EngineContext.Current.Resolve<IWorkContext>().CurrentCustomer;
    var quantity = customer.ShoppingCartItems.Where(sci => sci.ShoppingCartType == ShoppingCartType.ShoppingCart).LimitPerStore(storeId).ToList().GetTotalProducts();
}
@Html.Widget("body_start_html_tag_after")

The lines in bold are the added ones.

Also

 <div class="shopping-cart-link">
      <a href="@Url.RouteUrl("ShoppingCart")">@T("ShoppingCart")</a>
 </div>
 <div class="shopping-cart-link-quantity">
      <a href="@Url.RouteUrl("ShoppingCart")">(@quantity)</a>
 </div>

The lines in bold are the added ones.

<script type="text/javascript">
    AjaxCart.init(false, '.cart-qty', '.header-links .wishlist-qty', '#flyout-cart');
</script>

The line in bold is the changed one.

2. In admin -> plugins -> 7Spikes Themes -> Nop Lavella Theme -> Settings -> Custom headstyles textbox add the following:

.responsive-nav-wrapper .shopping-cart-link-quantity { display: inline-block; }
.responsive-nav-wrapper .shopping-cart-link-quantity a { text-indent: 0; color: #888; line-height: 50px; font-size: 16px; margin-left: -20px; }


Hope that helps!

Hi Gloria,

There is no quantity to the shopping cart icon on mobile devices by design. Not only that but also a limitation because on mobile the shopping cart icon is a new html element that is added specifically for the theme, and when adding a product to your cart via nopCommerce's ajax cart button, this mobile shopping cart quantity will not update. This is another reason not to place a quantity for mobile devices.

However I think that this is a good suggestion that you can add in our user voice portal.

Thanks again!

Hi again,

I did have a look at your site and looks like the SevenSpikes.Core is not updated and more specifically the SevenSpikesExtensions.js file. I assume that your license had expired and that is why you are not able to download the latest version. 

If this is the case would it be possible to send an email to [email protected] so that I can send you the latest js file.

As to the fix you have made, actually I am not aware of such kind of structure. The interesting thing is that no error is thrown, but when I try that in the console I receive again the error. 

The error that you were noticing is on a place where we check against mobile device so that to disable the cloud zoom on mobile devices. Now with your fix the cloud zoom is integrated on mobile devices as well.

So if possible send us an email and we will send you the latest version of the js files which should not throw any errors.

Looking forward to your reply!

Hi again,

We haven't heard from you these days. I can suggest to update the SevenSpikes.Core plugin by downloading the package again from your My Downloads section and replace the Plugins/SevenSpikes.Core folder with the one from the downloaded package. Then load the site again and clear your browser's cache.

Please let us know when you do that so that we can see if the issue still exists.

Hi again,

I was looking at your site for some time and also noticed that from time to time the specified error is thrown. I am not sure why is that, because the js file which defines this function is present on your site.

Would it be possible to submit a ticket so that we can send you an updated versions of some of the js files to see whether this issue will occur again.

Looking forward to your reply!

Thank you for your patience and understanding!

Hi again,

There was a know issue related to this error, but it was fixed a month ago maybe. Would it be possible to download the theme again from your My Downloads section and replace the folder of the JCarousel plugin with the one from the downloaded package. Then just refresh the browser after clearing its cache.

Please let me know if the issue still occurs after using the latest Nop JCarousel plugin.

Hi again,

By looking at your screenshots I think that there is some js error that prevents the jcarousel to initialize. That is why also the Nop Quick Tabs are not initialized. Would it be possible to inspect by pressing F12 in your browser and see if there is any js error in the inspector.

Looking forward to your reply!

Hi there,

This is really strange, because when enabling the product thumbs in a carousel it displays only 4 and all others can be displayed when rotating the images in the carousel. You can have a look at our demo - this product has 6 pictures and they work as expected without any issues. Do you mean that on your site the product page looks different. Have you made any customization to the theme. If you could send us a link or a screenshot at least, we can see what might be wrong. Do you have any js errors on the page which can prevent the carousel to work as expected.

Looking forward to your reply!

Hi Justin,

Thank you for your feedback!

This issue had been already fixed! In order to integrate the fix, just go to your My Downloads section and download the theme again. Then just replace the Themes/Nitro folder with the one from the downloaded package. If you have made any customization, you will need to replace the Themes/Nitro/Views/Catalog folder.

Please let me know if this fixes the issue!

Hi jm2webdesigners,

You can make the header menu sticky bu adding the following:

In your Themes/Alfresco/Content/Scripts/Alfresco.js add the following within the document ready event:

   

 $(".header-menu").wrap('<div id="headerMenuParent"></div>');

    stickyNav(".header-menu", "#headerMenuParent");
    
    $(window).on("scroll", function () {
        stickyNav(".header-menu", "#headerMenuParent");
    });

Open your Themes/Alfresco/Content/css/styles.css and add the following at the end of the file:

@media all and (min-width: 981px) {

    .header-menu.stick, .master-home-page .header-menu.stick {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        margin: 0;
        box-shadow: 0 2px 3px rgba(0,0,0,.2);
        text-align: center;
        padding: 0;
        width: 100%;
    }

        .header-menu.stick > ul {
            display: inline-block;
        }


        .header-menu.stick .mega-menu, .header-menu.stick .top-menu, .master-home-page .header-menu.stick .mega-menu, .master-home-page .header-menu.stick .top-menu {
            width: 980px;
        }
}


Hope that helps!