# CHAPITRE 15 — Catalogue produit dynamique

Si votre site présente un catalogue de produits Dolibarr (services, logiciels, abonnements), le module peut générer automatiquement une page web dédiée à chaque produit. Vous ajoutez un produit dans Dolibarr, sa page web est créée sans intervention supplémentaire.

### <span style="color: rgb(35, 111, 161);">Le concept</span>

<span style="white-space: pre-wrap;">Vous disposez probablement déjà de produits dans Dolibarr (table </span>`<span class="editor-theme-code">llx_product</span>`) avec leur fiche commerciale (libellé, description, prix). Sur votre site web, vous souhaitez :

- <span style="white-space: pre-wrap;">Un </span>**catalogue**<span style="white-space: pre-wrap;"> qui répertorie tous les produits actifs.</span>
- <span style="white-space: pre-wrap;">Une </span>**page détaillée par produit**.
- <span style="white-space: pre-wrap;">Une </span>**mise à jour automatique**<span style="white-space: pre-wrap;"> : tout nouveau produit donne une nouvelle page sans intervention manuelle.</span>

<span style="white-space: pre-wrap;">Le module remplit exactement ce besoin. Vous écrivez un seul gabarit de fiche produit (la page </span>`<span class="editor-theme-code">solution-detail</span>`<span style="white-space: pre-wrap;">), et le module génère un wrapper </span>`<span class="editor-theme-code">solution-<ref>.php</span>`<span style="white-space: pre-wrap;"> pour chaque produit publié.</span>

### <span style="color: rgb(35, 111, 161);">Préparer un produit Dolibarr pour le catalogue</span>

Pour qu'un produit apparaisse dans le catalogue web, deux conditions doivent être remplies :

<table id="bkmrk-champvaleur-requises" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Champ

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Valeur requise

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Statut commercialisable**

<span style="white-space: pre-wrap;"> (</span>

`<span class="editor-theme-code">tosell</span>`

)

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">À vendre (= 1)

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Publié sur le site**

<span style="white-space: pre-wrap;"> (champ personnalisé </span>

`<span class="editor-theme-code">infrasstudio_published</span>`

)

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">Coché (= 1)

</td></tr></tbody></table>

##### **Trois états possibles pour un produit**

<table id="bkmrk-tosellpublishedvisib" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">tosell

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">published

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Visibilité

</th></tr><tr><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">0

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">—

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Invisible partout (commercial et web)

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">1

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">0

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Brouillon — modifiable côté Studio mais invisible publiquement

</td></tr><tr style="height: 10px;"><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">1

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">1

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Publié — la carte apparaît sur le catalogue et la page de détail est servie

</td></tr></tbody></table>

### <span style="color: rgb(35, 111, 161);">Accéder à la section Produits</span>

1. Ouvrez l'éditeur Studio.
2. <span style="white-space: pre-wrap;">Dans la colonne de gauche, cliquez sur l'onglet </span>**Produits**.
3. La liste de tous vos produits commercialisables s'affiche.

Pour chaque produit, vous voyez :

- Sa référence et son libellé.
- Son type (SaaS, Extension, Application instantanée, etc.).
- Son statut : publié (vert) ou brouillon (orange).

### <span style="color: rgb(35, 111, 161);">Modifier un produit</span>

1. Cliquez sur un produit dans la liste.
2. <span style="white-space: pre-wrap;">L'aperçu central charge la page </span>`<span class="editor-theme-code">solution-detail</span>`<span style="white-space: pre-wrap;"> avec ce produit.</span>
3. L'inspecteur à droite affiche les champs natifs Dolibarr et les champs personnalisés.

##### **Champs modifiables**

<table id="bkmrk-cat%C3%A9goriechampschamp" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Catégorie

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Champs

</th></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Champs natifs Dolibarr (traduisibles)**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">libellé, description (texte riche)

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Champs personnalisés traduisibles**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">accroche, libellé du bouton, déploiement, compatibilité, support, langues, fonctionnalités, paliers tarifaires

</td></tr><tr><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">**Champs personnalisés non traduisibles**

</td><td style="padding: 0.6rem 1rem; border: 1px solid rgb(229, 231, 235);">image principale, URL du bouton, étiquette

</td></tr></tbody></table>

##### **Modifier un champ**

1. Cliquez sur le champ dans l'inspecteur, ou directement sur l'élément correspondant dans l'aperçu central.
2. <span style="white-space: pre-wrap;">L'inspecteur passe en mode édition avec un bouton </span>**← Retour**.
3. Modifiez la valeur.
4. <span style="white-space: pre-wrap;">Pour les champs traduisibles, dépliez la section </span>**Autres langues**.
5. <span style="white-space: pre-wrap;">Cliquez sur </span>**Enregistrer**<span style="white-space: pre-wrap;"> en bas du panneau. Le compteur indique le nombre de champs modifiés en attente.</span>
6. L'aperçu se rafraîchit.

<p class="callout info">**Conseil —**<span style="white-space: pre-wrap;"> Pour les produits, l'enregistrement automatique n'est pas activé : vous cliquez sur « Enregistrer » manuellement. Ce choix est délibéré, les champs Dolibarr étant plus sensibles, car directement liés à votre fiche produit commerciale.</span></p>

### <span style="color: rgb(35, 111, 161);">Publier ou retirer un produit</span>

1. Sélectionnez le produit dans la liste.
2. <span style="white-space: pre-wrap;">Dans la barre d'outils centrale, cliquez sur </span>**Publier**<span style="white-space: pre-wrap;"> (ou </span>**Dépublier**<span style="white-space: pre-wrap;"> si déjà publié).</span>
3. <span style="white-space: pre-wrap;">Le module modifie le champ personnalisé </span>`<span class="editor-theme-code">infrasstudio_published</span>`<span style="white-space: pre-wrap;"> à 1 (ou 0).</span>
4. <span style="white-space: pre-wrap;">Il déclenche ensuite la régénération automatique des wrappers </span>`<span class="editor-theme-code">solution-<ref>.php</span>`.
5. Une notification verte confirme l'opération.

<p class="callout success">**Effet de la publication —**<span style="white-space: pre-wrap;"> Le wrapper </span>`<span class="editor-theme-code">/var/www/<site>/solution-<ref>.php</span>`<span style="white-space: pre-wrap;"> est créé. La carte du produit apparaît sur le catalogue. La page de détail est accessible via </span>`<span class="editor-theme-code">/solution-<ref>.php</span>`.</p>

<p class="callout success">**Effet de la dépublication —**<span style="white-space: pre-wrap;"> Le wrapper est supprimé. Tout visiteur tentant d'accéder à l'URL reçoit une erreur 404. La carte disparaît du catalogue.</span></p>

### <span style="color: rgb(35, 111, 161);">Régénérer les wrappers manuellement</span>

Si une désynchronisation est suspectée — par exemple un produit modifié récemment qui n'affiche pas la bonne version — deux options sont disponibles.

##### **Bouton dans la barre d'outils**

1. <span style="white-space: pre-wrap;">Sur la fiche produit, cliquez sur l'icône </span>**Régénérer wrapper**<span style="white-space: pre-wrap;"> (icône de synchronisation).</span>
2. Le module reconstruit le wrapper de ce produit.

##### **Bouton « Reconstruire maintenant » (administrateur)**

1. Rendez-vous dans Outils → InfraSStudio → Configuration.
2. <span style="white-space: pre-wrap;">Repérez la section </span>**Wrappers solution**.
3. <span style="white-space: pre-wrap;">Cliquez sur </span>**Reconstruire maintenant**.
4. L'ensemble des wrappers est régénéré en une seule opération.

<p class="callout info">**Note —**<span style="white-space: pre-wrap;"> Une tâche planifiée toutes les heures régénère les wrappers en arrière-plan. En cas d'oubli ou d'incident temporaire, l'état est rétabli au plus tard une heure après.</span></p>

### <span style="color: rgb(35, 111, 161);">La page de catalogue</span>

<span style="white-space: pre-wrap;">La page de catalogue (généralement </span>`<span class="editor-theme-code">/catalogue.php</span>`) liste tous les produits publiés sous forme de cartes. Chaque carte présente :

- L'image principale du produit.
- Une étiquette éventuelle (« Nouveau », « Promotion », etc.).
- Le libellé.
- L'accroche.
- La catégorie ou l'univers, déduits des catégories Dolibarr.
- Un lien vers la page de détail.

Les visiteurs peuvent filtrer le catalogue par univers (Supply Chain, Health, Legal, etc.) et par type (SaaS, Extension, Instant). Les filtres sont en JavaScript et instantanés.

### <span style="color: rgb(35, 111, 161);">Lien direct depuis Dolibarr</span>

<span style="white-space: pre-wrap;">Sur la fiche produit du Studio, un bouton </span>**Voir public**<span style="white-space: pre-wrap;"> ouvre la page solution publique dans un nouvel onglet. Un autre bouton </span>**Voir la fiche Dolibarr**<span style="white-space: pre-wrap;"> ouvre la fiche produit native.</span>

**Aller-retour fluide —**<span style="white-space: pre-wrap;"> Vous pouvez naviguer entre la fiche commerciale Dolibarr et l'éditeur web Studio sans interrompre votre flux de travail.</span>

### <span style="color: rgb(35, 111, 161);">Récapitulatif</span>

**Vous savez désormais :**

- Comprendre qu'une page web est générée automatiquement par produit publié.
- Préparer un produit (tosell=1, infrasstudio\_published=1).
- Modifier les champs natifs et personnalisés depuis le Studio.
- Distinguer les champs traduisibles des champs non traduisibles.
- Publier ou dépublier un produit, ce qui pilote son wrapper et sa carte sur le catalogue.
- Régénérer manuellement un wrapper en cas de désynchronisation.
- Comprendre que le catalogue se filtre côté visiteur sans rechargement.

Le dernier chapitre de la Partie III aborde le référencement.