Viewer: titta på produkten
Visning av 3D-modellen och dess utseende. Passar när det viktigaste är att visa produkten från olika håll utan att erbjuda redigering av trycket.
E-handelsintegration - från design till beställning
Bädda in Alter Product på din webbplats: WordPress + WooCommerce eller API
Lägg till 3D-visning, variantkonfiguration och produktanpassning på din egen webbplats. Kunden tittar på produkten, väljer alternativ och skapar en design i din butik, medan du hanterar sortiment och beställningar i ditt eget system.
Välj tillägget för WordPress med WooCommerce installerat för att konfigurera utan egen integrationskod. Om du utvecklar en egen webbplats eller butik kopplar du de inbäddade verktygen till backend och varukorg via Public API och postMessage-händelser.
Bilderna visar det faktiska gränssnittet från inspelningar och tilläggets panel. Knappnamnen är på engelska; verktygets utseende beror på butikens konfigurering.
Två vägar till en egen butik med produktanpassning
Samma produktprojekt kan förberedas för visning, konfiguration eller redigering av trycket. Välj butiksanslutning efter webbplatsen och hur mycket utvecklingsarbete du vill göra.
Tillägg eller egen integration?
Tillägget ger färdigt stöd för WordPress och WooCommerce. Med API kan du bygga en egen anslutning till en annan plattform, en headless-applikation eller ett befintligt ordersystem.
| Område | WordPress + WooCommerce | Eget system via API |
|---|---|---|
| Komma igång | Installation av tillägget och anslutningsguide i WordPress-panelen. | Implementering av backendanslutning och inbäddning på webbplatsen. |
| Produkter och varianter | Koppling av projekt till WooCommerce-produkt och synkronisering av varianter. | Koppling av produkt- och alternativ-ID:n till data i din egen butik. |
| Varukorg och beställningar | Färdigt stöd för konfiguration, kunddesign och förhandsvisningar i WooCommerce. | Hantering av det inbäddade verktygets händelser och synkronisering av beställningar i ditt system. |
| Filer och resurser | Lokalt bibliotek, projekt och beställningsfiler på WordPress-servern. | Lagring och dataåtkomst enligt valt integrationsläge. Varianten med egen lagring kräver att du hanterar den på din sida. |
Vilket verktyg ska kunden få använda?
Välj verktyg efter vad kunden ska göra på webbplatsen. Projektet och reglerna för anpassning förbereder du i Designer i förväg.
Configurator: välj variant
Val av förberedda produktalternativ, som storlek, färg eller material. Kunden ser ändringen på modellen och skickar konfigurationen till varukorgen.
Customizer: skapa ett eget tryck
Anpassning med tillgängliga verktyg, grafik, texter och mallar. Kundens sparade design kopplas till en varukorgs- eller beställningsrad.
Designer: förbered sortimentet
Butiksägarens arbetsområde. Här förbereder du komposition, varianter, tryckområden och verktygsinställningar för kunderna. Tillgång till administrativ redigering är åtskild från användning av butiken.
WordPress + WooCommerce: från installation till färdig produkt
Alter Product är ett WordPress-tillägg. Butiksintegrationen kräver installerat och aktiverat WooCommerce. Vanlig konfigurering görs i panelen utan att bygga egen API- och varukorgshantering.
Krav: WordPress, WooCommerce, HTTPS och Business-planen
För att bädda in Alter Product på din egen webbplats behöver du en aktiv Business-prenumeration eller en högre plan som omfattar funktionen. Det gäller både WordPress- och WooCommerce-tillägget och egen API-integration. Personal FREE och Personal omfattar inte inbäddning i din butik.
För tillägget behöver du WordPress med installerat och aktiverat WooCommerce samt ett Alter Product-konto. Egen fillagring ersätter inte prenumerationen som krävs: Alter Product levererar fortfarande applikationen och godkänner att den startas.
- Kör butiken via HTTPS med ett giltigt SSL/TLS-certifikat för domänen. Det krävs för att inbäddade verktyg ska fungera korrekt på en offentlig webbplats.
- Aktivera användarvänliga WordPress-permalänkar enligt installationsanvisningen.
- Se till att webbhotellet har utrymme för modeller, grafik, projekt och beställningsfiler. Butiksbiblioteket använder din servers resurser.
Varför behövs HTTPS och ett SSL/TLS-certifikat?
Alter Product körs i en inbäddad iframe på butikssidan. Webbläsare begränsar åtkomsten till vissa funktioner som appen använder om sidan inte ger en säker kontext. HTTPS krypterar anslutningen och ett giltigt certifikat låter webbläsaren verifiera domänen.
Webbläsaren kontrollerar även sidan runt iframe. Därför räcker inte Alter Product-appens HTTPS-adress om butiken körs över HTTP. Även webbplatsen där du bäddar in verktyget måste använda HTTPS. Det följer av webbläsarnas säkerhetsregler för inbäddade applikationer.
- Aktivera ett SSL/TLS-certifikat hos webbhotellet och kontrollera att det gäller för butikens domän.
- Ställ in WordPress-webbplatsens adresser och integrationsdomänen på HTTPS. Aktivera omdirigering från HTTP till HTTPS.
- Öppna produktsidan via HTTPS och kontrollera att webbläsaren inte varnar för certifikatproblem eller resurser som laddas över HTTP.
Anslut butiken med Auto Connect
Den automatiska anslutningen guidar dig genom auktorisering av Alter Product-kontot och konfigurering av butiken. Du behöver inte överföra API-nycklar manuellt med den här metoden.
- Gå till Tillägg → Lägg till nytt i WordPress, sök efter Alter Product och installera och aktivera tillägget.
- Öppna Alter Product-panelen och välj Auto Connect. Logga in på rätt Alter Product-konto, kontrollera butiken och godkänn anslutningen.
- Gå tillbaka till WordPress. Välj en startmodell och ladda ned resurserna som behövs. Vänta tills nedladdning och beredskapskontroll är klara.
- Kontrollera verktygssidorna som skapats och visningsinställningarna och fortsätt sedan med att förbereda produkten.
Koppla projekt och synkronisera varianter
Öppna fliken Alter Product när du redigerar WooCommerce-produkten. Skapa ett nytt projekt eller välj ett befintligt och öppna sedan Designer. Ställ in tryck, tillgängliga alternativ och tryckområden för produkten.
- För en variabel produkt förbereder du attribut, som storlekar, och motsvarande WooCommerce-varianter.
- Använd Sync variants i Designer för att koppla projektalternativ till produktvarianter. Kontrollera även standardval som inte är variantattribut i WooCommerce.
- Spara projekt och produkt. Välj vilket verktyg som ska visas på sidan och hur det öppnas.
- Kontrollera resultatet på produktsidan: välj flera varianter, skapa en design och gå till varukorgen.
Ditt bibliotek på WordPress-servern
Modeller, projekt, grafik och beställningsfiler lagras på webbhotellet där WordPress körs. Lokalt tillagda resurser används i din butik och blir inte därmed poster i Alter Products offentliga bibliotek för andra butiker.
Vad lagras lokalt?
Tillägget sparar modell-, biblioteks-, projekt-, mockup- och beställningsfiler i WordPress lagringsutrymme. Data för generatorprojekt och deras revisioner sparas också i installationens databas.
Du kan lägga till egna material och importera valda resurser från Alter Product. Efter nedladdningen använder du en lokal kopia. Import, sökning efter uppdateringar och nedladdning av nya versioner är separata åtgärder.
| Plats i panelen | Vad du gör där |
|---|---|
| Resurser | Du hanterar bland annat modeller, grafik, mallar, bakgrunder, logotyper, texturer och miljöer. Sätten att lägga till resurser beror på resurstypen. |
| Modellgenerator | Du skapar lokala projekt från mallar och arbetar med modeller kopplade till generatorn. |
| Produktprojekt / Designer | Du skapar eller importerar en design, redigerar den och kopplar den till en butiksprodukt. |
| WooCommerce-beställningar | Du använder sparade kunddesigner, förhandsvisningar och filer som behövs för att genomföra beställningen. |
Lokala filer, inbäddad Alter Product-app
Resurserna lagrar du själv, medan verktygens gränssnitt laddas från Alter Product i en inbäddad iframe. Alter Product-tjänsten kontrollerar kontoåtkomst, plan och sessioner och tillhandahåller importkatalogen. Integrationen kräver anslutning till tjänsten.
Spara databasen, filkatalogen samt WordPress-nycklar och salter som behövs för att läsa tilläggets krypterade data vid säkerhetskopiering. Då kan du återställa både synlig grafik och data som behövs för fortsatt arbete.
Produktanpassning på ditt varumärkes webbplats
Inbäddningen kan ingå i en produktsida eller en separat WordPress-sida. Kunden stannar i butikens köpprocess och WooCommerce hanterar varukorg och beställning.
Produktsida, verktygssida eller block
Anpassa visningen efter butikens layout: verktyg på produktsidan, knapp till en egen sida eller inbäddning med tillgängliga block och shortcodes. Viewer, Configurator och Customizer har olika roller, så du behöver inte erbjuda alla samtidigt.
- Visa Viewer där kunden ska titta på produktmodellen.
- Använd Configurator när du säljer förberedda varianter och alternativ.
- Välj Customizer när kunden ska lägga till text, en bild eller ändra tryckets komposition.
Egna bakgrunder, logotyp och språk
Anpassa produktpresentationen efter ditt varumärke. I tillägget hanterar du lokala bakgrunder och logotyper samt utseendet på inbäddade verktyg. Tillgången till enskilda alternativ beror på planen.
- Scenbakgrund, gränssnittsfärger och förberedd projektdesign hjälper till att hålla en enhetlig stil med butiken.
- Appen och tillägget stöder 22 språk. Språket i WordPress-panelen ställs in per användare och webbplatsens språk i webbplatsinställningarna.
- Egna produktnamn, trycktexter och produktbeskrivningar förbereder du på kundernas språk. Stöd för gränssnittsspråk innebär inte automatisk översättning av butikens innehåll.
Från kunddesign till beställningsrad
Kunden väljer variant och skapar sin anpassning. Tillägget kopplar konfiguration och sparad design till varukorgsraden och därefter WooCommerce-beställningen. Tillgängliga mockuper hjälper till att identifiera det beställda trycket.
- Kunden öppnar produkten eller det kopplade verktyget och väljer alternativ.
- Vid anpassning sparar kunden designen och lägger produkten i varukorgen.
- I varukorgen kontrollerar kunden produkt, konfiguration och tillgänglig designförhandsvisning och går sedan genom WooCommerce-kassan.
- I beställningspanelen öppnar ägaren den sparade designen och förbereder genomförandet.
Beställningshantering, POD och valfri AI
Att koppla butiken till 3D-verktygen är början på processen. Från den förberedda designen kan du ladda ned filer för egen produktion eller använda tilläggets integration med en print-on-demand-leverantör.
Anslut Printify eller Printful
Konfigurera anslutningen till vald leverantör i tilläggets inställningar. Koppla sedan produkt, varianter och tryckpositioner till leverantörens sortiment, förbered filer och beställ genomförandet från WooCommerce.
- Anpassa tryckytor och filformat efter den specifika produkten och leverantören.
- Kontrollera genererade filer och beställd variant innan du skickar till produktion.
- Använd uppdatering av beställningsstatus och leveransdata i tillägget.
- Vid egen produktion laddar du ned PDF-, SVG- eller PNG-filer enligt projektets möjligheter och exportinställningar.
AI för att förbereda grafik i ägarpanelen
Du kan konfigurera en egen anslutning till en AI-leverantör och använda tillgängliga funktioner för att generera eller förbättra grafik under designarbetet. Tilläggets förfrågningar skickas från WordPress till vald leverantör och debiteras på ditt konto hos leverantören.
Inbäddningssessioner: giltighetstid och användning av gränsen
En session är en tillfällig behörighet att öppna ett visst verktyg i din butik. Den hjälper till att säkert tillgängliggöra produkter för kunder och är enheten som räknas i månadsgränsen för inbäddningssessioner. Den är inte samma sak som ett klick, en unik besökare eller en beställning.
Hur länge gäller en sessionsnyckel?
När ett inbäddat verktyg startar hämtar integrationen en kortlivad token, alltså en sessionsnyckel. Kontots permanenta åtkomstuppgifter stannar på servern. Kunden behöver inte kopiera nycklar eller logga in på ägarens Alter Product-konto.
Standardgiltigheten för en token är 15 minuter i den nuvarande implementationen. Servern kan ange en annan tid, så integrationen använder utgångstiden för den mottagna sessionen. Återanvändning av token förlänger inte tiden. Ny auktorisering efter att den löpt ut kräver en ny session.
Förbrukar en omladdning av sidan en ny session?
Det beror på verktyget och om det fortfarande har en lämplig, giltig session. Tillägget använder inte en gemensam session för alla besökare och produkter. Reglerna nedan beskriver dess nuvarande beteende.
| Situation | Vad händer med sessionen? | Påverkan på gränsen |
|---|---|---|
| Första öppning av verktyget utan passande session | Integrationen begär en ny token för verktyget och produktkontexten. | En framgångsrik utfärdning av en ny token förbrukar en session. |
| Rotera modellen, byta färg eller redigera text i ett öppet verktyg | Arbetet sker inom den startade sessionen. | Dessa åtgärder innebär inte i sig att fler token utfärdas. |
| Fullständig omladdning av sidan med Viewer eller Configurator | Tillägget hämtar vanligen en ny token när sidan laddas om. Verktygens sessionsminne bevaras inte mellan fullständiga omladdningar. | Varje ytterligare lyckad tokenutfärdning förbrukar en ny session. |
| Ladda om Customizer i samma flik | Customizer kan återanvända en sparad session om den passar butik, produkt, beställning och arbetsläge och inte är nära att löpa ut. | Återanvändning ökar inte räknaren. Om villkoren inte uppfylls behövs en ny session. |
| Utgången token, annan produkt eller ändrad arbetskontext | Ny auktorisering och en ny token kan behövas. Tillgången till webbläsarlagring påverkar också möjligheten att återanvända sessionen. | En nyutfärdad token ökar användningen av gränsen. |
Hur tar du hänsyn till sessioner i butikens kostnader och plan?
Räknaren ökar när API framgångsrikt utfärdar en ny token. Användning av en redan utfärdad, giltig token är ingen ny utfärdning. Ta därför hänsyn till verktygsstarter, omladdningar och återöppningar när du väljer plan, inte bara antalet beställningar eller besökare.
Inbäddade verktyg i samma butik delar på en månadsgräns för sessioner. Räknaren förs separat för varje butik per kalendermånad enligt UTC. Nya sessioner för inbäddad Designer och Modellgenerator i WordPress-panelen ökar också räknaren. Att bara ladda ned en tillgänglig modell via import-API öppnar ingen redigerarsession.
När gränsen är nådd vägrar systemet att utfärda fler sessioner. Detta är en användningsgräns inom prenumerationen; kontrollera aktuell paketstorlek i din plan.
- Starta verktyget där kunden faktiskt använder det. För produktlistor kan du använda vanliga bilder och färdiga mockuper.
- Undvik i en egen API-integration att skapa en ny session vid varje komponentrendering eller alternativändring. Använd en giltig session endast i rätt kontext.
- Planera sessionsgränsen separat från kostnader för POD-produktion och AI-generering, som beror på användningen av dessa externa tjänster.
Egen integration via API
Har du en egen butik, headless-applikation eller ett eget ordersystem? Du kan bygga ett eget integrationslager med Alter Product Public API och bädda in verktygen du behöver. Den här vägen kräver utvecklingsarbete.
Anslut Alter Product med din teknik
Public API använder HTTP-förfrågningar och JSON-data. Du kan därför skriva integrationen i språket och miljön där din backend körs. Du behöver inte bygga om butiken till WordPress för att bädda in Alter Products verktyg.
Nedan finns exempel på tekniker för en serveranslutning. I alla genomför du samma steg: API-auktorisering, skapande av verktygssession och koppling av produkter, varukorg och beställningar till ditt system.
JavaScript och TypeScript / Node.js
Lägg till integrationen i en Node.js-backend, till exempel med Express eller NestJS. Anropa API från servern och ge frontend de data som behövs för inbäddningen.
Python
Koppla en befintlig Python-app, till exempel Django eller FastAPI, till Alter Products produkter, sessioner och beställningar via HTTP-förfrågningar.
PHP
Använd PHP i din egen butik eller app, till exempel Laravel eller Symfony. Du kan bygga en egen API-integration oberoende av det färdiga WordPress-tillägget.
Java
Integrera verktygen med en Java-backend, till exempel Spring, och koppla projektdata till din egen produktkatalog och beställningshantering.
C# / .NET
Använd en .NET-backend, till exempel ASP.NET Core, för auktorisering, sessionsskapande och dataöverföring till befintliga butiksprocesser.
Go
Bygg anslutningen i en tjänst skriven i Go. Standardklienten för HTTP kan hantera API-förfrågningar och JSON-svar.
Ruby
Lägg till integrationen i en Ruby-app, till exempel Ruby on Rails, och använd din egen modell för produkter, varukorg och beställningshantering.
Rust
Anslut en Rust-backend med en HTTP-klient och JSON-hantering. Sessioner och köphändelser kan ingå i din tjänstearkitektur.
Frontend anpassad till din webbplats
I webbläsaren kan du använda React, Vue, Angular eller vanlig HTML och JavaScript. TypeScript passar också för att implementera kommunikationen. Sidan bäddar in en iframe, hanterar postMessage-händelser och ansluter till din backend.
Frontend ansvarar för sidans utseende och varukorgens reaktioner, backend för autentiserade anrop till Public API. I ramverk som förenar båda lagren, exempelvis Next.js, ska permanenta nycklar och sessionsskapande enbart hanteras på serversidan.
Du kan behålla egen kassa, betalningssystem, CMS och process för beställningshantering. Under implementeringen kopplar du dem till projektdata och händelser från det valda Alter Product-verktyget.
Vad tillhandahåller API och vad förbereder ditt system?
Alter Product erbjuder 3D-verktyg, projektdata och sessionsmekanismer. Din backend kopplar dem till produkter, kundkonton, varukorg och beställningshantering. Du kan skapa egna förmedlande endpoints för frontend utan att avslöja Alter Product-åtkomstuppgifter i webbläsaren.
| Lager | Uppgift |
|---|---|
| Webbplatsens frontend | Visar iframe, svarar på verktygets kommunikation och uppdaterar butikens gränssnitt. |
| Din backend | Autentiserar förfrågningar till Public API, skapar sessioner, kontrollerar kundåtkomst och sparar kopplingar till egen varukorg eller beställningar. |
| Alter Product Public API | Erbjuder funktioner för anslutning, produkter, verktygskopplingar, beställningar och åtkomst till filer och resurser. |
| Inbäddat verktyg | Visar modellen och möjliggör konfiguration eller anpassning enligt valt läge och förberett projekt. |
Från auktorisering till egen varukorg
Starta först anslutningen och en inbäddningssession för en produkt. Lägg sedan till hantering av konfiguration, designsparande och beställningar enligt det valda verktyget.
- Konfigurera API-åtkomstuppgifter och butiksdomän. Kontrollera anslutningen med en förfrågan från backend.
- Koppla butikens produkt till projektet och rätt Alter Product-verktyg.
- Bädda in iframe och hantera kommunikationsstarten. Skapa en kortlivad session på servern och överlämna den till verktyget enligt dokumentationen.
- Hantera konfigurations- eller anpassningshändelsen och spara nödvändiga data i varukorgen.
- Synkronisera efter köpet beställningen samt nödvändiga data och filer med ditt eget system för orderhantering.
Gå till anvisningen för ditt verktyg
Inbäddningsanvisningarna innehåller parametrar och exempel. postMessage-avsnitten förklarar kommunikationen med webbplatsen, och API-dokumentationen beskriver åtgärderna som backend utför.
Viewer: grundläggande inbäddningConfigurator: grundläggande inbäddningCustomizer: grundläggande inbäddningViewer: kommunikation med webbplatsenConfigurator: kommunikation med varukorgenCustomizer: session och sparande av kunddesignAPI: synkronisering av beställningarAPI: resurser och import av projektAPI: filåtkomst
Kontrollera hela flödet innan försäljningen startar
Testa produkten som en kund använder den: från att öppna sidan till designen som visas vid beställningen. Testa på dator och telefon, även utan att vara inloggad i administrationspanelen.
Kort checklista
Gå igenom hela processen efter att du förberett en produkt. Använd först därefter samma verifierade konfigurering för fler katalogprodukter.
- Kontrollera aktiv Business-plan eller högre samt HTTPS på domänen med giltigt SSL/TLS-certifikat.
- Kontrollera verktygssidornas synlighet, projektkoppling och vald inbäddningsmetod.
- Välj olika storlekar och färger. Jämför projektalternativen med butikens varianter och priser.
- Lägg till text eller grafik i Customizer, spara designen och lägg den i varukorgen. Kontrollera även redigering av en redan tillagd anpassning.
- Kontrollera förhandsvisning, antal och konfiguration i varukorgen och efter en testbeställning.
- Öppna designen från beställningen och kontrollera genererade tryckfiler. Om du använder POD, testa även leverantörsmappningen och en kontrollerad process för att skicka uppdraget.
- Kontrollera kundens bibliotek, språk, varumärkesprofil och hur webbplatsen fungerar på telefon.