我如何将自定义部分添加到 broadleaf 的主页

Question

您好，我是 broadleaf 的新手，我想将定制产品添加到 broadleaf 的主页，例如主页将同时加载两个类别的产品，例如首页将要加载最畅销的产品和热门产品酱汁。

请帮我解决问题。

提前致谢

Answer 1

首先，我对阔叶树也没有那么多经验，但我的背景使我很容易全神贯注（我认为），并且有很多不同的方法可以做到这一点和这实际上取决于您最终喜欢如何维护列表，以及您的经验水平。正如你所说的你才刚刚开始，我会告诉你我认为最简单的方法。

首先，假设您使用的是最新版本的演示站点。在这种情况下，主页实际上只是一个带有自定义模板的类别。如果您查看管理应用程序的 "Home" 类别和 select "Products" 选项卡，您将看到演示商店主页上显示的 4 种辣酱的列表. 这里要注意的重要一点是，它不是 "Hot Sauces" 类别，它是管理应用程序中 selected 的特定子集，让您不仅可以控制显示的项目，还可以控制显示的项目数。

如果您看过主页 html 模板中的代码，您会看到如下内容：

<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>

这是在主页上显示辣酱列表的演示站点中的代码。 CategoryController 检索了该类别的产品列表并将它们放入模型中。

现在，将第二个产品列表添加到主页的绝对最简单 方法是使用相同的技术。在管理员中查看 "Marketing" 选项卡，您将在 "Featured Products" 部分看到相同的 4 种产品列表。据我所知，这实际上并没有在新版本的演示站点中使用。请注意，还有 upsell 和 xsell 产品列表，但为此我将使用特色产品列表。我建议您现在将这些更改为其他一些产品，这样您就可以看到主页的更改稍后会拉出正确的列表。在 homepage.html 中插入类似于以下代码的内容（它类似于您在上面看到的代码）：

 <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>

大功告成。

这当然不是唯一的方法，甚至不是最好的方法，除非你对最好的定义是"It takes 5 minutes and 6 lines of HTML"。在某些时候，根据您的要求，您最终可能会创建一个特定的 HomepageController，这种方法在这种情况下应该仍然有效，无需自定义管理界面，只要数据仍然由控制器放入模型中。

仅供参考：主页模板位于 site/src/main/resources/webTemplates/layout/homepage。html

我如何将自定义部分添加到 broadleaf 的主页

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

broadleaf-commerce