Ce guide explique, étape par étape, comment un administrateur d’organisation Cirrus Shield crée et publie son site e-commerce avec l’extension CS-Ecommerce.
Vue d’ensemble
CS-Ecommerce transforme les données d’un objet Cirrus Shield de votre choix (ex. « Produit ») en une boutique en ligne publique, sans écrire une ligne de code. Cirrus Shield reste la seule source de vérité pour vos données produit : cette extension ne gère que la présentation (identité du site, mapping des champs, mise en page du catalogue et de la fiche produit, boutons d’action).
Ce guide suit les 4 étapes du configurateur (le « Builder »), dans l’ordre où elles apparaissent :
- Identité — nom, logo, couleurs et police du site
- Mapping — quel objet Cirrus Shield et quels champs alimentent le site
- Liste — l’apparence du catalogue produits
- Fiche produit — l’apparence de la page d’un produit, et ses boutons d’action
puis la publication du site et sa gestion au quotidien.
Prérequis — vous devez être administrateur de votre organisation Cirrus Shield pour accéder à la page Setup.
Accéder au Builder
- Dans votre organisation, ouvrez Setup (menu du profil, en haut à droite).
- Dans le menu de configuration, cliquez sur Extensions.
- Dans la liste des extensions, trouvez Ecommerce Website et cliquez sur Détails. Si vous ne l’avez pas trouvé, installez-le sans modifier aucun de ses paramètres.
- La première fois, l’organisation se connecte automatiquement à Cirrus Shield. Cliquez sur Accéder au Builder pour ouvrir le configurateur du site.
Le Builder s’ouvre intégré dans cette même page (en iframe) et affiche les 4 étapes de configuration en haut.
Étape 1 — Identité du site
En haut du Builder, une barre d’étapes (Identité → Mapping → Liste → Fiche produit) permet de naviguer librement entre les 4 étapes à tout moment — il n’est pas nécessaire de les terminer dans l’ordre pour les revisiter.
| Élément | Signification |
|---|---|
| Badge Brouillon non publié / Publié | Indique si une version du site a déjà été publiée. Voir la section Publication plus bas. |
| Interrupteur Actif / Inactif | Visible uniquement après une première publication. Active ou suspend l’affichage du site public sans dépublier la configuration. |
| Enregistrer le brouillon | Sauvegarde vos modifications sans les rendre visibles sur le site public. |
| Publier le brouillon | Rend vos modifications visibles sur le site public. |
| Aperçu en temps réel | À droite, se met à jour instantanément à chaque modification — aucune sauvegarde n’est nécessaire pour voir le résultat. Les icônes en haut à droite de l’aperçu basculent entre vue bureau, tablette et mobile. |
Le formulaire ci-dessus permet de configurer :
| Champ | Signification |
|---|---|
| Nom du site | Nom affiché dans l’en-tête et les onglets du navigateur du site public. |
| Adresse du site | Le slug final de l’URL publique (ecommerce.cirrus-shield.net/votre-slug). Généré automatiquement à partir du nom (minuscules, chiffres, tirets), modifiable. |
| Logo | Glissez-déposez une image ou cliquez pour en choisir une. Affiché à côté du nom du site, jamais à sa place. |
| Couleurs de la marque | Couleur primaire (en-tête, boutons principaux) et couleur secondaire (accents, survols). Reprises automatiquement dans tout le site public. |
| Police | Police de caractères utilisée sur l’ensemble du site public. |
| Afficher l’en-tête sur le site public | Décochez pour masquer complètement la bande d’en-tête (logo + nom) du site public. |
Une fois satisfait, cliquez sur Suivant : Mapping en bas à gauche pour passer à l’étape 2.
Étape 2 — Mapping des champs
Cette étape relie votre site aux vraies données Cirrus Shield : quel objet représente un « produit », et quels champs de cet objet alimentent chaque partie du site.
Objet source
En haut de la page, Objet source affiche l’objet Cirrus Shield actuellement utilisé (ici « Item de liste de prix »). Le lien Changer d’objet ouvre une fenêtre de recherche parmi tous les objets de votre organisation — attention : changer d’objet réinitialise tout le mapping existant.
Mapping des champs
Pour chaque rôle, cliquez sur + Choisir un champ et sélectionnez le champ Cirrus Shield correspondant (un champ de type lien, comme « Product → Produit Nom » ci-dessus, permet de remonter un champ d’un objet lié).
| Rôle | Obligatoire | Utilisation sur le site |
|---|---|---|
| Nom du produit | Oui | Titre affiché sur la carte produit et la fiche produit. |
| Description | Oui | Texte descriptif affiché sur la fiche produit. |
| Prix | Oui | Montant affiché, filtrable automatiquement par plage de prix dans le catalogue. |
| Image | Non | Photo affichée en tête de la carte produit et de la fiche produit. |
| Afficher sur le site | Non | Champ booléen Cirrus Shield qui décide si un enregistrement apparaît sur le site public. Non mappé = tous les enregistrements sont visibles. |
Champs additionnels : tout autre champ dont vous avez besoin ailleurs sur le site (liste, fiche produit, bouton d’action, condition d’affichage) se mappe avec + Ajouter un champ, en bas de cette section.
Listes associées et conditions d’affichage
- Listes associées — affiche les enregistrements d’un objet lié (ex. « Formation ») directement sur la fiche produit. + Ajouter une liste associée ouvre un assistant en 2 étapes : choisir la relation, puis les champs à afficher. Modifier les filtres restreint ensuite les enregistrements affichés.
- Conditions d’affichage — seuls les produits satisfaisant toutes les conditions définies ici apparaissent sur le site public (ex. « Statut = Actif »). Les champs proposés sont uniquement ceux déjà mappés ci-dessus.
Important : tous les champs utilisés dans une condition d’affichage doivent d’abord être ajoutés au mapping, avec + Ajouter un champ (section « Champs additionnels »). Un champ non mappé n’est pas proposé lors de la création d’une condition.
Comment fonctionnent les conditions d’affichage
Une condition d’affichage est une règle de filtrage : seuls les enregistrements qui la respectent apparaissent sur le site public — catalogue et fiche produit (un produit filtré n’est jamais accessible, même par URL directe). Chaque condition se construit en trois parties :
| Partie | Rôle |
|---|---|
| Champ | Le champ à tester — uniquement parmi les champs déjà mappés à l’étape 2 (Mapping). |
| Opérateur | = (égal), ≠ (différent), > (supérieur à), < (inférieur à), ou « contient » (texte uniquement — indisponible sur un champ Date/DateTime). |
| Type de valeur | Voir le détail ci-dessous. |
Les 3 types de valeur possibles :
- Valeur fixe — vous tapez vous-même la valeur à comparer (ex. Statut = « Actif »). C’est le cas le plus courant.
- Paramètre (GET/POST) — la valeur attendue vient de la requête du visiteur plutôt que d’un texte fixe que vous tapez (ex. un paramètre présent dans le lien qui a amené le visiteur sur le site). Usage avancé. Si le paramètre attendu est absent de la requête, seule cette condition échoue — le reste de l’expression continue de s’évaluer normalement. Cela vous permet de filtrer les items de liste de prix par liste de prix ou par région du visiteur, en passant ces informations dans la requête.
- Date relative — uniquement disponible sur un champ Date/DateTime : compare à « aujourd’hui », « cette semaine », « il y a N jours », etc. plutôt qu’à une date fixe que vous devriez mettre à jour vous-même — le résultat se recalcule automatiquement chaque jour.
À retenir pour vos propres tests : si vous ouvrez le site public vous-même en tapant l’adresse directement dans le navigateur (plutôt qu’en cliquant un vrai lien), toute condition de type Paramètre n’aura pas la valeur qu’un vrai lien aurait normalement transmise dans l’URL — vous verrez alors moins de produits (ou aucun) que ce qu’un visiteur verrait réellement. Ce n’est pas un bug : c’est le comportement attendu dès qu’on teste une URL à la main sans les paramètres qu’un vrai parcours aurait ajoutés.
Combiner plusieurs conditions — ET / OU
Chaque condition ajoutée après la première affiche un connecteur ET / OU qui la relie à tout ce qui précède. Point important : il n’y a ni parenthèses ni regroupement — l’évaluation se fait strictement de gauche à droite. Avec 3 conditions A, B, C reliées par ET puis OU, le résultat est (A ET B) OU C, jamais A ET (B OU C). Si l’ordre de vos conditions ne donne pas le résultat attendu, essayez de les réorganiser plutôt que de changer les connecteurs.
Exemple : « Catégorie = Formation » ET « Statut = Actif » OU « Mis en avant = Oui » affiche : (les formations actives) OU (tout enregistrement mis en avant — même inactif, même d’une autre catégorie).
Exemple concret : supposons qu’un champ booléen nommé Actif soit mappé en champ additionnel. Une condition d’affichage simple — Champ = Actif, Opérateur = = (égal), Type de valeur = Valeur fixe, Valeur fixe = Vrai — signifie que seuls les enregistrements dont Actif = Vrai apparaissent sur le catalogue et la fiche produit publics ; tout enregistrement marqué inactif (arrêté, pas encore lancé) reste invisible aux visiteurs même s’il existe toujours dans Cirrus Shield. En ajoutant une seconde condition reliée par ET — Actif = Vrai ET Catégorie = "Mis en avant" — on restreint encore aux enregistrements actifs qui sont aussi dans la catégorie choisie.
Cliquez sur Suivant : Liste pour passer à la mise en page du catalogue.
Étape 3 — Mise en page de la liste (catalogue)
Cette étape définit l’apparence du catalogue public, la page qui liste tous vos produits.
| Section | Signification |
|---|---|
| Champs sur la carte produit | Coche les champs (parmi ceux mappés à l’étape 2) affichés sur chaque carte produit du catalogue. Nom et Prix sont généralement cochés par défaut. |
| Style d’affichage — Grille | Cartes produit alignées en grille, format catalogue classique. |
| Style d’affichage — Liste | Une ligne par produit, plus compact. |
| Éléments par page | Nombre de produits affichés avant pagination. |
Le champ mappé sur le rôle Prix devient automatiquement un filtre par plage de prix sur le catalogue public ; aucune configuration supplémentaire n’est nécessaire ici.
Cliquez sur Suivant : Fiche produit pour passer à la dernière étape.
Étape 4 — Fiche produit
Cette dernière étape organise la page détaillée d’un produit (sa « fiche ») et ses boutons d’action.
Champs et listes à placer
Tout champ ou liste associée mappé à l’étape 2 mais pas encore placé apparaît ici, marqué Non placé. La fiche produit a 3 zones fixes : En-tête, Description, Caractéristiques. Deux façons de placer un élément :
- Glisser-déposer l’élément directement dans l’aperçu en temps réel, dans la zone souhaitée.
- Ou choisir la zone dans le menu déroulant à côté de son nom (comme sur la capture ci-dessus) — équivalent accessible au clavier.
Boutons d’action
+ Ajouter un bouton crée un nouveau bouton d’action sur la fiche produit, avec :
| Champ | Signification |
|---|---|
| Libellé du bouton | Texte affiché sur le bouton (ex. « Demande de devis »). |
| Position | Haut de fiche, Sous description, ou Bas de fiche. |
| Style | Principal, Secondaire ou Discret — reprend les couleurs de marque définies à l’étape 1. |
| Type de destination — Champ Cirrus Shield | Le bouton pointe vers la valeur d’un champ mappé du produit (ex. un lien stocké dans Cirrus Shield). |
| Type de destination — URL manuelle | Une URL fixe que vous saisissez, pouvant inclure des jetons de fusion comme {!RecordId} ou {!NomDuChamp} — remplacés par la vraie valeur du produit affiché sur le site public (ex. https://mon-formulaire.com/{!RecordId}). Le menu « Insérer un jeton » ajoute ces jetons sans avoir à les retaper. |
Une fois toutes les étapes configurées à votre convenance, passez à la section suivante pour publier votre site.
Publier votre site
Modifier une étape du Builder ne change rien sur le site public tant que vous n’avez pas publié. Deux actions distinctes, visibles en haut de chaque étape :
- Enregistrer le brouillon — sauvegarde vos modifications en base, sans les rendre publiques. Vous pouvez fermer le Builder et y revenir plus tard sans rien perdre.
- Publier le brouillon — copie la configuration enregistrée vers le site public ; vos visiteurs voient alors les changements.
Le bandeau de statut, en haut à gauche, indique toujours si le brouillon enregistré diffère de la version publiée :
Ici, le logo et les couleurs ont été enregistrés mais pas encore publiés : le bouton Publier le brouillon redevient actif (vert) et le texte affiche « modifications non publiées ». Après avoir cliqué dessus :
Le statut passe à Publié le à l’instant — à jour : le site public reflète maintenant exactement le brouillon enregistré.
Première publication : avant toute publication, le badge affiche Brouillon non publié, et l’adresse du site (définie à l’étape 1) n’est pas encore accessible publiquement.
Intégrer le site dans un site existant, ou le garder indépendant
Une fois publié, le site public est une page web à part entière, accessible à son adresse (ecommerce.cirrus-shield.net/votre-slug) — rien ne vous oblige à l’un ou l’autre des deux usages suivants, les deux fonctionnent :
- Page indépendante — vous partagez simplement l’adresse du site (ex. dans votre navigation, vos réseaux sociaux, vos emails). C’est l’usage le plus simple.
- Intégré en iframe — vous pouvez aussi l’insérer dans une page de votre site web existant via une balise
<iframe src="https://ecommerce.cirrus-shield.net/votre-slug">, pour qu’il apparaisse comme une section de votre site actuel plutôt que comme une adresse séparée. Rien côté Ecommerce Website ne bloque cet affichage en iframe.
Gérer un site publié
L’interrupteur Actif / Inactif, visible en haut à droite dès la première publication (captures ci-dessus), contrôle l’affichage du site sans toucher à sa configuration :
| État | Effet |
|---|---|
| Actif | Le site public est accessible normalement à son adresse. |
| Inactif | Le site public est suspendu (les visiteurs ne peuvent plus y accéder) ; la configuration publiée est conservée telle quelle. Basculez sur Actif pour la rétablir instantanément, sans republier. |
Modifier un site déjà publié : revenez dans n’importe quelle étape du Builder (Setup > Extensions > Ecommerce Website > Détails > Accéder au Builder), faites vos changements, puis Enregistrer le brouillon et Publier le brouillon comme décrit ci-dessus — le site reste en ligne avec l’ancienne version jusqu’à ce que vous publiiez.
Ce guide couvre l’ensemble du parcours de configuration. Pour toute question sur un champ ou un comportement non décrit ici, contacter le support : support@cirrus-shield.com.
