Viewer: bekijk het product
Presentatie van het 3D-model en het uiterlijk ervan. Geschikt als je vooral het product van verschillende kanten wilt tonen zonder bewerking van de bedrukking aan te bieden.
E-commerce-integratie - van ontwerp tot bestelling
Sluit Alter Product in op je website: WordPress + WooCommerce of API
Voeg 3D-presentatie, variantconfiguratie en productpersonalisatie toe aan je eigen website. Klanten bekijken het product, kiezen opties en maken een ontwerp in je winkel, terwijl jij aanbod en bestellingen beheert in je eigen systeem.
Kies de plug-in voor WordPress met WooCommerce geïnstalleerd om de configuratie zonder eigen integratiecode uit te voeren. Ontwikkel je een eigen website of winkel, verbind de ingesloten tools dan via de Public API en postMessage-gebeurtenissen met je backend en winkelwagen.
De afbeeldingen tonen de echte interface uit opnamen en het plug-inbeheer. Knopnamen in de beelden zijn Engels; het uiterlijk van de tool hangt af van de winkelconfiguratie.
Twee routes naar je eigen winkel met personalisatie
Hetzelfde productproject kun je voorbereiden voor presentatie, configuratie of bewerking van de bedrukking. Je kiest de winkelkoppeling op basis van je website en de omvang van het ontwikkelwerk.
Plug-in of eigen integratie?
De plug-in biedt kant-en-klare ondersteuning voor WordPress en WooCommerce. Met de API kun je een eigen koppeling bouwen met een ander platform, een headless toepassing of een bestaand bestelsysteem.
| Onderdeel | WordPress + WooCommerce | Eigen systeem via de API |
|---|---|---|
| Ingebruikname | Installatie van de plug-in en een verbindingswizard in het WordPress-beheerpaneel. | Implementatie van de backendkoppeling en insluiting op de website. |
| Producten en varianten | Een project aan een WooCommerce-product koppelen en varianten synchroniseren. | Product- en optie-ID's koppelen aan gegevens van je eigen winkel. |
| Winkelwagen en bestellingen | Kant-en-klare verwerking van configuratie, klantontwerp en voorbeelden in WooCommerce. | Gebeurtenissen van de ingesloten tool afhandelen en bestellingen synchroniseren in je eigen systeem. |
| Bestanden en assets | Lokale bibliotheek, projecten en bestelbestanden op de WordPress-server. | Opslag en gegevenstoegang volgens de gekozen integratiemodus. Bij de variant met eigen opslag verzorg je de ondersteuning daarvan zelf. |
Welke tool bied je klanten aan?
Kies de tool op basis van wat klanten op de website moeten kunnen doen. Het project en de personalisatieregels bereid je vooraf voor in de Designer.
Configurator: kies een variant
Keuze uit voorbereide productopties, zoals maat, kleur of materiaal. De klant ziet de wijziging op het model en stuurt de configuratie naar de winkelwagen.
Customizer: maak je eigen bedrukking
Personalisatie met beschikbare tools, afbeeldingen, teksten en sjablonen. Het opgeslagen klantontwerp wordt gekoppeld aan een winkelwagen- of bestelregel.
Designer: bereid je aanbod voor
Werkruimte van de winkeleigenaar. Hier bereid je de compositie, varianten, drukgebieden en toolinstellingen voor klanten voor. Toegang tot administratieve bewerking is gescheiden van het gebruik van de winkel.
WordPress + WooCommerce: van installatie tot gereed product
Alter Product is een WordPress-plug-in. Voor winkelintegratie moet WooCommerce geïnstalleerd en actief zijn. De gebruikelijke configuratie voer je uit in het beheerpaneel, zonder zelf API- en winkelwagenondersteuning te ontwikkelen.
Vereisten: WordPress, WooCommerce, HTTPS en Business
Om Alter Product op je eigen website in te sluiten, heb je een actief Business-abonnement of een hoger abonnement met deze functie nodig. Dit geldt zowel voor de WordPress- en WooCommerce-plug-in als voor een eigen API-integratie. Personal FREE en Personal bieden geen insluiting in je winkel.
Voor de plug-inroute heb je WordPress met geïnstalleerde en actieve WooCommerce en een Alter Product-account nodig. Bestanden op eigen hosting bewaren vervangt het vereiste abonnement niet: Alter Product levert nog steeds de toepassing en autoriseert het starten ervan.
- Laat de winkel via HTTPS werken met een geldig SSL/TLS-certificaat voor het domein. Dit is nodig voor de juiste werking van ingesloten tools op een openbare website.
- Activeer gebruiksvriendelijke WordPress-permalinks volgens de installatiehandleiding.
- Zorg op je hosting voor ruimte voor modellen, afbeeldingen, projecten en bestelbestanden. De winkelbibliotheek gebruikt de middelen van je server.
Waarom zijn HTTPS en een SSL/TLS-certificaat nodig?
Alter Product draait in een ingesloten iframe op de winkelpagina. Browsers beperken de toegang tot sommige functies van de toepassing als de pagina geen veilige context biedt. HTTPS versleutelt de verbinding en met een geldig certificaat kan de browser het domein controleren.
De browser controleert ook de pagina rond het iframe. Alleen een HTTPS-adres voor de Alter Product-toepassing is daarom niet voldoende als de winkel via HTTP werkt. Ook de website waarop je de tool insluit moet HTTPS gebruiken. Dit volgt uit de beveiligingsregels van browsers voor ingesloten toepassingen.
- Activeer een SSL/TLS-certificaat bij je hostingprovider en controleer of het geldig is voor het winkeldomein.
- Stel de WordPress-siteadressen en het integratiedomein in op HTTPS. Activeer een doorverwijzing van HTTP naar HTTPS.
- Open de productpagina via HTTPS en controleer of de browser problemen meldt met het certificaat of met bronnen die via HTTP worden geladen.
Verbind de winkel met Auto Connect
De automatische koppeling begeleidt je bij het autoriseren van het Alter Product-account en het configureren van de winkel. Bij deze route hoef je geen API-sleutels handmatig over te zetten.
- Ga in WordPress naar Plugins → Nieuwe plugin, zoek Alter Product en installeer en activeer de plug-in.
- Open het Alter Product-paneel en kies Auto Connect. Log in op het juiste Alter Product-account, controleer de winkel en bevestig de verbinding.
- Ga terug naar WordPress. Kies een startmodel en download de benodigde assets. Wacht tot het downloaden en de gereedheidscontrole voltooid zijn.
- Controleer de aangemaakte toolpagina's en weergave-instellingen en ga daarna verder met het voorbereiden van het product.
Koppel het project en synchroniseer varianten
Open bij het bewerken van het WooCommerce-product het tabblad Alter Product. Maak een nieuw project of selecteer een bestaand project en open daarna de Designer. Stel bedrukking, beschikbare opties en drukgebieden voor dit product in.
- Bereid bij een variabel product attributen zoals maten en de bijbehorende WooCommerce-varianten voor.
- Gebruik Sync variants in de Designer om projectopties aan productvarianten te koppelen. Controleer ook standaardkeuzes die in WooCommerce geen variantattribuut zijn.
- Sla het project en product op. Kies de tool die op de pagina wordt getoond en hoe deze opent.
- Controleer het resultaat op de productpagina: selecteer verschillende varianten, maak een ontwerp en ga naar de winkelwagen.
Je bibliotheek op de WordPress-server
Modellen, projecten, afbeeldingen en bestelbestanden bewaar je op de hosting waarop WordPress draait. Lokaal toegevoegde assets zijn voor jouw winkel en worden daardoor geen onderdelen van de openbare Alter Product-bibliotheek voor andere winkels.
Wat wordt lokaal opgeslagen?
De plug-in bewaart model-, bibliotheek-, project-, mockup- en bestelbestanden in de WordPress-opslagruimte. Gegevens van generatorprojecten en hun revisies worden ook in de database van die installatie opgeslagen.
Je kunt eigen materialen toevoegen en geselecteerde assets uit Alter Product importeren. Na het downloaden gebruik je een lokale kopie. Importeren, op updates controleren en nieuwe versies downloaden zijn afzonderlijke handelingen.
| Plaats in het beheerpaneel | Wat je daar doet |
|---|---|
| Assets | Je beheert onder meer modellen, afbeeldingen, sjablonen, achtergronden, logo's, texturen en omgevingen. De beschikbare manieren om iets toe te voegen hangen af van het assettype. |
| Modelgenerator | Je maakt lokale projecten op basis van sjablonen en werkt met modellen die aan de generator zijn gekoppeld. |
| Productprojecten / Designer | Je maakt of importeert een ontwerp, bewerkt het en koppelt het aan een winkelproduct. |
| WooCommerce-bestellingen | Je gebruikt opgeslagen klantontwerpen, voorbeelden en bestanden voor het uitvoeren van de bestelling. |
Lokale bestanden, ingesloten Alter Product-toepassing
De assets bewaar je zelf, terwijl de toolinterface van Alter Product in een ingesloten iframe wordt geladen. De Alter Product-dienst controleert accounttoegang, abonnement en sessies en levert de importcatalogus. De integratie vereist een verbinding met deze dienst.
Bewaar bij back-ups de database, bestandsmap en WordPress-sleutels en salts die nodig zijn om versleutelde plug-ingegevens te lezen. Zo herstel je niet alleen zichtbare afbeeldingen, maar ook de gegevens die nodig zijn om verder te werken.
Personalisatie op de website van je merk
De insluiting kan onderdeel zijn van een productpagina of een aparte WordPress-pagina. De klant blijft in het aankoopproces van je winkel; WooCommerce verwerkt de winkelwagen en bestelling.
Productpagina, toolpagina of blok
Pas de weergave aan de winkelindeling aan: een tool op de productpagina, een knop naar een aparte pagina of insluiting met beschikbare blokken en shortcodes. Viewer, Configurator en Customizer hebben verschillende functies, dus je hoeft ze niet allemaal tegelijk aan te bieden.
- Toon Viewer waar de klant het productmodel moet bekijken.
- Gebruik Configurator als je voorbereide varianten en opties verkoopt.
- Kies Customizer als de klant tekst of een afbeelding moet toevoegen of de drukcompositie moet wijzigen.
Eigen achtergronden, logo en taal
Stem de productpresentatie af op je merk. In de plug-in beheer je lokale achtergronden en logo's en het uiterlijk van de ingesloten tools. Welke opties beschikbaar zijn, hangt af van het abonnement.
- De scèneachtergrond, interfacekleuren en het voorbereide projectontwerp helpen de uitstraling van de winkel consistent te houden.
- De toepassing en plug-in ondersteunen 22 talen. De taal van het WordPress-beheerpaneel stel je per gebruiker in en de sitetaal in de website-instellingen.
- Eigen productnamen, drukteksten en aanbodsbeschrijvingen maak je in de talen van je klanten. Ondersteuning voor een interfacetaal betekent geen automatische vertaling van winkelinhoud.
Van klantontwerp naar bestelregel
De klant kiest een variant en maakt een personalisatie. De plug-in koppelt de configuratie en het opgeslagen ontwerp aan de winkelwagenregel en later aan de WooCommerce-bestelling. Beschikbare mockups helpen de bestelde bedrukking te herkennen.
- De klant opent het product of de gekoppelde tool en kiest opties.
- Bij personalisatie slaat de klant het ontwerp op en voegt het product toe aan de winkelwagen.
- In de winkelwagen controleert de klant product, configuratie en beschikbare ontwerpvoorvertoning en doorloopt vervolgens de WooCommerce-checkout.
- In het bestelbeheer opent de eigenaar het opgeslagen ontwerp en bereidt de uitvoering voor.
Bestelafhandeling, POD en optionele AI
De koppeling van je winkel met 3D-tools is het begin van het proces. Vanuit het voorbereide ontwerp kun je bestanden voor eigen productie downloaden of de beschikbare plug-inintegratie met een print-on-demand-aanbieder gebruiken.
Verbind Printify of Printful
Configureer in de plug-ininstellingen de verbinding met de gekozen aanbieder. Koppel daarna het product, varianten en drukposities aan het aanbod van de leverancier, bereid bestanden voor en geef vanuit WooCommerce opdracht voor de uitvoering.
- Pas drukoppervlakken en bestandsformaat aan het specifieke product en de leverancier aan.
- Controleer de gegenereerde bestanden en de bestelde variant voordat je ze naar productie stuurt.
- Gebruik de updates van bestelstatussen en verzendgegevens in de plug-in.
- Bij eigen productie download je PDF-, SVG- of PNG-bestanden volgens de mogelijkheden van het project en de exportinstellingen.
AI voor het voorbereiden van afbeeldingen in het eigenaarsbeheer
Je kunt een eigen verbinding met een AI-aanbieder instellen en tijdens het ontwerpen de beschikbare functies voor beeldgeneratie of -verbetering gebruiken. Plug-inverzoeken gaan vanuit WordPress naar de gekozen aanbieder en worden op jouw account bij die aanbieder afgerekend.
Insluitsessies: geldigheid en limietverbruik
Een sessie is een tijdelijke toestemming om een bepaalde tool in je winkel te openen. Ze helpt producten veilig aan klanten beschikbaar te stellen en is de eenheid die meetelt voor de maandelijkse limiet voor insluitsessies. Een sessie is niet hetzelfde als één klik, een unieke bezoeker of een bestelling.
Hoelang is een sessiesleutel geldig?
Bij het starten van een ingesloten tool verkrijgt de integratie een kortlevend token, de sessiesleutel. Permanente accountgegevens blijven op de server. De klant hoeft geen sleutels te kopiëren of in te loggen op het Alter Product-account van de eigenaar.
In de huidige implementatie is de standaardgeldigheid van een token 15 minuten. De server kan een andere duur bepalen; daarom gebruikt de integratie de vervaltijd van de ontvangen sessie. Hergebruik van een token verlengt die termijn niet. Voor een volgende autorisatie na het verlopen is een nieuwe sessie nodig.
Verbruikt verversen van de pagina een extra sessie?
Dat hangt af van de tool en of deze nog een passende, geldige sessie heeft. De plug-in gebruikt geen gezamenlijke sessie voor alle bezoekers en producten. De onderstaande regels beschrijven het huidige gedrag.
| Situatie | Wat gebeurt er met de sessie? | Effect op de limiet |
|---|---|---|
| Eerste keer openen van de tool zonder passende sessie | De integratie vraagt een nieuw token voor de tool en de productcontext. | Succesvolle uitgifte van een nieuw token verbruikt één sessie. |
| Model draaien, kleur wijzigen of tekst bewerken in een geopende tool | Het werk gebeurt binnen de gestarte sessie. | Deze handelingen betekenen op zichzelf niet dat nieuwe tokens worden uitgegeven. |
| De volledige pagina met Viewer of Configurator verversen | De plug-in verkrijgt doorgaans een nieuw token nadat de pagina opnieuw is geladen. De sessieopslag van deze tools blijft niet behouden tussen volledige verversingen. | Elke volgende succesvolle tokenuitgifte verbruikt nog een sessie. |
| Customizer verversen in hetzelfde tabblad | Customizer kan een bewaarde sessie hergebruiken als die past bij winkel, product, bestelling en werkmodus en niet bijna verloopt. | Hergebruik verhoogt de teller niet. Als niet aan de voorwaarden is voldaan, is een nieuwe sessie nodig. |
| Verlopen token, ander product of gewijzigde werkcontext | Nieuwe autorisatie en een nieuw token kunnen nodig zijn. Ook de beschikbaarheid van browseropslag beïnvloedt de mogelijkheid tot hergebruik. | Een nieuw uitgegeven token verhoogt het limietverbruik. |
Hoe neem je sessies mee in kosten en abonnementskeuze?
De teller stijgt wanneer de API succesvol een nieuw token uitgeeft. Gebruik van een al uitgegeven, geldig token is geen nieuwe uitgifte. Houd bij de abonnementskeuze daarom rekening met toolstarts, verversingen en opnieuw openen, niet alleen met bestellingen of bezoekers.
Ingesloten tools binnen dezelfde winkel delen één maandelijkse sessielimiet. De teller wordt per winkel apart bijgehouden, per kalendermaand volgens UTC. Nieuwe sessies van de ingesloten Designer en Modelgenerator in WordPress-beheer verhogen deze teller ook. Alleen een beschikbaar model downloaden via de import-API opent geen editorsessie.
Na het bereiken van de limiet weigert het systeem nieuwe sessies uit te geven. Dit is een gebruikslimiet binnen het abonnement; bekijk de huidige omvang in je abonnement.
- Start de tool waar klanten deze daadwerkelijk gebruiken. Voor productlijsten kun je gewone foto's en kant-en-klare mockups gebruiken.
- Vermijd in je eigen API-integratie dat bij elke componentrendering of optiewijziging een nieuwe sessie wordt gemaakt. Gebruik een geldige sessie alleen in de bijbehorende context.
- Plan de sessielimiet apart van POD-uitvoeringskosten en AI-generatiekosten, die uit het gebruik van deze externe diensten voortkomen.
Eigen integratie via de API
Heb je een eigen winkel, headless toepassing of bestelsysteem? Je kunt een eigen integratielaag ontwikkelen met de Alter Product Public API en de benodigde tools op je website insluiten. Deze route vereist programmeerwerk.
Verbind Alter Product met jouw technologie
De Public API gebruikt HTTP-verzoeken en JSON-gegevens. Je kunt je integratie dus schrijven in de taal en omgeving van je backend. Je hoeft de winkel niet naar WordPress om te bouwen om Alter Product-tools in te sluiten.
Hieronder vind je voorbeeldtechnologieën voor een serverkoppeling. In elke technologie implementeer je dezelfde stappen: API-autorisatie, een toolsessie maken en producten, winkelwagen en bestellingen met je systeem verbinden.
JavaScript en TypeScript / Node.js
Voeg de integratie toe aan je Node.js-backend, bijvoorbeeld met Express of NestJS. Roep de API vanaf de server aan en geef het frontend de gegevens die nodig zijn om de tool in te sluiten.
Python
Verbind een bestaande Python-toepassing, zoals Django of FastAPI, via HTTP-verzoeken met Alter Product-producten, -sessies en -bestellingen.
PHP
Gebruik PHP in je eigen winkel of toepassing, bijvoorbeeld Laravel of Symfony. Je kunt een eigen API-integratie maken, onafhankelijk van de kant-en-klare WordPress-plug-in.
Java
Integreer de tools met een Java-backend, bijvoorbeeld Spring, en koppel projectgegevens aan je eigen productcatalogus en bestelafhandeling.
C# / .NET
Gebruik een .NET-backend, bijvoorbeeld ASP.NET Core, voor autorisatie, sessieaanmaak en gegevensoverdracht naar bestaande winkelprocessen.
Go
Maak de koppeling in een dienst geschreven in Go. De standaard HTTP-client kan API-verzoeken en JSON-antwoorden verwerken.
Ruby
Voeg de integratie toe aan een Ruby-toepassing, bijvoorbeeld Ruby on Rails, en gebruik je eigen model voor producten, winkelwagen en besteluitvoering.
Rust
Verbind de Rust-backend via een HTTP-client en JSON-verwerking. Sessies en aankoopgebeurtenissen kun je in je dienstenarchitectuur opnemen.
Frontend afgestemd op je website
In de browser kun je React, Vue, Angular of gewoon HTML en JavaScript gebruiken. TypeScript is ook geschikt om de communicatie te implementeren. De pagina sluit een iframe in, verwerkt postMessage-gebeurtenissen en communiceert met je backend.
Het frontend verzorgt het uiterlijk van de pagina en de reacties van de winkelwagen; de backend verzorgt geauthenticeerde Public API-aanroepen. Bij frameworks die beide lagen combineren, zoals Next.js, plaats je permanente sleutels en sessieaanmaak uitsluitend aan de serverkant.
Je kunt je eigen checkout, betaalsysteem, CMS en bestelproces behouden. Tijdens de implementatie verbind je deze onderdelen met projectgegevens en gebeurtenissen van de gekozen Alter Product-tool.
Wat levert de API en wat verzorgt jouw systeem?
Alter Product levert 3D-tools, projectgegevens en sessiemechanismen. Je backend verbindt ze met producten, klantaccounts, winkelwagen en bestelafhandeling. Je kunt eigen tussenliggende endpoints voor het frontend maken zonder Alter Product-toegangsgegevens in de browser bekend te maken.
| Laag | Taak |
|---|---|
| Frontend van je website | Toont het iframe, reageert op toolcommunicatie en werkt de winkelinterface bij. |
| Je backend | Authenticeert verzoeken aan de Public API, maakt sessies, regelt klanttoegang en bewaart koppelingen met je eigen winkelwagen of bestellingen. |
| Alter Product Public API | Biedt functies voor verbinding, producten, toolkoppelingen, bestellingen en toegang tot bestanden en assets. |
| Ingesloten tool | Toont het model en maakt configuratie of personalisatie mogelijk volgens de gekozen modus en het voorbereide project. |
Van autorisatie naar je eigen winkelwagen
Zet eerst de verbinding en een insluitsessie voor één product op. Voeg daarna ondersteuning voor configuratie, opslaan van ontwerpen en bestellingen toe volgens de gekozen tool.
- Configureer API-toegangsgegevens en winkeldomein. Test de verbinding met een verzoek vanaf de backend.
- Koppel je winkelproduct aan het project en de juiste Alter Product-tool.
- Sluit het iframe in en verwerk de start van de communicatie. Maak een kortlevende sessie aan de serverkant en geef die volgens de documentatie door aan de tool.
- Verwerk de configuratie- of personalisatiegebeurtenis en bewaar de benodigde gegevens in je winkelwagen.
- Synchroniseer na aankoop de bestelling en vereiste gegevens en bestanden met je eigen uitvoeringssysteem.
Ga naar de instructies voor jouw tool
De insluitinstructies bevatten parameters en voorbeelden. De postMessage-hoofdstukken leggen de communicatie met de website uit; de API-documentatie beschrijft de handelingen van de backend.
Controleer het hele traject voordat je begint te verkopen
Test het product zoals een klant het gebruikt: vanaf het openen van de pagina tot het ontwerp bij de bestelling. Test op computer en telefoon, ook zonder inloggen in het beheerpaneel.
Korte checklist
Doorloop na het voorbereiden van één product het volledige proces. Herhaal pas daarna de gecontroleerde configuratie voor volgende catalogusproducten.
- Controleer een actief Business-abonnement of hoger en werking van het domein via HTTPS met een geldig SSL/TLS-certificaat.
- Controleer de zichtbaarheid van toolpagina's, de projectkoppeling en de gekozen insluitmethode.
- Kies verschillende maten en kleuren. Vergelijk projectopties met varianten en prijzen in de winkel.
- Voeg in Customizer tekst of een afbeelding toe, sla het ontwerp op en voeg het toe aan de winkelwagen. Controleer ook het bewerken van een al toegevoegde personalisatie.
- Controleer voorvertoning, aantal en configuratie in de winkelwagen en na het plaatsen van een testbestelling.
- Open het ontwerp bij de bestelling en controleer de gegenereerde drukbestanden. Gebruik je POD, test dan ook de leveranciersmapping en een gecontroleerd proces voor het verzenden van de opdracht.
- Controleer de klantbibliotheek, taal, branding en werking van de website op een telefoon.