Viewer : découvrir le produit
Présentation du modèle 3D et de son apparence. Utile lorsque l'objectif principal est de montrer le produit sous différents angles sans permettre la modification du motif imprimé.
Intégration e-commerce - du projet à la commande
Intégrez Alter Product à votre site : WordPress + WooCommerce ou API
Ajoutez la présentation 3D, la configuration des variantes et la personnalisation des produits à votre site. Le client découvre le produit, choisit ses options et prépare son projet dans votre boutique, tandis que vous gérez le catalogue et les commandes dans votre système.
Choisissez l'extension WordPress avec WooCommerce installé pour effectuer la configuration sans écrire de code d'intégration. Si vous développez votre propre site ou boutique, reliez les outils intégrés au backend et au panier via la Public API et les événements postMessage.
Les illustrations présentent l'interface réelle issue d'enregistrements et du panneau de l'extension. Les boutons des captures sont en anglais ; l'apparence de l'outil dépend de la configuration de la boutique.
Deux façons de créer votre boutique avec personnalisation
Vous pouvez préparer un même projet produit pour la présentation, la configuration ou la modification du motif imprimé. Choisissez le mode de connexion à la boutique selon votre site et le travail de développement nécessaire.
Extension ou intégration sur mesure ?
L'extension fournit une prise en charge prête à l'emploi de WordPress et WooCommerce. L'API permet de créer votre propre connexion à une autre plateforme, une application headless ou un système de commandes existant.
| Domaine | WordPress + WooCommerce | Système sur mesure via l'API |
|---|---|---|
| Mise en route | Installation de l'extension et assistant de connexion dans le panneau WordPress. | Développement de la connexion côté backend et de l'intégration dans la page. |
| Produits et variantes | Association du projet au produit WooCommerce et synchronisation des variantes. | Association des identifiants de produits et d'options aux données de votre boutique. |
| Panier et commandes | Gestion prête à l'emploi des configurations, projets clients et aperçus dans WooCommerce. | Gestion des événements de l'outil intégré et de la synchronisation des commandes dans votre système. |
| Fichiers et ressources | Bibliothèque locale, projets et fichiers de commandes sur le serveur WordPress. | Stockage et accès aux données selon le mode d'intégration choisi. L'option utilisant votre propre stockage nécessite sa prise en charge de votre côté. |
Quel outil proposer au client ?
Choisissez l'outil selon l'action attendue du client sur la page. Vous préparez le projet et les règles de personnalisation à l'avance dans Designer.
Configurator : choisir une variante
Sélection d'options prédéfinies du produit, comme la taille, la couleur ou la matière. Le client voit la modification sur le modèle et transmet la configuration au panier.
Customizer : préparer son propre motif
Personnalisation avec les outils, visuels, textes et modèles proposés. Le projet enregistré du client est associé à un article du panier ou de la commande.
Designer : préparer votre catalogue
Espace de travail du propriétaire de la boutique. Vous y préparez la composition, les variantes, les zones d'impression et les paramètres des outils destinés aux clients. L'accès à l'édition administrative est distinct de l'utilisation de la boutique.
WordPress + WooCommerce : de l'installation au produit prêt à vendre
Alter Product est une extension WordPress. Pour intégrer une boutique, WooCommerce doit être installé et activé. La configuration habituelle s'effectue dans le panneau, sans développer votre propre gestion de l'API et du panier.
Prérequis : WordPress, WooCommerce, HTTPS et offre Business
Pour intégrer Alter Product à votre site, vous devez disposer d'un abonnement Business actif ou d'une offre supérieure incluant cette fonctionnalité. Cela concerne l'extension WordPress + WooCommerce comme une intégration sur mesure via l'API. Les offres Personal FREE et Personal n'incluent pas l'intégration dans votre boutique.
Pour utiliser l'extension, préparez WordPress avec WooCommerce installé et activé, ainsi qu'un compte Alter Product. Le stockage des fichiers sur votre hébergement ne remplace pas l'abonnement requis : Alter Product fournit toujours l'application et autorise son lancement.
- Faites fonctionner la boutique en HTTPS avec un certificat SSL/TLS valide pour son domaine. Cela est nécessaire au bon fonctionnement des outils intégrés sur le site public.
- Activez les permaliens lisibles de WordPress conformément aux instructions d'installation.
- Prévoyez de l'espace sur votre hébergement pour les modèles, visuels, projets et fichiers de commandes. La bibliothèque de la boutique utilise les ressources de votre serveur.
Pourquoi HTTPS et un certificat SSL/TLS sont-ils nécessaires ?
Alter Product fonctionne dans un iframe intégré à la page de la boutique. Les navigateurs limitent l'accès à certaines fonctions utilisées par l'application si la page n'offre pas de contexte sécurisé. HTTPS chiffre la connexion et un certificat valide permet au navigateur de vérifier le domaine.
Le navigateur vérifie aussi la page qui contient l'iframe. L'adresse HTTPS de l'application Alter Product ne suffit donc pas si la boutique fonctionne en HTTP. HTTPS doit aussi couvrir votre site, où vous intégrez l'outil. Cela découle des règles de sécurité des navigateurs pour les applications intégrées.
- Activez un certificat SSL/TLS chez votre hébergeur et vérifiez sa validité pour le domaine de la boutique.
- Configurez les adresses du site WordPress et le domaine d'intégration en HTTPS. Activez la redirection de HTTP vers HTTPS.
- Ouvrez la page produit en HTTPS et vérifiez que le navigateur ne signale aucun problème de certificat ni de ressources chargées en HTTP.
Connectez la boutique avec Auto Connect
La connexion automatique vous guide dans l'autorisation du compte Alter Product et la configuration de la boutique. Vous n'avez pas à transférer manuellement les clés API avec cette méthode.
- Dans WordPress, ouvrez Extensions → Ajouter, recherchez Alter Product, puis installez et activez l'extension.
- Ouvrez le panneau Alter Product et choisissez Auto Connect. Connectez-vous au bon compte Alter Product, vérifiez la boutique et autorisez la connexion.
- Retournez dans WordPress. Choisissez un modèle de départ et téléchargez les ressources requises. Attendez la fin des téléchargements et des vérifications de disponibilité.
- Vérifiez les pages d'outils créées et les paramètres d'affichage, puis préparez le produit.
Associez le projet et synchronisez les variantes
Dans l'édition du produit WooCommerce, ouvrez l'onglet Alter Product. Créez un projet ou choisissez-en un existant, puis ouvrez Designer. Définissez le motif imprimé, les options disponibles et les zones d'impression de ce produit.
- Pour un produit variable, préparez les attributs, comme les tailles, et les variantes WooCommerce correspondantes.
- Dans Designer, utilisez Sync variants pour associer les options du projet aux variantes du produit. Vérifiez aussi les sélections par défaut qui ne sont pas des attributs de variante dans WooCommerce.
- Enregistrez le projet et le produit. Choisissez l'outil affiché sur la page et son mode d'ouverture.
- Vérifiez le résultat sur la page produit : choisissez plusieurs variantes, préparez un projet et passez au panier.
Votre bibliothèque sur le serveur WordPress
Vous stockez les modèles, projets, visuels et fichiers de commandes sur l'hébergement de votre WordPress. Les ressources ajoutées localement servent à votre boutique et ne deviennent pas des éléments de la bibliothèque publique Alter Product pour les autres boutiques.
Qu'est-ce qui est stocké localement ?
L'extension enregistre les fichiers de modèles, bibliothèques, projets, mockups et commandes dans l'espace WordPress. Les données des projets du générateur et de leurs révisions sont aussi enregistrées dans la base de données de cette installation.
Vous pouvez ajouter vos propres contenus et importer des ressources choisies depuis Alter Product. Après téléchargement, vous utilisez une copie locale. L'importation, la recherche de mises à jour et le téléchargement de nouvelles versions sont des actions distinctes.
| Emplacement dans le panneau | Ce que vous y faites |
|---|---|
| Ressources | Vous gérez notamment les modèles, visuels, gabarits, arrière-plans, logos, textures et environnements. Les méthodes d'ajout disponibles dépendent du type de ressource. |
| Générateur de modèles | Vous créez des projets locaux à partir de modèles et travaillez avec les modèles associés au générateur. |
| Projets produits / Designer | Vous préparez ou importez un projet, le modifiez et l'associez à un produit de la boutique. |
| Commandes WooCommerce | Vous utilisez les projets clients enregistrés, les aperçus et les fichiers nécessaires à l'exécution de la commande. |
Fichiers locaux, application Alter Product intégrée
Vous hébergez les ressources, tandis que l'interface des outils est chargée depuis Alter Product dans un iframe. Le service Alter Product vérifie l'accès du compte, l'offre et les sessions, et fournit le catalogue d'importation. L'intégration nécessite une connexion à ce service.
Dans vos sauvegardes, conservez la base de données, le répertoire de fichiers et les clés et sels WordPress nécessaires à la lecture des données chiffrées de l'extension. Vous pourrez ainsi restaurer les visuels et les données nécessaires à la poursuite du travail.
La personnalisation sur le site de votre marque
L'intégration peut faire partie de la fiche produit ou d'une page WordPress distincte. Le client reste dans le parcours d'achat de votre boutique, tandis que WooCommerce gère le panier et la commande.
Fiche produit, page d'outil ou bloc
Choisissez l'affichage selon la mise en page de la boutique : outil sur la page produit, bouton vers une page dédiée ou intégration via les blocs et shortcodes disponibles. Viewer, Configurator et Customizer ont des rôles différents ; vous n'avez pas à tous les proposer simultanément.
- Affichez Viewer là où le client doit découvrir le modèle du produit.
- Utilisez Configurator pour vendre des variantes et options prédéfinies.
- Choisissez Customizer pour permettre au client d'ajouter du texte, une image ou de modifier la composition imprimée.
Vos arrière-plans, votre logo et votre langue
Adaptez la présentation du produit à votre marque. L'extension permet de gérer les arrière-plans et logos locaux ainsi que l'apparence des outils intégrés. Les options disponibles dépendent de l'offre.
- L'arrière-plan de la scène, les couleurs de l'interface et l'apparence préparée du projet assurent la cohérence avec la boutique.
- L'application et l'extension prennent en charge 22 langues. La langue du panneau WordPress se définit par utilisateur, celle du site dans ses réglages.
- Vous préparez les noms de produits, les textes imprimés et les descriptions dans les langues de vos clients. La disponibilité d'une langue d'interface n'implique pas la traduction automatique du contenu de la boutique.
Du projet client à l'article commandé
Le client choisit une variante et prépare sa personnalisation. L'extension associe la configuration et le projet enregistré à l'article du panier, puis à la commande WooCommerce. Les mockups disponibles permettent d'identifier le motif commandé.
- Le client ouvre le produit ou l'outil associé et choisit les options.
- Lors de la personnalisation, il enregistre son projet et ajoute le produit au panier.
- Dans le panier, il vérifie le produit, sa configuration et l'aperçu disponible, puis passe par le checkout WooCommerce.
- Dans le panneau de commande, le propriétaire ouvre le projet enregistré et prépare sa réalisation.
Exécution des commandes, POD et IA facultative
La connexion de la boutique aux outils 3D est le début du processus. À partir du projet préparé, téléchargez des fichiers pour votre production ou utilisez l'intégration de l'extension avec un prestataire d'impression à la demande.
Connectez Printify ou Printful
Configurez la connexion au prestataire choisi dans les paramètres de l'extension. Associez ensuite le produit, ses variantes et ses emplacements d'impression au catalogue du prestataire, préparez les fichiers et demandez la réalisation depuis WooCommerce.
- Adaptez les surfaces d'impression et les formats de fichiers au produit et au prestataire concernés.
- Vérifiez les fichiers générés et la variante commandée avant l'envoi en production.
- Utilisez l'actualisation des statuts de commandes et des données d'expédition dans l'extension.
- Pour votre propre production, téléchargez les fichiers PDF, SVG ou PNG selon les possibilités du projet et les paramètres d'exportation.
L'IA pour préparer des visuels dans le panneau du propriétaire
Vous pouvez configurer votre propre connexion à un fournisseur d'IA et utiliser les fonctions disponibles de génération ou d'amélioration de visuels pendant la création du projet. Les requêtes de l'extension partent de WordPress vers le fournisseur choisi et sont facturées sur votre compte chez ce fournisseur.
Sessions d'intégration : durée de validité et consommation du quota
Une session est une autorisation temporaire d'ouvrir un outil précis dans votre boutique. Elle permet de proposer les produits aux clients en toute sécurité et constitue une unité du quota mensuel de sessions d'intégration. Elle ne correspond pas à un clic, un visiteur unique ou une commande.
Combien de temps la clé de session est-elle valide ?
Au lancement d'un outil intégré, l'intégration obtient un token temporaire, ou clé de session. Les identifiants permanents du compte restent sur le serveur. Le client n'a pas à copier de clés ni à se connecter au compte Alter Product du propriétaire.
La durée de validité par défaut du token dans l'implémentation actuelle est de 15 minutes. Le serveur peut fixer une autre durée ; l'intégration utilise donc l'expiration de la session reçue. Réutiliser le token ne prolonge pas cette échéance. Une nouvelle session est nécessaire pour une autorisation après expiration.
Actualiser la page consomme-t-il une autre session ?
Cela dépend de l'outil et de la présence d'une session adaptée encore valide. L'extension ne partage pas une seule session entre tous les visiteurs et produits. Les règles suivantes décrivent son fonctionnement actuel.
| Situation | Que devient la session ? | Effet sur le quota |
|---|---|---|
| Première ouverture de l'outil sans session correspondante | L'intégration demande un nouveau token pour l'outil et le contexte du produit. | L'émission réussie d'un nouveau token consomme une session. |
| Faire tourner le modèle, changer la couleur ou modifier du texte dans l'outil ouvert | Le travail s'effectue dans la session en cours. | Ces actions ne signifient pas, à elles seules, que de nouveaux tokens sont émis. |
| Actualisation complète d'une page avec Viewer ou Configurator | L'extension obtient généralement un nouveau token après le rechargement de la page. La mémoire de session de ces outils n'est pas conservée entre les actualisations complètes. | Chaque nouvelle émission réussie de token consomme une session supplémentaire. |
| Actualisation de Customizer dans le même onglet | Customizer peut réutiliser la session enregistrée si elle correspond à la boutique, au produit, à la commande et au mode de travail, et si son expiration n'est pas proche. | La réutilisation n'augmente pas le compteur. Si les conditions ne sont pas remplies, une nouvelle session est nécessaire. |
| Expiration du token, autre produit ou changement de contexte | Une nouvelle autorisation et un nouveau token peuvent être nécessaires. La disponibilité du stockage du navigateur influe aussi sur la réutilisation. | Un token nouvellement émis augmente la consommation du quota. |
Comment prévoir les sessions dans les coûts et l'offre de la boutique ?
Le compteur augmente lorsque l'API émet un nouveau token avec succès. Utiliser un token valide déjà émis n'est pas une nouvelle émission. Pour choisir votre offre, tenez donc compte des lancements d'outils, actualisations et réouvertures, pas seulement du nombre de commandes ou de visiteurs.
Les outils intégrés dans une même boutique partagent un quota mensuel de sessions. Le compteur est propre à chaque boutique et suit les mois calendaires en UTC. Les nouvelles sessions de Designer et du Générateur de modèles intégrés au panneau WordPress l'augmentent aussi. Le simple téléchargement d'un modèle disponible via l'API d'importation n'ouvre pas de session d'éditeur.
Une fois le quota atteint, le système refuse d'émettre de nouvelles sessions. Il s'agit d'une limite d'utilisation incluse dans l'abonnement ; consultez le volume actuel de votre offre.
- Lancez l'outil là où le client l'utilise réellement. Pour une liste de produits, vous pouvez utiliser des photos classiques et des mockups déjà générés.
- Dans votre intégration API, évitez de créer une session à chaque rendu d'un composant ou changement d'option. Réutilisez une session valide uniquement dans le contexte qui lui correspond.
- Prévoyez le quota séparément des coûts de production POD et de génération IA, liés à ces services externes.
Intégration sur mesure via l'API
Vous avez une boutique sur mesure, une application headless ou votre propre système de commandes ? Créez votre couche d'intégration avec la Public API Alter Product et intégrez les outils nécessaires dans la page. Cette méthode nécessite du développement.
Connectez Alter Product avec votre technologie
La Public API utilise des requêtes HTTP et des données JSON. Vous pouvez donc écrire l'intégration dans le langage et l'environnement de votre backend. Inutile de reconstruire la boutique sous WordPress pour intégrer les outils Alter Product.
Voici des exemples de technologies pour établir la connexion côté serveur. Les étapes sont les mêmes : autorisation API, création d'une session d'outil, puis association des produits, du panier et des commandes à votre système.
JavaScript et TypeScript / Node.js
Ajoutez l'intégration à un backend Node.js, par exemple avec Express ou NestJS. Appelez l'API depuis le serveur et transmettez au frontend les données nécessaires à l'intégration de l'outil.
Python
Reliez votre application Python existante, par exemple Django ou FastAPI, aux produits, sessions et commandes Alter Product via des requêtes HTTP.
PHP
Utilisez PHP dans votre boutique ou application sur mesure, par exemple Laravel ou Symfony. Vous pouvez créer votre intégration API indépendamment de l'extension WordPress prête à l'emploi.
Java
Reliez les outils à un backend Java, par exemple Spring, et associez les données des projets à votre catalogue produits et à votre gestion des commandes.
C# / .NET
Utilisez un backend .NET, par exemple ASP.NET Core, pour l'autorisation, la création des sessions et la transmission des données aux processus existants de la boutique.
Go
Préparez la connexion dans un service écrit en Go. Le client HTTP standard permet de gérer les requêtes API et les réponses JSON.
Ruby
Ajoutez l'intégration à une application Ruby, par exemple Ruby on Rails, et utilisez votre propre modèle de produits, de panier et d'exécution des commandes.
Rust
Connectez votre backend Rust avec un client HTTP et la prise en charge JSON. Vous pouvez intégrer les sessions et événements d'achat à votre architecture de services.
Un frontend adapté à votre site
Côté navigateur, vous pouvez utiliser React, Vue, Angular ou simplement HTML et JavaScript. TypeScript convient aussi à la communication. La page intègre l'iframe, gère les événements postMessage et communique avec votre backend.
Le frontend gère l'apparence de la page et les réactions du panier, le backend les appels authentifiés à la Public API. Avec les frameworks combinant les deux couches, comme Next.js, réservez la gestion des clés permanentes et la création des sessions à la partie serveur.
Vous pouvez conserver votre checkout, système de paiement, CMS et processus d'exécution des commandes. Lors de l'intégration, vous les reliez aux données du projet et aux événements de l'outil Alter Product choisi.
Que fournit l'API et que prépare votre système ?
Alter Product fournit les outils 3D, les données des projets et les mécanismes de session. Votre backend les relie aux produits, comptes clients, panier et commandes. Vous pouvez créer des endpoints intermédiaires pour votre frontend sans exposer les identifiants Alter Product dans le navigateur.
| Couche | Rôle |
|---|---|
| Frontend de votre site | Affiche l'iframe, répond à la communication de l'outil et met à jour l'interface de la boutique. |
| Votre backend | Authentifie les requêtes à la Public API, crée les sessions, contrôle l'accès du client et enregistre les associations avec votre panier ou vos commandes. |
| Public API Alter Product | Fournit les fonctions de connexion, produits, associations d'outils, commandes et accès aux fichiers et ressources. |
| Outil intégré | Affiche le modèle et permet sa configuration ou sa personnalisation selon le mode choisi et le projet préparé. |
De l'autorisation à votre panier
Commencez par la connexion et une session d'intégration pour un produit. Ajoutez ensuite la gestion de la configuration, de l'enregistrement du projet et des commandes selon l'outil choisi.
- Configurez les identifiants API et le domaine de la boutique. Testez la connexion avec une requête exécutée sur le backend.
- Associez le produit de votre boutique au projet et au bon outil Alter Product.
- Intégrez l'iframe et gérez le démarrage de la communication. Créez une session temporaire sur le serveur et transmettez-la à l'outil conformément à la documentation.
- Gérez l'événement de configuration ou de personnalisation et enregistrez les données nécessaires dans votre panier.
- Après l'achat, synchronisez la commande, les données et fichiers requis avec votre système d'exécution.
Consultez les instructions de votre outil
Les guides d'intégration présentent paramètres et exemples. Les chapitres postMessage expliquent la communication avec la page, et la documentation API décrit les opérations du backend.
Viewer : intégration de baseConfigurator : intégration de baseCustomizer : intégration de baseViewer : communication avec la pageConfigurator : communication avec le panierCustomizer : session et enregistrement du projet clientAPI : synchronisation des commandesAPI : ressources et importation des projetsAPI : accès aux fichiers
Testez tout le parcours avant de lancer les ventes
Testez le produit comme un client : de l'ouverture de la page au projet visible dans la commande. Faites un essai sur ordinateur et téléphone, y compris sans connexion au panneau d'administration.
Liste de vérification rapide
Après avoir préparé un produit, parcourez tout le processus. Réutilisez ensuite la configuration validée pour les autres articles du catalogue.
- Vérifiez que l'offre Business ou supérieure est active et que le domaine fonctionne en HTTPS avec un certificat SSL/TLS valide.
- Vérifiez la visibilité des pages d'outils, l'association du projet et le mode d'intégration choisi.
- Sélectionnez différentes tailles et couleurs. Comparez les options du projet aux variantes et aux prix de la boutique.
- Dans Customizer, ajoutez du texte ou un visuel, enregistrez le projet et ajoutez-le au panier. Testez aussi la modification d'une personnalisation déjà ajoutée.
- Vérifiez l'aperçu, la quantité et la configuration dans le panier et après une commande d'essai.
- Ouvrez le projet associé à la commande et vérifiez les fichiers d'impression générés. Si vous utilisez le POD, testez aussi l'association au prestataire et un envoi contrôlé de la demande de production.
- Vérifiez la bibliothèque accessible au client, la langue, l'identité visuelle et le comportement du site sur téléphone.