Installer le plugin WooCommerce et WordPress

Avec l’extension WordPress, vous placez vos configurateurs configento.app sur n’importe quelle page de votre site WordPress – avec un bloc ou un shortcode. Si WooCommerce est installé, le configurateur apparaît aussi sur la fiche produit : vos clients composent le produit, voient immédiatement le prix total et ajoutent la configuration terminée au panier habituel. configento.app vérifie le prix sur le serveur. Vous modifiez vos composants dans l’administration intégrée, sans quitter wp-admin.

Prérequis

• WordPress 6.6 ou plus récent et PHP 8.1 ou plus récent. Pour la boutique, en plus WooCommerce 9 ou plus récent.
• Permaliens personnalisés : sous Réglages → Permaliens, un réglage autre que Simple. C’est seulement à cette condition que l’extension peut se connecter à configento.app – voir Dépannage.
• Un utilisateur WordPress autorisé à installer des extensions et à modifier les réglages (administrateur).
• Un identifiant pour le portail de service pour le service auquel vous souhaitez connecter le site.
• Au moins un composant publié.

Quel moteur frontend s’exécute

L’extension charge toujours le moteur V3. Le paramètre Moteur frontend du composant ne joue ici aucun rôle. Les fonctions qui n’existent que dans Legacy – comme l’accordéon, l’autocomplétion ou la quantité prédéfinie – ne sont donc pas disponibles dans WordPress. Vous trouverez la vue d’ensemble sous Moteur frontend : Legacy ou V3.

Télécharger l’extension

Vous obtenez l’extension dans configento.app sous Paramètres → Intégrations, carte WordPress / WooCommerce, bouton Télécharger le plugin. Vous recevez un fichier ZIP – ne le décompressez pas.

Si l’onglet est verrouillé, acceptez d’abord le contrat de traitement des données sous Paramètres → Traitement des données.

Installer l’extension

1. Dans wp-admin, ouvrez Extensions → Ajouter une extension et cliquez en haut sur Téléverser une extension.
2. Choisissez le fichier ZIP et cliquez sur Installer maintenant.
3. Cliquez sur Activer l’extension.

L’extension ajoute l’élément de menu configento dans wp-admin. En ligne de commande : wp plugin install configento-wordpress-*.zip --activate.

Vous installez une nouvelle version de la même façon : WordPress demande s’il faut remplacer l’extension installée. La connexion et les associations sont conservées.

Se connecter à configento.app

Vous établissez la connexion une seule fois depuis wp-admin. Vous n’avez pas besoin de copier de clé.

1. Ouvrez l’élément de menu configento.
2. Vous voyez la carte Connecter votre compte configento.app. Cliquez sur Se connecter à configento.app.
3. Vous êtes redirigé vers le portail de service. Connectez-vous et confirmez la connexion.
4. Vous revenez ensuite dans wp-admin, et l’administration de configento.app s’ouvre directement dans la page.

Si les permaliens sont réglés sur Simple, la carte affiche à la place du bouton un message indiquant où modifier ce réglage.

Lors de la connexion, l’extension met en place tout ce dont vos pages ont besoin : elle récupère les identifiants de votre site et signale son domaine à configento.app (voir Autoriser le domaine). Si votre service est une instance Enterprise dédiée, le portail de service l’indique lors de la connexion et l’extension travaille avec cette instance.

Chaque utilisateur WordPress se connecte individuellement. La connexion vaut pour le compte utilisateur qui l’a établie. Si un collègue travaille avec son propre identifiant, il verra à nouveau la carte de connexion la première fois qu’il ouvrira configento. Le configurateur de vos pages continue de fonctionner tant qu’au moins un utilisateur est connecté.

Au-dessus de l’administration intégrée figurent l’adresse e-mail de votre identifiant du portail et le bouton Déconnecter.

Modifier les composants dans wp-admin

Une fois connecté, configento ouvre l’administration de configento.app directement dans wp-admin. Vous y créez des composants, gérez caractéristiques, valeurs, prix et règles et les publiez – exactement comme sous admin.configento.app. Les bases sont décrites dans Créer votre premier composant.

Si la page reste ouverte longtemps, la session de l’administration intégrée finit par expirer. L’extension la renouvelle alors en arrière-plan ; vous n’avez pas besoin de recharger la page.

Autoriser le domaine

Le configurateur ne se charge que sur les domaines autorisés pour votre service. L’extension signale le domaine de votre site, mais ne l’autorise pas elle-même. Tant qu’il n’est pas autorisé, la page configento affiche un message.

1. Dans l’administration intégrée, ouvrez Paramètres → Domaines.
2. La section Signalés par les boutiques connectées liste le domaine de votre site avec la mention WooCommerce.
3. Choisissez le type, par exemple Production ou Staging, puis cliquez sur Ajouter à la licence.

Le domaine est signalé lors de la connexion et chaque fois que vous modifiez l’adresse du site sous Réglages → Général – par exemple lors du passage d’un environnement de test au domaine définitif. Il ne vous reste alors qu’à ajouter le nouveau domaine à la licence. Pour en savoir plus : Paramètres globaux.

Afficher un configurateur sur une page

Sur n’importe quelle page et dans n’importe quel article – aussi sans WooCommerce, par exemple pour des configurateurs de demande avec le bouton d’action.

Avec le bloc

1. Dans l’éditeur de blocs, insérez le bloc Configurateur configento (catégorie Contenus embarqués).
2. Sous Configurateur, choisissez le composant dans la liste. La liste affiche les composants de votre service connecté. Si elle ne peut pas être chargée, saisissez à la place l’ID du configurateur, tel qu’il figure sur la vignette dans la vue d’ensemble des composants.
3. En option, dans la barre latérale sous Réglages :
   • Hauteur minimale, par exemple 600px. Évite que la page saute pendant le chargement du configurateur.
   • Choix de la langue : les visiteurs peuvent passer d’une langue du configurateur à l’autre.

Dans l’éditeur, le bloc indique seulement quel configurateur apparaît. Vous voyez le configurateur lui-même dans l’aperçu et sur la page.

Avec le shortcode

Pour l’éditeur classique et les constructeurs de pages :

[configento id="10722"]

Ce qui se passe

• Le configurateur apparaît dans la langue de la page. Les sites multilingues (par exemple avec WPML ou Polylang) l’affichent ainsi automatiquement dans la bonne langue ; s’il manque une traduction, il en prend une autre disponible.
• Le script du configurateur ne se charge que sur les pages qui contiennent un configurateur.
• Le code source de la page ne contient ni clé d’accès ni jeton : le configurateur obtient un jeton de courte durée via votre site. Les extensions de cache peuvent donc mettre en cache les pages avec un configurateur.
• Si le site n’est pas connecté, seuls les rédacteurs connectés voient un message ; les visiteurs ne voient rien.

WooCommerce : associer un produit à un composant

1. Ouvrez le produit sous Produits.
2. La boîte Données produit contient l’onglet configento.
3. Sous Configurateur, choisissez le composant dans la liste. Si elle ne peut pas être chargée, le champ ID du configurateur apparaît à la place.
4. Mettez à jour le produit.

Un produit a exactement un composant. Pour le dissocier, choisissez Aucun configurateur. Le prix du produit est le prix de base ; la configuration s’y ajoute comme supplément.

Ce qui se passe dans la boutique

Sur la fiche produit

• Le configurateur apparaît au-dessus du bouton Ajouter au panier.
• Prix : le prix de la fiche produit affiche le prix du produit plus la configuration et suit chaque sélection – c’est le montant que facture le panier. Pour les produits variables, c’est la variation choisie qui compte : son prix plus la configuration s’affiche là où WooCommerce montre le prix de la variation.
• TTC ou HT : le configurateur affiche les prix comme votre boutique. Si WooCommerce affiche les prix hors taxes ou si les taxes sont désactivées, les suppléments sont eux aussi HT. Sinon, il calcule avec le taux de taxe que WooCommerce applique à ce produit et à ce client.
• Devise : le composant doit tenir ses prix dans la devise de votre boutique.
• Quantité : si vous verrouillez la quantité dans le panier dans le composant (voir Paramètres du composant), la fiche produit n’affiche aucun champ de quantité et chaque configuration reste à la quantité 1 dans le panier.

Ajouter au panier

Le bouton Ajouter au panier ajoute la configuration au panier, et non le produit seul. Auparavant, le configurateur vérifie les champs obligatoires et signale ce qui manque.

configento.app recalcule le prix sur le serveur au moment de l’ajout. La description de la configuration qui accompagne la commande est elle aussi construite par configento.app à partir de la sélection vérifiée. Ce qui est affiché dans le navigateur ne peut donc pas arriver manipulé dans le panier. Cela vaut aussi bien pour le panier classique que pour le bloc Panier.

Listes de produits

Dans les listes de la boutique, des catégories et de recherche, le bouton des produits associés s’appelle Configurer et mène à la fiche produit. Ainsi, personne n’ajoute le produit au panier sans configuration – pas non plus via un bloc Panier ou la Store API.

Panier, paiement et commande

• La ligne affiche Configuration avec le récapitulatif de la sélection.
• Si le composant génère une image de produit combinée, le panier, la page de paiement, la vue de la commande dans wp-admin et les e-mails de commande affichent cette image au lieu de la photo du produit.
• La même configuration une deuxième fois donne une ligne avec la quantité 2 – avec une quantité verrouillée, WooCommerce signale à la place que le produit est déjà dans le panier ; une autre configuration obtient sa propre ligne.
• La commande, les e-mails de commande et le compte client affichent la configuration sur la ligne.
• L’extension prend en charge les tables de commandes de WooCommerce (HPOS).

Modifier la configuration

Dans le panier classique, chaque ligne configurée comporte le lien Modifier la configuration ; dans le bloc Panier, c’est le nom du produit qui y mène. La fiche produit affiche alors la sélection enregistrée. Lorsque le client ajoute la configuration modifiée au panier, elle remplace l’ancienne ligne et il revient au panier.

Données pour l’ERP et la fabrication

Sur chaque ligne de commande, l’extension enregistre, à côté de la Configuration visible, des champs masqués que les interfaces et les exports peuvent lire :

Statut de l’abonnement

Lorsqu’une action est nécessaire concernant votre abonnement configento.app, la page configento affiche un message avec le lien Ouvrir le portail. Si configento.app ne dessert plus votre site, les pages affichent la phrase Ce configurateur est actuellement indisponible. à la place du configurateur, et WooCommerce n’accepte plus de configurations dans le panier. L’extension vérifie le statut au plus une fois par heure.

Se déconnecter

Déconnecter au-dessus de l’administration intégrée déconnecte votre compte utilisateur – dans l’extension et dans le portail de service.

Important : tant qu’un autre utilisateur est encore connecté, le configurateur continue de fonctionner. Lorsque le dernier utilisateur connecté se déconnecte, l’extension supprime aussi les identifiants du site – le configurateur disparaît alors de toutes les pages jusqu’à ce que quelqu’un se reconnecte.

Supprimer l’extension

Lors de la suppression sous Extensions, l’extension supprime les connexions, les identifiants et le statut d’abonnement enregistré. L’association sur le produit et les configurations des commandes passées sont conservées.

Cliquez une fois sur Déconnecter avant de supprimer. Sinon, l’autorisation dans le portail de service reste en place.

Quelles données vont à configento.app

• Lors de la connexion : l’adresse de votre site et l’adresse de retour vers wp-admin, au portail de service.
• Ensuite : le domaine de votre site, pour que le configurateur puisse s’y charger, et des requêtes sur le statut de l’abonnement.
• Sur les pages avec un configurateur : les navigateurs de vos visiteurs chargent le configurateur depuis configento.app et lui envoient les valeurs choisies.
• Dans le panier : la sélection et le taux de taxe du produit, pour la vérification du prix.

Avant la connexion, l’extension n’envoie aucune requête vers l’extérieur.

Dépannage

1. À la place du bouton « Se connecter à configento.app », un message parle des permaliens – choisissez sous Réglages → Permaliens un réglage autre que Simple. Le portail de service exige une adresse de retour qui se termine par /configento/connect/callback.
2. « Le composant n’a pas pu être chargé (HTTP 401) » – le domaine de votre site n’est pas autorisé. Voir Autoriser le domaine.
3. Aucun configurateur n’apparaît sur la page – un composant est-il choisi dans le bloc ou le shortcode, et au moins un utilisateur est-il connecté ? Les rédacteurs connectés voient un message à cet endroit.
4. La liste des configurateurs manque, il n’y a qu’un champ pour l’ID – le site n’est pas connecté ou configento.app n’était pas joignable à ce moment-là. Connectez-vous sous configento ou saisissez directement l’ID.
5. « Veuillez d’abord configurer le produit sur sa page. » – le produit devait aller dans le panier sans configuration, par exemple via un bloc de liste ou de panier. Les produits associés ne s’achètent que via leur fiche produit.
6. « Le prix n’a pas pu être vérifié pour le moment. Merci de réessayer dans un instant. » – la vérification du prix était brièvement injoignable, ou le composant tient ses prix dans une autre devise que votre boutique. Vous trouvez la raison sous WooCommerce → État → Journaux, dans les entrées de la source configento.
7. « Cette configuration n’est plus valable. Veuillez la recomposer. » – le composant a été modifié pendant que le client configurait. Rechargez la page et recomposez la configuration.
8. « Ce produit ne peut pas être configuré pour le moment. » – votre abonnement configento.app ne dessert plus le site. Voir Statut de l’abonnement.
9. « La boutique n’est pas encore configurée : déconnectez-vous puis reconnectez-vous. » – les identifiants pour vos pages n’ont pas pu être récupérés lors de la connexion. Déconnectez-vous et reconnectez-vous.
10. L’image de la configuration manque dans le panier – le composant ne génère pas d’image de produit combinée. Le panier affiche alors la photo du produit.

Étapes suivantes

• Créer votre premier composant
• Paramètres du composant
• Le bouton d’action
• Paramètres globaux