Viewer: se produktet
Præsentation af 3D-modellen og dens udseende. Velegnet, når det vigtigste er at vise produktet fra forskellige sider uden at tilbyde redigering af trykket.
E-handelsintegration - fra design til bestilling
Indlejr Alter Product på din hjemmeside: WordPress + WooCommerce eller API
Tilføj 3D-præsentation, variantkonfiguration og produkttilpasning til din egen hjemmeside. Kunden ser produktet, vælger muligheder og laver et design i din butik, mens du administrerer sortiment og ordrer i dit eget system.
Vælg pluginet til WordPress med WooCommerce installeret for at konfigurere uden egen integrationskode. Hvis du udvikler din egen hjemmeside eller butik, forbindes de indlejrede værktøjer med backend og kurv via Public API og postMessage-hændelser.
Billederne viser den faktiske grænseflade fra optagelser og pluginpanelet. Knapnavnene er på engelsk; værktøjets udseende afhænger af butikkens konfiguration.
To veje til din egen butik med produkttilpasning
Samme produktprojekt kan forberedes til præsentation, konfiguration eller redigering af trykket. Vælg forbindelsen til butikken efter din hjemmeside og omfanget af udviklingsarbejdet.
Plugin eller egen integration?
Pluginet giver færdig understøttelse af WordPress og WooCommerce. API'et gør det muligt at bygge en egen forbindelse til en anden platform, en headless-applikation eller et eksisterende ordresystem.
| Område | WordPress + WooCommerce | Eget system via API |
|---|---|---|
| Opstart | Installation af plugin og forbindelsesguide i WordPress-panelet. | Implementering af backendforbindelse og indlejring på hjemmesiden. |
| Produkter og varianter | Tilknytning af projekt til WooCommerce-produkt og synkronisering af varianter. | Forbindelse mellem produkt- og muligheds-id'er og data fra din egen butik. |
| Kurv og ordrer | Færdig håndtering af konfiguration, kundedesign og forhåndsvisninger i WooCommerce. | Håndtering af det indlejrede værktøjs hændelser og synkronisering af ordrer i dit eget system. |
| Filer og ressourcer | Lokalt bibliotek, projekter og ordrefiler på WordPress-serveren. | Lagring og dataadgang efter den valgte integrationstilstand. Varianten med egen lagring kræver, at du selv håndterer den. |
Hvilket værktøj skal kunden bruge?
Vælg værktøjet efter det, kunden skal gøre på hjemmesiden. Projekt og regler for tilpasning forberedes på forhånd i Designer.
Configurator: vælg variant
Valg af forberedte produktmuligheder, for eksempel størrelse, farve eller materiale. Kunden ser ændringen på modellen og sender konfigurationen til kurven.
Customizer: lav dit eget tryk
Tilpasning med de tilgængelige værktøjer, grafikker, tekster og skabeloner. Kundens gemte design knyttes til en kurv- eller ordrelinje.
Designer: forbered sortimentet
Butiksejerens arbejdsområde. Her forbereder du komposition, varianter, trykområder og værktøjsindstillinger til kunderne. Adgang til administrativ redigering er adskilt fra brugen af butikken.
WordPress + WooCommerce: fra installation til færdigt produkt
Alter Product er et WordPress-plugin. Butiksintegration kræver installeret og aktivt WooCommerce. Den almindelige opsætning udføres i panelet uden at udvikle egen API- og kurvehåndtering.
Krav: WordPress, WooCommerce, HTTPS og Business-plan
For at indlejre Alter Product på din egen hjemmeside skal du have et aktivt Business-abonnement eller en højere plan, der omfatter funktionen. Det gælder både WordPress- og WooCommerce-pluginet og egen API-integration. Personal FREE og Personal omfatter ikke indlejring i din butik.
Til pluginløsningen skal du have WordPress med installeret og aktivt WooCommerce samt en Alter Product-konto. Filer på egen hosting erstatter ikke det krævede abonnement: Alter Product leverer stadig applikationen og autoriserer dens opstart.
- Kør butikken via HTTPS med et gyldigt SSL/TLS-certifikat til domænet. Det er nødvendigt for, at de indlejrede værktøjer fungerer korrekt på en offentlig hjemmeside.
- Aktivér brugervenlige permanente links i WordPress efter installationsvejledningen.
- Sørg for plads på din hosting til modeller, grafik, projekter og ordrefiler. Butikkens bibliotek bruger din servers ressourcer.
Hvorfor er HTTPS og et SSL/TLS-certifikat nødvendigt?
Alter Product kører i en indlejret iframe på butikssiden. Browsere begrænser adgang til nogle af appens funktioner, hvis siden ikke tilbyder en sikker kontekst. HTTPS krypterer forbindelsen, og et gyldigt certifikat lader browseren kontrollere domænet.
Browseren kontrollerer også siden omkring iframe. Derfor er Alter Product-appens HTTPS-adresse ikke nok, hvis butikken kører via HTTP. Din hjemmeside, hvor værktøjet indlejres, skal også bruge HTTPS. Det følger af browsernes sikkerhedsregler for indlejrede applikationer.
- Aktivér et SSL/TLS-certifikat hos din hostingudbyder, og kontrollér, at det er gyldigt til butikkens domæne.
- Indstil WordPress-hjemmesidens adresser og integrationsdomænet til HTTPS. Aktivér omdirigering fra HTTP til HTTPS.
- Åbn produktsiden via HTTPS, og kontrollér, at browseren ikke melder om certifikatproblemer eller ressourcer, der indlæses via HTTP.
Forbind butikken med Auto Connect
Den automatiske forbindelse guider dig gennem autorisering af Alter Product-kontoen og opsætning af butikken. Her behøver du ikke flytte API-nøgler manuelt.
- Gå i WordPress til Plugins → Tilføj nyt, søg efter Alter Product, og installer og aktivér pluginet.
- Åbn Alter Product-panelet, og vælg Auto Connect. Log ind på den rigtige Alter Product-konto, kontrollér butikken, og godkend forbindelsen.
- Gå tilbage til WordPress. Vælg en startmodel, og download de nødvendige ressourcer. Vent, til download og kontrol af klargøring er afsluttet.
- Kontrollér de oprettede værktøjssider og visningsindstillinger, og fortsæt derefter med produktforberedelsen.
Tilknyt projektet, og synkroniser varianter
Åbn fanen Alter Product, når du redigerer WooCommerce-produktet. Opret et nyt projekt, eller vælg et eksisterende, og åbn derefter Designer. Indstil tryk, tilgængelige muligheder og trykområder for produktet.
- Ved et variabelt produkt skal du forberede egenskaber som størrelser og de tilsvarende WooCommerce-varianter.
- Brug Sync variants i Designer til at forbinde projektmuligheder med produktvarianter. Kontrollér også standardvalg, som ikke er variantegenskaber i WooCommerce.
- Gem projekt og produkt. Vælg værktøjet, der skal vises på siden, og hvordan det åbnes.
- Kontrollér resultatet på produktsiden: vælg flere varianter, lav et design, og gå til kurven.
Dit bibliotek på WordPress-serveren
Modeller, projekter, grafik og ordrefiler opbevares på den hosting, hvor WordPress kører. Lokalt tilføjede ressourcer bruges af din butik og bliver ikke dermed en del af Alter Products offentlige bibliotek for andre butikker.
Hvad lagres lokalt?
Pluginet gemmer model-, biblioteks-, projekt-, mockup- og ordrefiler i WordPress' lagerplads. Data om generatorprojekter og deres revisioner gemmes også i denne installations database.
Du kan tilføje egne materialer og importere udvalgte ressourcer fra Alter Product. Efter download bruger du en lokal kopi. Import, kontrol for opdateringer og download af nye versioner er separate handlinger.
| Placering i panelet | Hvad du gør der |
|---|---|
| Ressourcer | Du administrerer blandt andet modeller, grafik, skabeloner, baggrunde, logoer, teksturer og miljøer. Mulighederne for at tilføje afhænger af ressourcetypen. |
| Modelgenerator | Du opretter lokale projekter ud fra skabeloner og arbejder med modeller, der er knyttet til generatoren. |
| Produktprojekter / Designer | Du forbereder eller importerer et design, redigerer det og knytter det til et butiksprodukt. |
| WooCommerce-ordrer | Du bruger gemte kundedesign, forhåndsvisninger og filer til at udføre ordren. |
Lokale filer, indlejret Alter Product-app
Ressourcerne opbevares hos dig, mens værktøjernes grænseflade indlæses fra Alter Product i en indlejret iframe. Alter Product-tjenesten kontrollerer kontoadgang, plan og sessioner og leverer importkataloget. Integrationen kræver forbindelse til tjenesten.
Ved sikkerhedskopiering skal du gemme databasen, filmappen samt WordPress-nøgler og salts, som kræves for at læse pluginets krypterede data. Så kan du gendanne både synlig grafik og data, der er nødvendige for det videre arbejde.
Tilpasning på dit brands hjemmeside
Indlejringen kan være del af en produktside eller en separat WordPress-side. Kunden bliver i butikkens købsproces, mens WooCommerce håndterer kurv og ordre.
Produktside, værktøjsside eller blok
Tilpas visningen til butikkens layout: værktøj på produktsiden, knap til en særskilt side eller indlejring med tilgængelige blokke og shortcodes. Viewer, Configurator og Customizer har forskellige roller, så du behøver ikke tilbyde alle samtidig.
- Vis Viewer, hvor kunden skal se produktmodellen.
- Brug Configurator, når du sælger forberedte varianter og muligheder.
- Vælg Customizer, når kunden skal tilføje tekst eller billede eller ændre trykkets komposition.
Egne baggrunde, logo og sprog
Tilpas produktpræsentationen til dit brand. I pluginet administrerer du lokale baggrunde og logoer samt udseendet af de indlejrede værktøjer. Tilgængeligheden af de enkelte muligheder afhænger af planen.
- Scenebaggrund, grænsefladens farver og det forberedte projektdesign hjælper med at bevare en ensartet stil med butikken.
- Appen og pluginet understøtter 22 sprog. Sproget i WordPress-panelet indstilles for brugeren, og hjemmesidens sprog i webstedsindstillingerne.
- Egne produktnavne, tryktekster og produktbeskrivelser forberedes på kundernes sprog. Understøttelse af grænsefladens sprog betyder ikke automatisk oversættelse af butikkens indhold.
Fra kundedesign til ordrelinje
Kunden vælger variant og forbereder tilpasningen. Pluginet knytter konfiguration og gemt design til kurvelinjen og derefter til WooCommerce-ordren. Tilgængelige mockups hjælper med at identificere det bestilte tryk.
- Kunden åbner produktet eller det tilknyttede værktøj og vælger muligheder.
- Ved tilpasning gemmer kunden designet og lægger produktet i kurven.
- I kurven kontrollerer kunden produkt, konfiguration og tilgængelig designforhåndsvisning og går derefter gennem WooCommerce-checkout.
- I ordrepanelet åbner ejeren det gemte design og forbereder udførelsen.
Ordreudførelse, POD og valgfri AI
Forbindelsen mellem butikken og 3D-værktøjerne er starten på processen. Fra det forberedte design kan du downloade filer til egen produktion eller bruge pluginets integration med en print-on-demand-leverandør.
Forbind Printify eller Printful
Konfigurer forbindelsen til den valgte leverandør i pluginindstillingerne. Knyt derefter produkt, varianter og trykplaceringer til leverandørens sortiment, forbered filer, og bestil udførelse fra WooCommerce.
- Tilpas trykflader og filformat til det konkrete produkt og leverandøren.
- Kontrollér de genererede filer og den bestilte variant, før de sendes til produktion.
- Brug opdatering af ordrestatus og forsendelsesdata i pluginet.
- Ved egen produktion downloader du PDF-, SVG- eller PNG-filer efter projektets muligheder og eksportindstillinger.
AI til grafikforberedelse i ejerpanelet
Du kan konfigurere en egen forbindelse til en AI-leverandør og bruge tilgængelige funktioner til generering eller forbedring af grafik under projektarbejdet. Pluginets forespørgsler sendes fra WordPress til den valgte leverandør og afregnes på din konto hos leverandøren.
Indlejringssessioner: gyldighed og forbrug af grænsen
En session er en midlertidig tilladelse til at åbne et bestemt værktøj i din butik. Den hjælper med at give kunder sikker adgang til produkter og er den enhed, der tæller med i den månedlige grænse for indlejringssessioner. Den er ikke det samme som et enkelt klik, en unik besøgende eller en ordre.
Hvor længe gælder en sessionsnøgle?
Når et indlejret værktøj startes, får integrationen et kortlivet token, altså en sessionsnøgle. Permanente kontooplysninger bliver på serveren. Kunden skal hverken kopiere nøgler eller logge ind på ejerens Alter Product-konto.
I den nuværende implementering er et tokens standardgyldighed 15 minutter. Serveren kan fastsætte en anden varighed, så integrationen bruger udløbstiden for den modtagne session. Genbrug af token forlænger ikke fristen. En ny autorisering efter udløb kræver en ny session.
Bruger en genindlæsning af siden en ekstra session?
Det afhænger af værktøjet, og om det stadig har en passende, gyldig session. Pluginet bruger ikke én fælles session for alle besøgende og produkter. Reglerne nedenfor beskriver den nuværende funktion.
| Situation | Hvad sker der med sessionen? | Virkning på grænsen |
|---|---|---|
| Første åbning af værktøjet uden en passende session | Integrationen anmoder om et nyt token til værktøjet og produktkonteksten. | Vellykket udstedelse af et nyt token bruger én session. |
| Rotation af modellen, farveskift eller tekstredigering i et åbent værktøj | Arbejdet foregår inden for den startede session. | Disse handlinger medfører ikke i sig selv udstedelse af flere tokens. |
| Fuld genindlæsning af siden med Viewer eller Configurator | Pluginet får normalt et nyt token, når siden genindlæses. Sessionshukommelsen for disse værktøjer bevares ikke mellem fulde genindlæsninger. | Hver yderligere vellykket tokenudstedelse bruger en ekstra session. |
| Genindlæsning af Customizer i samme fane | Customizer kan genbruge en gemt session, hvis den passer til butik, produkt, ordre og arbejdstilstand og ikke er tæt på at udløbe. | Genbrug øger ikke tælleren. Hvis betingelserne ikke er opfyldt, kræves en ny session. |
| Udløbet token, andet produkt eller ændret arbejdskontekst | Ny autorisering og et nyt token kan være nødvendigt. Adgang til browserlagring påvirker også muligheden for genbrug. | Et nyudstedt token øger forbruget af grænsen. |
Hvordan medregner du sessioner i butikkens omkostninger og plan?
Tælleren stiger, når API'et udsteder et nyt token med succes. Brug af et allerede udstedt, gyldigt token er ikke en ny udstedelse. Tag derfor højde for værktøjsstarter, genindlæsninger og genåbninger ved valg af plan, ikke kun ordrer eller besøgende.
Indlejrede værktøjer i samme butik deler en månedlig sessionsgrænse. Tælleren føres separat for hver butik pr. kalendermåned efter UTC. Nye sessioner i indlejret Designer og Modelgenerator i WordPress-panelet øger også tælleren. Download af en tilgængelig model via import-API'et åbner ikke i sig selv en editorsession.
Når grænsen er nået, afviser systemet at udstede flere sessioner. Det er en forbrugsgrænse inden for abonnementet; se den aktuelle pakkestørrelse i din plan.
- Start værktøjet der, hvor kunden faktisk bruger det. Til produktlister kan du bruge almindelige billeder og færdige mockups.
- Undgå i din egen API-integration at oprette en ny session ved hver komponentrendering eller ændring af en mulighed. Brug kun en gyldig session i den rette kontekst.
- Planlæg sessionsgrænsen separat fra omkostninger til POD-udførelse og AI-generering, som følger af brugen af disse eksterne tjenester.
Egen integration via API
Har du en egen butik, headless-applikation eller et eget ordresystem? Du kan bygge dit eget integrationslag med Alter Product Public API og indlejre de nødvendige værktøjer på hjemmesiden. Denne vej kræver programmering.
Forbind Alter Product med din teknologi
Public API bruger HTTP-forespørgsler og JSON-data. Du kan derfor skrive din integration i det sprog og miljø, hvor din backend kører. Butikken skal ikke bygges om til WordPress for at indlejre Alter Products værktøjer.
Nedenfor ses eksempler på teknologier til en serverforbindelse. I hver udfører du de samme trin: API-autorisering, oprettelse af værktøjssession og tilknytning af produkter, kurv og ordrer til dit system.
JavaScript og TypeScript / Node.js
Tilføj integrationen til en Node.js-backend, for eksempel med Express eller NestJS. Kald API'et fra serveren, og giv frontend de data, som indlejring af værktøjet kræver.
Python
Forbind en eksisterende Python-applikation, eksempelvis Django eller FastAPI, med Alter Products produkter, sessioner og ordrer via HTTP-forespørgsler.
PHP
Brug PHP i din egen butik eller applikation, eksempelvis Laravel eller Symfony. Du kan lave en egen API-integration uafhængigt af det færdige WordPress-plugin.
Java
Integrer værktøjerne med en Java-backend, eksempelvis Spring, og forbind projektdata med dit eget produktkatalog og din ordrehåndtering.
C# / .NET
Brug en .NET-backend, eksempelvis ASP.NET Core, til autorisering, sessionsoprettelse og overførsel af data til eksisterende butiksprocesser.
Go
Lav forbindelsen i en tjeneste skrevet i Go. Standardklienten til HTTP kan håndtere API-forespørgsler og JSON-svar.
Ruby
Tilføj integrationen til en Ruby-applikation, eksempelvis Ruby on Rails, og brug din egen model for produkter, kurv og ordreudførelse.
Rust
Forbind en Rust-backend via en HTTP-klient og JSON-håndtering. Sessioner og købshændelser kan indgå i din servicearkitektur.
Frontend tilpasset din hjemmeside
I browseren kan du bruge React, Vue, Angular eller almindelig HTML og JavaScript. TypeScript egner sig også til implementering af kommunikationen. Siden indlejrer en iframe, håndterer postMessage-hændelser og forbinder til din backend.
Frontend styrer sidens udseende og kurvens reaktioner, mens backend håndterer autentificerede kald til Public API. I frameworks, der kombinerer begge lag, eksempelvis Next.js, skal permanente nøgler og sessionsoprettelse kun håndteres på serversiden.
Du kan beholde eget checkout, betalingssystem, CMS og ordreproces. Som del af implementeringen forbinder du dem med projektdata og hændelser fra det valgte Alter Product-værktøj.
Hvad leverer API'et, og hvad forbereder dit system?
Alter Product tilbyder 3D-værktøjer, projektdata og sessionsmekanismer. Din backend forbinder dem med produkter, kundekonti, kurv og ordrehåndtering. Du kan oprette egne mellemledsendpoints til frontend uden at afsløre Alter Product-adgangsoplysninger i browseren.
| Lag | Opgave |
|---|---|
| Din hjemmesides frontend | Viser iframe, reagerer på værktøjets kommunikation og opdaterer butikkens grænseflade. |
| Din backend | Autentificerer forespørgsler til Public API, opretter sessioner, kontrollerer kundeadgang og gemmer forbindelser til egen kurv eller ordrer. |
| Alter Product Public API | Tilbyder funktioner til forbindelse, produkter, værktøjstilknytninger, ordrer og adgang til filer og ressourcer. |
| Indlejret værktøj | Viser modellen og giver mulighed for konfiguration eller tilpasning efter valgt tilstand og forberedt projekt. |
Fra autorisering til egen kurv
Start først forbindelsen og en indlejringssession for ét produkt. Tilføj derefter håndtering af konfiguration, designlagring og ordrer efter det valgte værktøj.
- Konfigurer API-adgangsoplysninger og butikkens domæne. Kontrollér forbindelsen med en forespørgsel fra backend.
- Knyt butikkens produkt til projektet og det rette Alter Product-værktøj.
- Indlejr iframe, og håndter starten på kommunikationen. Opret en kortlivet session på serveren, og overfør den til værktøjet efter dokumentationen.
- Håndter konfigurations- eller tilpasningshændelsen, og gem de nødvendige data i din kurv.
- Synkroniser efter købet ordren samt nødvendige data og filer med dit eget system til ordreudførelse.
Gå til vejledningen for dit værktøj
Indlejringsvejledningerne indeholder parametre og eksempler. postMessage-afsnittene forklarer kommunikationen med hjemmesiden, mens API-dokumentationen beskriver backendens operationer.
Viewer: grundlæggende indlejringConfigurator: grundlæggende indlejringCustomizer: grundlæggende indlejringViewer: kommunikation med hjemmesidenConfigurator: kommunikation med kurvenCustomizer: session og lagring af kundedesignAPI: synkronisering af ordrerAPI: ressourcer og projektimportAPI: filadgang
Kontrollér hele forløbet, før salget starter
Test produktet, som kunden bruger det: fra åbning af siden til designet, der vises ved ordren. Test på computer og telefon, også uden at være logget ind i administrationspanelet.
Kort tjekliste
Gennemgå hele processen efter forberedelse af ét produkt. Kopiér først derefter den afprøvede opsætning til flere katalogprodukter.
- Kontrollér aktiv Business-plan eller højere samt HTTPS på domænet med gyldigt SSL/TLS-certifikat.
- Kontrollér værktøjssidernes synlighed, projekttilknytning og den valgte indlejringsmetode.
- Vælg forskellige størrelser og farver. Sammenlign projektmuligheder med butikkens varianter og priser.
- Tilføj tekst eller grafik i Customizer, gem designet, og læg det i kurven. Kontrollér også redigering af en allerede tilføjet tilpasning.
- Kontrollér forhåndsvisning, antal og konfiguration i kurven og efter en prøveordre.
- Åbn designet ved ordren, og kontrollér de genererede trykfiler. Hvis du bruger POD, skal du også teste leverandørmapping og et kontrolleret forløb for afsendelse af opgaven.
- Kontrollér kundens bibliotek, sprog, branding og hjemmesidens funktion på telefon.