Seperated Category Product in Home Page

Hi everybody

I'm want customize to seperated Category Product of parent Category on Home Page (Show product on Home Page) instead combine to 1 block. In file HomepageProducts.cshtml

I using no_source.

Example: on homepage

Featured Books products
  item-box     item-box        item-box
  item-box     item-box        item-box

Featured Computers  products
  item-box     item-box       item-box
  item-box     item-box       item-box

Featured Electronics  products
  item-box     item-box       item-box
  item-box     item-box       item-box


.....
Thank for support!

Hi,

I have a very simple and easy solution for you, but it is a TRICKY solution :).

Basically, it will be build on the product and related products concepts.
The idea here is get specified unpublished products to display as groups in homepage, and each group will have its related products.
So that, you will have multiple groups look like separated categories on homepage.

Following are steps to do it:

- STEP 1: Create a setting in order to store information about how many and which product(s) will be display on the homepage
- STEP 2: Create a partial view that will render the separated categories on the homepage
- STEP 3: Add this partial view to the homepage view
- STEP 4: Re-style related products section
- STEP 5: Create some data to verify the solution :)

STEP 1 Create setting

- Go to Admin > Configuration > Settings > All Settings (Advanced)
- Click on the "+ Add new record" button
- Input following values:
  + Setting name: "homepagesettings.groupids"
  + Value: enter some unpublished product ids here (ex.: 55, 56) - in comma separated format
  + Store: select the desired store

STEP 2 Create partial view for separated category groups

- Create a new partial view named "_SeparatedProductGroup.cshtml" under "Themes/DefaultClean/Views/Home" folder
- Place following code inside it:

@using Nop.Core.Domain.Catalog
@using Nop.Core.Infrastructure
@using Nop.Services.Catalog
@using Nop.Services.Configuration
@{
    var engineContext = EngineContext.Current;
    var settingService = engineContext.Resolve<ISettingService>();
    var productService = engineContext.Resolve<IProductService>();

    var homepageGroups = Enumerable.Empty<Product>();
    var idsValue = settingService.GetSettingByKey<string>("homepagesettings.groupids");
    if (!string.IsNullOrEmpty(idsValue))
    {
        var idList = idsValue.Split(',');
        if (idList.Any())
        {
            homepageGroups = idList.Select(i => productService.GetProductById(Int32.Parse(i)));
        }
    }
}
@if (homepageGroups.Any())
{
    <div class="homepage-product-categories">
        @foreach (var homepageGroup in homepageGroups)
        {
            <section class="homepage-product-category">
                <header>@homepageGroup.Name</header>
                @Html.Action("RelatedProducts", "Product", new { productId = homepageGroup.Id })
            </section>
        }
    </div>
}

STEP 3 Add the separated category groups partial view to the homepage view

- Copy/paste the "Home/Index.cshtml" view to the "Themes/DefaultClean/Views/Home" folder
- Add the created partial view to it:

  BEFORE
  ---

@{
    Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
<div class="page home-page">
    <div class="page-body">
        @Html.Widget("home_page_top")
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Widget("home_page_bottom")
    </div>
</div>

  AFTER
  ---

@{
    Layout = "~/Views/Shared/_ColumnsThree.cshtml";
}
<div class="page home-page">
    <div class="page-body">
        @Html.Widget("home_page_top")
        @Html.Action("TopicBlock", "Topic", new { systemName = "HomePageText" })
        @Html.Action("HomepageCategories", "Catalog")
        @Html.Action("HomepageProducts", "Product")
        @Html.Action("HomepageBestSellers", "Product")
        @Html.Action("HomePageNews", "News")
        @Html.Action("HomePagePolls", "Poll")
        @Html.Partial("_SeparatedProductGroup")
        @Html.Widget("home_page_bottom")
    </div>
</div>

STEP 4 Re-style the related product(s) section

- Open the "Themes/DefaultClean/Content/styles.css" file
- Add following code at the bottom of this file

.homepage-product-category .related-products-grid.product-grid .title{
    display: none;
}

STEP 5 Create sample data

- Go to Admin > Catalog > Products > Manage Products
- Add 2 new products with its property "Published" is unchecked (ex.: 2 new created products have id are: 55, 56)
- Go to "Related products" tab in each product (that created above), add some related products
- Go back to Admin > Configuration > Settings > All Settings (Advanced)
- Update created products ids "55, 56" as the value of the "homepagesettings.groupids" key
- Finally, restart application or reset IIS to take effect.

Hope this help :)

Thank you for your solution!
There are methods to dynamically add and renew the product?

I found a page in the showcase for this solution.
http://www.lindadress.com/

ngtrian wrote:

Yes :D

- To add new group:
  + Create a new unpublished product, named it, for example "Featured Wedding Catalog"
  + Add related products to it
  + Add its ID (ex.: 60 - an integer number that you can see in the browser's address when editing a product) to the "homepagesettings.groupids" setting key, like "55, 56, 60"

I have done! :D
A good solution
Hope more customize homepage in next version of nopCommerce.