To make the plugin work with your theme, copy the the file Views/NewProductsHomePage.cshtml and past it in *preferably* the Themes/YourThemeFolder/Views/Product folder on your website. Next edit the cshtml file to match your theme calling the appropriate css classes. Lastly, return to the configuration page and change the 'New Products View Location' setting to the new breadcrumb you selected.
For example, the screenshot mentioned above shows the view using the NopElectro theme. After copying the NewProductsHomePage.cshtml file to the Themes/NopElectro/Views/Product folder, you would set the 'New Products View Location' setting to "Themes/NopElectro/Views/Product/NewProductsHomePage.cshtml" (without quotes or leading '../' or '~/'). The cshtml file content was changed to the following to get the effects shown in the screenshot:
@model IList<ProductOverviewModel>
@using Nop.Web.Models.Catalog;
@if (Model.Count > 0)
{
<div class="home-page-product-grid">
<h2 class="owl-title title">
@T("HomePage.NewProducts")
</h2>
<div class="item-grid owl-carousel">
@foreach (var item in Model)
{
<div class="item-box">
@Html.Partial("_ProductBox", item)
</div>
}
</div>
</div>
}
Note only the css classes were changed to include the owl-carousel format used by the NopElectro theme.
The output location is controlled by the widget zone setting selected. You can find widget zones by reviewing the cshtml files of your website for entries such as "
@Html.Widget("footer")". The notation inside the quotes is a widget zone, "footer" in this case. The New Product Display Widget appends the display to the end of your chosen widget zone. Hover over the settings hints(?) on the configuration page for defaults.
NopCommerce has a New Products page accessible by a link in the footer. New Product Display Widget includes the setting to enable/disable this page and link. The setting (in NopCommerce Admin or the plugin) does not affect the plugin and vice versa. You may use one or the other or both the widget and the New Product page.
Thanks for trying out this plugin!