How Can i add the customized section to home page in broadleaf - broadleaf-commerce

Question

Hi I am new to broadleaf and i want to add the customized products to home page of broadleaf like the home page will load two cateogries of products at at time for example the home will want to load top sale products and hot sauces.
Please help me to Solve the issue.
Thanks in Advance

Answer 1

First off, i am not that experienced with broadleaf either, but my background has made it pretty easy for me to wrap my head around ( i think), and there are a quite a few different ways to do this and it really depends on how you ultimately like to maintain the lists, and your experience level.
As you have said you are just getting started, i'll give you what i think is the most simple way to do this.
First, assuming you are working from a recent version of the demo site. In this case, the home page is actually just a category with a custom template. If you look in the Admin app at the "Home" category and select the "Products" tab, you will see a list of the 4 Hot Sauces that are displayed on the home page in the Demo store.
The important thing to note here is that it is specifically not the "Hot Sauces" category, it is a specific subset that is selected in the admin app, giving you control of the not only the items displayed but the number of items displayed.
If you have seen the code in the homepage html template, you will see something like:
<div class="row">
<h3 class="text-center">
The Heat Clinic's Top Selling Sauces
</h3>
<th:block th:if="${products}" id="products" class="group" th:each="product : ${products}" th:object="${product}" >
<div class="col-sm-6 col-md-3" th:if="${product.isActive()}"
th:include="catalog/partials/productListItem">
</div>
</th:block>
</div>
This is the code in the demo site that is displaying the list of hot sauces on the home page. The CategoryController retrieved ths list of products for the category and put them in the Model.
Now, the absoloute easiest way to add a second list of products to the home page is use the same technique. In Admin look at the "Marketing" tab, you will see the same list of 4 products in the "Featured Products" section. As far as I am aware this is not actually being used in the new versions of the demo site. Note that there is also the upsell and xsell product lists, but for this purpose i am just going to use the Featured Products list. I suggest you change these to some other products now just so you can see the changes to the home page are pulling the correct list later.
In homepage.html insert something like the following code (it's similar to the code you looked at above):
<div class="row">
<h3 class="text-center">Top Selling Products</h3>
<th:block th:if="${category?.featuredProducts}" id="featuredProducts" class="group" th:each="featuredProduct : ${category.featuredProducts}">
<div class="col-sm-6 col-md-3" th:with="product=${featuredProduct.product}" th:object="${featuredProduct.product}"
th:include="catalog/partials/productListItem">
</div>
</th:block>
</div>
And your done.
This is certainly not the only way, or even the best way, unless your definition of best is "It takes 5 minutes and 6 lines of HTML".
At some point, depending on how your requirements pan out, you may end up creating a specific HomepageController, this approach should still work in that case, without customising the admin interface, as long as the data is still put in the model by the controller.
FYI: The homepage template is located at site/src/main/resources/webTemplates/layout/homepage.html