Comment puis-je ajouter la section personnalisée à la page d'accueil dans broadleaf

Question

Salut, je suis nouveau à broadleaf et je veux ajouter les produits personnalisés à la page d'accueil de broadleaf comme la page d'accueil chargera deux catégories de produits à la fois par exemple le la maison voudra charger les produits les plus vendus et les sauces chaudes.

S'il vous plaît aidez-moi à résoudre le problème.

Merci à l'avance

Answer 1

Tout d'abord, je ne suis pas connu avec feuillue non plus, mais mon expérience a rendu assez facile pour moi d'envelopper ma tête (je crois), et il y a un certain nombre différentes façons de le faire et cela dépend vraiment de la façon dont vous aimez finalement maintenir les listes, et votre niveau d'expérience. Comme vous l'avez dit vous commencez tout juste, je vais vous donner ce que je pense est le moyen le plus simple de le faire. Tout d'abord, en supposant que vous travaillez à partir d'une version récente du site de démonstration. Dans ce cas, la page d'accueil est en fait juste une catégorie avec un modèle personnalisé. Si vous regardez dans l'application d'administration dans la catégorie "Accueil" et sélectionnez l'onglet "Produits", vous verrez une liste des 4 sauces Hot qui sont affichées sur la page d'accueil dans le magasin de démonstration. La chose importante à noter ici est que ce n'est pas spécifiquement la catégorie "Hot Sauces", c'est un sous-ensemble spécifique qui est sélectionné dans l'application admin, vous permettant de contrôler non seulement les éléments affichés mais le nombre d'éléments affichés.

Si vous avez vu le code dans le modèle html site web, vous verrez quelque chose comme:

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

Voici le code dans le site de démonstration qui affiche la liste des sauces chaudes sur la page d'accueil. Le CategoryController a récupéré cette liste de produits pour la catégorie et les a mis dans le modèle.

Maintenant, l'absoloute plus facile d'ajouter une deuxième liste de produits à la page d'accueil est d'utiliser la même technique. Dans Admin, dans l'onglet "Marketing", vous verrez la même liste de 4 produits dans la section "Produits phares". Pour autant que je sache, cela n'est pas réellement utilisé dans les nouvelles versions du site de démonstration. Notez qu'il y a aussi les listes de produits upsell et xsell, mais à cette fin, je vais juste utiliser la liste des produits en vedette. Je vous suggère de les changer pour d'autres produits juste maintenant afin que vous puissiez voir les changements à la page d'accueil tirent la bonne liste plus tard. Dans homepage.html insérer quelque chose comme le code suivant (il est similaire au code regardé ci-dessus):

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

Et votre fait.

Ce n'est certainement pas la seule façon, ou même la meilleure, à moins que votre définition du meilleur est «Cela prend 5 minutes et 6 lignes de HTML». À un certain moment, en fonction de la configuration de vos besoins, vous pouvez créer un HomepageController spécifique, cette approche devrait fonctionner dans ce cas, sans personnaliser l'interface d'administration, tant que les données sont toujours placées dans le modèle par le contrôleur.

Pour votre information: Le modèle de page d'accueil est situé à site/src/main/resources/WebTemplates/layout/homepage.html