The latest version of nopCommerce (i.e. 3.60 version) offers a full width nivo slider out of the box on the homepage. The new theme is great and following the latest trend of having a full width slider on the homepage. A lot of nopCommerce users like to change the design a little bit so that their store site stands out more as compared to the default theme.
Many nopCommerce users might be aware of the fact that, the layout (master page) can be changed for the homepage that offers 2 sections. The layout looks great but that puts the nivo slider on the right column like this:
In order to have full width nivo slider using two column layout in nopCommerce:
1) Go to: Views / Home / Index.cshtml <-- Open this file
2) At the top, change layout from "_ColumnsThree.cshtml" TO "_ColumnTwo.cshtml"
3) Comment out (or remove) this code like this: @Html.Widget("home_page_top")
@{ Layout = "~/Views/Shared/_ColumnsTwo.cshtml";}<div class="page home-page"> <div class="page-body"> @*@Html.Widget("home_page_top")*@ @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" }) @Html.Widget("home_page_before_categories") @Html.Action("HomepageCategories", "Catalog") @Html.Widget("home_page_before_products") @Html.Action("HomepageProducts", "Product") @Html.Widget("home_page_before_best_sellers") @Html.Action("HomepageBestSellers", "Product") @Html.Widget("home_page_before_news") @Html.Action("HomePageNews", "News") @Html.Widget("home_page_before_poll") @Html.Action("HomePagePolls", "Poll") @Html.Widget("home_page_bottom") </div></div>
4) Go to: Views / Shared / _ColumnTwo.cshtml <-- Open this file
5) Add this at the top after layout: @Html.Widget("home_page_top")<br />
Like this:
@{ Layout = "~/Views/Shared/_Root.cshtml";}@Html.Widget("home_page_top")<br />@{ //current category ID int currentCategoryId = 0; if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) && Url.RequestContext.RouteData.Values["action"].ToString().Equals("category", StringComparison.InvariantCultureIgnoreCase)) { currentCategoryId = Convert.ToInt32(Url.RequestContext.RouteData.Values["categoryId"].ToString()); } //current manufacturer ID int currentManufacturerId = 0; if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("catalog", StringComparison.InvariantCultureIgnoreCase) && Url.RequestContext.RouteData.Values["action"].ToString().Equals("manufacturer", StringComparison.InvariantCultureIgnoreCase)) { currentManufacturerId = Convert.ToInt32(Url.RequestContext.RouteData.Values["manufacturerId"].ToString()); } //current product ID int currentProductId = 0; if (Url.RequestContext.RouteData.Values["controller"].ToString().Equals("product", StringComparison.InvariantCultureIgnoreCase) && Url.RequestContext.RouteData.Values["action"].ToString().Equals("productdetails", StringComparison.InvariantCultureIgnoreCase)) { currentProductId = Convert.ToInt32(Url.RequestContext.RouteData.Values["productId"].ToString()); }}@if (IsSectionDefined("Breadcrumb")){ @section Breadcrumb { @RenderSection("Breadcrumb") } }<div class="side-2"> @if (IsSectionDefined("left")) { @RenderSection("left") } else { @Html.Widget("left_side_column_before") @Html.Action("CategoryNavigation", "Catalog", new { currentCategoryId = currentCategoryId, currentProductId = currentProductId }) @Html.Widget("left_side_column_after_category_navigation") @Html.Action("ManufacturerNavigation", "Catalog", new { currentManufacturerId = currentManufacturerId }) @Html.Action("VendorNavigation", "Catalog") @Html.Action("RecentlyViewedProductsBlock", "Product", new { productThumbPictureSize = 64 }) @Html.Action("PopularProductTags", "Catalog") @Html.Action("PollBlock", "Poll", new { systemKeyword = "LeftColumnPoll" }) @Html.Widget("left_side_column_after") }</div><div class="center-2"> @Html.Widget("main_column_before") @RenderBody() @Html.Widget("main_column_after")</div>
Save changes and you will see your nivo slider in full width of your homepage at the top.
A copy of this article is also available on Arvixe Blog.
