Bloc: Avantages du produit

Cette page fournit un guide étape par étape pour créer un groupe de champs afin d'afficher les avantages d'un produit sur sa page de détail. Nous verrons comment créer le groupe de champs, saisir les données et intégrer ces informations dans le template de page produit.

Résultat souhaité

Voici un exemple du résultat souhaité sur la page produit :

Création du groupe de champs

• Accéder à la page des groupes de champs :
  • Accédez à la page de création des groupes de champs depuis le menu (GCP > Groupes de champs).
  • Cliquez sur "Créer un nouveau groupe de champs".
• Définir les paramètres du groupe de champs :
  • Nom : Avantages du produit
  • Slug : product_benefits
  • Boutiques : Sélectionnez les boutiques appropriées
  • Entité : produit
  • Position : description

• Ajouter les champs nécessaires :
  • Titre du bloc :
    • Type : Texte
    • Nom : Titre
    • Slug : title
    • Traduisible : oui
    • Obligatoire : oui
  • Image du bloc :
    • Type : image
    • Nom : Image
    • Slug : image
    • Obligatoire : oui
  • Avantages :
    • Type : Répéteur
    • Nom : Avantages
    • Slug : benefits
    • Champs :
      • Avantage :
        • Type : Texte
        • Nom : Avantage
        • Slug : benefit
        • Traduisible : oui

Saisir les données

• Allez sur la page de gestion des produits
• Dans une page produit, trouvez le formulaire "Avantages du produit" dans la section description. (Ou la section que vous avez sélectionnée dans les paramètres du groupe de champs)
• Remplissez le champ du titre et de l'image avec les données que vous souhaitez afficher.
• Ajoutez des avantages en cliquant sur le bouton "Ajouter" et en remplissant le texte pour chaque avantage.

Intégration dans le modèle de page produit

• Ouvrez le template de la fiche produit de votre thème : Localisez et ouvrez le fichier de modèle de produit dans votre thème, généralement : /themes/votre-thème/templates/catalog/product.tpl.
• Ajoutez le code suivant à l'endroit où vous souhaitez afficher les avantages :

product.tpl

{* Vérifiez si le groupe de champs est défini et s'il y a des avantages à afficher *}
{if $product.cfg.product_benefits and count($product.cfg.product_benefits.benefits)}
  <div class="product-benefits">

    {if $product.cfg.product_benefits.image}
      <div class="image-container">
        <img src="{$product.cfg.product_benefits.image.url}" alt="{$product.cfg.product_benefits.image.name}" />
      </div>
    {/if}

    <div class="content">
      <h2>{$product.cfg.product_benefits.title}</h2>
      <ul>
          {foreach from=$product.cfg.product_benefits.benefits item=row}
            <li>{$row.benefit}</li>
          {/foreach}
      </ul>
    </div>

  </div>
{/if}

info

Pour l'entité produit, les groupes de champs sont automatiquement intégrés dans le présentateur de produit par la variable cfg. Pour l'objet Product (et non ProductPresenter) ou d'autres entités, vous devez récupérer les données en utilisant la méthode suivante :

product.tpl

{* Object or Entity and Id *}
{assign var="data" value=$modules.customfieldgroups.data->get($product)}
{assign var="data" value=$modules.customfieldgroups.data->get('product', $product.id)}

info

Vous pouvez également utiliser un hook pour afficher le bloc sur la page produit. Dans ce cas, vous devez créer un module simple et le hooker à l'endroit où vous souhaitez afficher le bloc. Utilisez le code suivant dans la fonction hook pour récupérer les données :

yourmodule.php

public function hookDisplayFooterProduct($params) {
  // Get retriever
  $dataRetriever = DataRetrieverFacade::getInstance();
  
  // Get product field groups
  $data = $dataRetriever->get('product', $params['product']['id']);
  
  // Get benefits
  $benefits = empty($data['product_benefits']['benefits']) ? [] : $data['product_benefits']['benefits'];
  
  // Assign smarty
  $this->context->smarty->assigns([
    'benefits' => $benefits
  ]);
  
  ..
}

• Ajoutez des styles personnalisés (optionnel) : Pour améliorer l'apparence des avantages sur la page produit, vous pouvez ajouter des styles personnalisés dans votre fichier CSS.

theme.css

.product-benefits {
  background-color: #fff;
  border: 1px solid #eee;
  display: flex;
  margin: 20px 0;
}

.product-benefits > div {
  padding: 20px;
}

.product-benefits .content li {
  list-style-type: decimal;
  margin-left: 20px;
  margin-top: 20px;
}

.product-benefits .image-container img {
  height: auto;
  width: 300px;
}

Résultat final

Une fois ces étapes terminées, vous devriez voir un nouveau bloc d'avantages sur la page de détail du produit, affichant le titre du bloc et la liste des avantages que vous avez entrés. Cette approche permet une personnalisation facile et des mises à jour rapides des informations sans avoir à modifier le code du modèle à chaque fois.