NEW Xtreme Bootswatch Theme

Hi Guys

Just to let you know I have updated the Bootstrap Multi Theme Demo with some new features and fixes.

Please don't forget to checkout the admin area, as I have also upgraded the Multi Vendor Zoom lots of new features, please also note that these plugins work in Both our Bootstrap Theme and the nopCommerce Default Theme.

Desktop: https://demo.nopresponsive.com/

Devices: http://deviceponsive.com/

Download Free Trail Version here: www.nopresponsive.com/nopcommerce-bootswatch-theme

As always any feedback is most welcome, Good or Bad.

Kind Regards
Ron Palmer

Hi Guys

Just a quick line to let you know our new 3.60 is almost done and hopefully will be ready for release next week, I have created demo site that we are are uploading to at the moment, but I thought you might like to take a quick look and let us know what you think, please remember there are 20 different colour schemes this Template, the price will be set at £49.00.

This is a BOOTSTRAP Version of the fantastic Default Theme, that Nop-Templates has kindly created.

Please see here : 3.60 version

Please ignore The shopping Cart as is next on my list.

XtremeCommerce wrote:

nice one, I'm working on the same theme, I do think that for developers bootstrap is a must.
in any case your main slider is  not responsive

Hi Hezy

Thanks for taking a taking a look for me and your feedback it is much appreciated, I replied to a post the other day about Multi Vendor and said it was a shame you could not ignite the Multi Vendor version you started, as it was a really good effort and in my opinion maybe better than what we have at the moment, maybe you could think about starting again ?.

Just a quick review:

*There are some load errors for fonts
*Newsletter subscription is showing in 2 places
*Click assistance is annoying. Poping from everywhere
*For menu improvement: Pics can be added on megamenu - with responsive bootstrap slider

CatalogController.cs:
                var categoryModel = new CategorySimpleModel
                {
                    Id = category.Id,
                    Name = category.GetLocalized(x => x.Name),
                    SeName = category.GetSeName(),
                    IncludeInTopMenu = category.IncludeInTopMenu,
                   Picture=_pictureService.GetPictureUrl(category.PictureId)
                };

Category Simple models:

public string Picture { get; set; }

Topmenu.cshtml:

@helper RenderCategoryLine(CategorySimpleModel category, int level, bool responsiveMobileMenu)
{
    if (level == 0)
    {
        <li class="dropdown mega-dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-transform:capitalize">@T(category.Name)<span class="glyphicon pull-right"></span></a>

            @if (category.SubCategories.Count > 0)
            {

                <ul class="dropdown-menu mega-dropdown-menu row">
                    <li class="col-sm-4">
                        <ul>
                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner">
                                    @{string cclass = "item active";}
                                    @foreach (var subCategory in category.SubCategories)
                                    {
                                        <div class="@cclass" align="left">
                                            <a href="@Url.RouteUrl("Category", new { SeName = subCategory.SeName }) ">
                                                <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="@subCategory.Picture" width="640" height="480" alt="@subCategory.Name">
                                                <h4><medium>@subCategory.Name</medium></h4>
                                            </a>
                                        </div><!-- End Item -->
                                        cclass = "item";
                                    }


                                    @* <div class="item active" align="left">
                                            <a href="#"><img src="~/Themes/Nopshop/Content/css/images/menu/office.jpg" alt="oturma odası"></a>
                                            <h4><medium>Oturma Odaları</medium></h4>
                                        </div><!-- End Item -->
                                        <div class="item">
                                            <a href="#"><img src="~/Themes/Nopshop/Content/css/images/menu/office.jpg" alt="oturma odası"></a>
                                            <h4><medium>Yatak Odaları</medium></h4>
                                        </div><!-- End Item -->
                                        <div class="item">
                                            <a href="#"><img src="~/Themes/Nopshop/Content/css/images/menu/office.jpg" alt="oturma odası"></a>
                                            <h4><medium>Ofis-İşyeri</medium></h4>
                                        </div><!-- End Item -->
                                    *@
                                </div><!-- End Carousel Inner -->
                            </div><!-- /.carousel -->
                        </ul>
                    </li>
                    <li class="col-sm-8">
                        <ul class="mega-dropdown-menu row">

                            @foreach (var subCategory in category.SubCategories)
                            {

                                <li class="dropdown-header col-sm-2">
                                    <a class="dropdown-header" href="@Url.RouteUrl("Category", new { SeName = subCategory.SeName }) ">@subCategory.Name</a>
                                    @RenderCategoryLine(subCategory, level + 1,responsiveMobileMenu)
                                </li>
                            }

                        </ul>
                    </li>


                </ul>
            }
        </li>
    }
    else if (level == 1)
    {

        if (category.SubCategories.Count() > 0)
        {
            int catcounts = 0;
            <ul class="mega-dropdown-menu">

                @foreach (var subCategory in category.SubCategories)
                {
                    @RenderCategoryLine(subCategory, level + 1,responsiveMobileMenu);
                                                               catcounts++;
                                                               if (catcounts > 22)
                                                               {
                                                                   break;
                                                               }

                }
            </ul>

        }

    }
    else if (level == 2)
    {
        <li> <a href='@Url.RouteUrl("Category", new { SeName = category.SeName }) '> @category.Name</a></li>
    }

}

    @*
            @helper RenderCategoryLine(CategorySimpleModel category, int level, bool responsiveMobileMenu)
    {

        <li>
            <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">@category.Name
            @if (category.NumberOfProducts.HasValue)
            {
                <text> </text>@T("Categories.TotalProducts", category.NumberOfProducts.Value)
            }
            </a>
            @{
                //subcategories
                var subCategories = responsiveMobileMenu ?
                    //responsive (all categories)
                    category.SubCategories :
                    //standard design (only categories with "IncludeInTopMenu")
                    category.SubCategories.Where(x => x.IncludeInTopMenu).ToList();

                var levelClass = "";
                if (level == 0)
                {
                    levelClass = "first-level";
                }
                if (subCategories.Count > 0)
                {
                    <div class="sublist-toggle"></div>
                    <ul class="sublist @levelClass">
                        @foreach (var subCategory in subCategories)
                        {
                            @RenderCategoryLine(subCategory, level + 1, responsiveMobileMenu)
                        }
                    </ul>
                }
            }
        </li>
            }
    *@


<ul class="top-menu">
  
    @Html.Widget("header_menu_before")

    @{
        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
    }
    @foreach (var category in rootCategories)
    {
        @RenderCategoryLine(category, 0, false)
    }
    @foreach (var topic in Model.Topics)
    {
        <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a>TOPICC</li>
    }
    @if (rootCategories.Count == 0 && Model.Topics.Count == 0)
    {
        //no categories or topis to display? in this case let's diplay some default menu items (should we?)
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        if (Model.RecentlyAddedProductsEnabled)
        {
            <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
            </li>
        }
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a></li>
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        if (Model.BlogEnabled)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        if (Model.ForumEnabled)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @Html.Widget("header_menu_after")
</ul>

@{
    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = (rootCategoriesResponsive.Count > 0 && Model.Topics.Count == 0) ? T("Categories") : T("Menu");
    <div class="menu-toggle">@responsiveMenuTitle</div>
    <ul class="top-menu mobile">
        @Html.Widget("mob_header_menu_before")
        
        @foreach (var category in rootCategoriesResponsive)
        {
            @RenderCategoryLine(category, 0, true)
        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
        }
        @if (rootCategoriesResponsive.Count == 0 && Model.Topics.Count == 0)
        {
            //no categories or topis to display? in this case let's diplay some default menu items (should we?)
            <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
            if (Model.RecentlyAddedProductsEnabled)
            {
                <li>
                    <a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                </li>
            }
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
            if (Model.BlogEnabled)
            {
                <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
            }
            if (Model.ForumEnabled)
            {
                <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
            }
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        @Html.Widget("mob_header_menu_after")
    </ul>
    
    <script type="text/javascript">
        $(document).ready(function () {
            $('.menu-toggle').click(function () {
                $(this).siblings('.top-menu.mobile').slideToggle('slow');
            });
            $('.top-menu.mobile .sublist-toggle').click(function () {
                $(this).siblings('.sublist').slideToggle('slow');
            });
        });
    </script>
}

Hi dianoche

Many thanks for your kind feedback it's much appreciated, as I mentioned earlier there is still some work to do before it can go out, we are currently working the CSS so that should take care of the font issues, I will certainly take a look at the support popup, it is not supposed to be that annoying :(, and thanks for the suggestion re  the images, I'll take a look at it when as soon as I have a moment.

XtremeCommerce wrote:

I can provide css as well for the megamenu :) so i can use your theme :)

Hi Dianoche

You might be interested to know, there is 4 different views for the Mega Menu: Grid, Line, List and Thumbnail, and these are selectable from the admin area, but I am hoping to be finished early next week and then we can discuss how to implement your  suggestion, as we are always open to suggestions on how to improve what we do. :)

I would also suggest something for seach.

here is a good expending search icon

Hi

You mean a expandable search box like this, please take a look now !!!.

If you would like to view the admin for the Menu please drop me a line here: [email protected] and I'll send you the login details.

Or alternatively you can contact me on Skype here: xtremecommerce