Viewer: prohlédněte si produkt
Prezentace 3D modelu a jeho vzhledu. Hodí se, když je nejdůležitější ukázat produkt z různých stran bez zpřístupnění úprav potisku.
Integrace e-shopu - od návrhu k objednávce
Vložte Alter Product na svůj web: WordPress + WooCommerce nebo API
Přidejte na vlastní web 3D prezentaci, konfiguraci variant a personalizaci produktů. Zákazník si ve vašem obchodě prohlédne produkt, vybere možnosti a připraví návrh, zatímco vy spravujete nabídku a objednávky ve svém systému.
Zvolte plugin pro WordPress s nainstalovaným WooCommerce a projděte nastavením bez psaní integračního kódu. Pokud vyvíjíte vlastní web nebo obchod, propojte vložené nástroje s backendem a košíkem prostřednictvím Public API a událostí postMessage.
Ilustrace zobrazují skutečné rozhraní ze záznamů a administrace pluginu. Názvy tlačítek na záběrech jsou v angličtině; vzhled nástroje závisí na nastavení obchodu.
Dvě cesty k vlastnímu obchodu s personalizací
Stejný návrh produktu můžete připravit pro prezentaci, konfiguraci nebo úpravu potisku. Způsob propojení s obchodem zvolte podle svého webu a rozsahu programátorských prací.
Plugin, nebo vlastní integrace?
Plugin poskytuje hotovou podporu WordPressu a WooCommerce. API umožňuje vytvořit vlastní propojení s jinou platformou, headless aplikací nebo stávajícím systémem objednávek.
| Oblast | WordPress + WooCommerce | Vlastní systém přes API |
|---|---|---|
| Zprovoznění | Instalace pluginu a průvodce připojením v administraci WordPressu. | Implementace připojení na backendu a vložení na web. |
| Produkty a varianty | Přiřazení návrhu k produktu WooCommerce a synchronizace variant. | Propojení identifikátorů produktů a možností s daty vlastního obchodu. |
| Košík a objednávky | Hotová podpora konfigurace, zákaznického návrhu a náhledů ve WooCommerce. | Zpracování událostí vloženého nástroje a synchronizace objednávek ve vlastním systému. |
| Soubory a zdroje | Místní knihovna, návrhy a soubory objednávek na serveru WordPressu. | Ukládání dat a přístup k nim podle zvoleného režimu integrace. Varianta s vlastním úložištěm vyžaduje jeho obsluhu na vaší straně. |
Který nástroj zpřístupnit zákazníkovi?
Vyberte nástroj podle toho, co má zákazník na webu dělat. Návrh a pravidla personalizace připravíte předem v Designeru.
Configurator: vyberte variantu
Výběr připravených možností produktu, například velikosti, barvy nebo materiálu. Zákazník vidí změnu na modelu a předává konfiguraci do košíku.
Customizer: připravte vlastní potisk
Personalizace pomocí zpřístupněných nástrojů, grafiky, textů a šablon. Uložený návrh zákazníka se propojí s položkou košíku nebo objednávky.
Designer: připravte nabídku
Pracovní prostor majitele obchodu. Zde připravujete kompozici, varianty, oblasti potisku a nastavení nástrojů pro zákazníky. Přístup k administrátorským úpravám je oddělen od používání obchodu.
WordPress + WooCommerce: od instalace k hotovému produktu
Alter Product je plugin pro WordPress. Pro integraci s obchodem vyžaduje nainstalovaný a aktivní WooCommerce. Běžné nastavení provedete v administraci bez vytváření vlastní obsluhy API a košíku.
Požadavky: WordPress, WooCommerce, HTTPS a tarif Business
Pro vložení Alter Product na vlastní web potřebujete aktivní předplatné Business nebo vyšší tarif zahrnující tuto funkci. Platí to pro plugin WordPress + WooCommerce i vlastní integraci přes API. Tarify Personal FREE a Personal nezahrnují vložení do vašeho obchodu.
Při použití pluginu připravte WordPress s nainstalovaným a aktivním WooCommerce a účet Alter Product. Ukládání souborů na vlastním hostingu nenahrazuje požadované předplatné: Alter Product nadále poskytuje aplikaci a autorizuje její spuštění.
- Provozujte obchod přes HTTPS s platným certifikátem SSL/TLS pro jeho doménu. Je to nutné pro správnou funkci vložených nástrojů na veřejném webu.
- Zapněte přívětivé trvalé odkazy WordPressu podle instalačního návodu.
- Zajistěte na hostingu místo pro modely, grafiku, návrhy a soubory objednávek. Knihovna obchodu využívá prostředky vašeho serveru.
Proč jsou potřeba HTTPS a certifikát SSL/TLS?
Alter Product běží na webu obchodu ve vloženém okně iframe. Prohlížeče omezují přístup k některým funkcím používaným aplikací, pokud stránka neposkytuje zabezpečený kontext. HTTPS šifruje připojení a správný certifikát umožňuje prohlížeči ověřit doménu.
Prohlížeč kontroluje také stránku obklopující iframe. Samotná HTTPS adresa aplikace Alter Product proto nestačí, pokud obchod běží přes HTTP. HTTPS musí zahrnovat i vaši stránku, do které nástroj vkládáte. Vyplývá to z bezpečnostních pravidel prohlížečů pro vložené aplikace.
- Aktivujte u poskytovatele hostingu certifikát SSL/TLS a ověřte, že je platný pro doménu obchodu.
- Nastavte adresy webu WordPress i doménu integrace na HTTPS. Zapněte přesměrování z HTTP na HTTPS.
- Otevřete stránku produktu přes HTTPS a zkontrolujte, že prohlížeč nehlásí problémy s certifikátem nebo zdroji načítanými přes HTTP.
Připojte obchod pomocí Auto Connect
Automatické připojení vás provede autorizací účtu Alter Product a nastavením obchodu. Při tomto postupu nemusíte ručně přenášet klíče API.
- Ve WordPressu přejděte na Pluginy → Instalace pluginů, vyhledejte Alter Product, nainstalujte a aktivujte plugin.
- Otevřete panel Alter Product a vyberte Auto Connect. Přihlaste se ke správnému účtu Alter Product, zkontrolujte obchod a potvrďte připojení.
- Vraťte se do WordPressu. Vyberte výchozí model a stáhněte potřebné zdroje. Počkejte na dokončení stahování a kontroly připravenosti.
- Zkontrolujte vytvořené stránky nástrojů a nastavení zobrazení a poté přejděte k přípravě produktu.
Přiřaďte návrh a synchronizujte varianty
V editoru produktu WooCommerce otevřete záložku Alter Product. Vytvořte nový návrh nebo vyberte existující a poté otevřete Designer. Nastavte potisk, dostupné možnosti a tiskové oblasti tohoto produktu.
- U produktu s variantami připravte atributy, například velikosti, a odpovídající varianty WooCommerce.
- V Designeru použijte Sync variants a propojte možnosti návrhu s variantami produktu. Zkontrolujte také výchozí volby, které ve WooCommerce nejsou atributy varianty.
- Uložte návrh a produkt. Vyberte nástroj zobrazovaný na stránce a způsob jeho otevření.
- Zkontrolujte výsledek na stránce produktu: vyberte několik variant, připravte návrh a přejděte do košíku.
Vaše knihovna na serveru WordPressu
Modely, návrhy, grafiku a soubory objednávek ukládáte na hostingu, na kterém běží váš WordPress. Místně přidané zdroje slouží vašemu obchodu a nestávají se tím položkami veřejné knihovny Alter Product pro jiné obchody.
Co se ukládá místně?
Plugin ukládá soubory modelů, knihoven, návrhů, mockupů a objednávek do prostoru WordPressu. Data projektů generátoru a jejich revizí se také ukládají do databáze této instalace.
Můžete přidávat vlastní materiály a importovat vybrané zdroje z Alter Product. Po stažení používáte místní kopii. Import, kontrola aktualizací a stažení nových verzí jsou samostatné úkony.
| Místo v administraci | Co zde děláte |
|---|---|
| Zdroje | Spravujete mimo jiné modely, grafiku, šablony, pozadí, loga, textury a prostředí. Dostupné způsoby přidávání závisí na typu zdroje. |
| Generátor modelů | Vytváříte místní projekty podle šablon a pracujete s modely propojenými s generátorem. |
| Návrhy produktů / Designer | Připravujete nebo importujete design, upravujete jej a přiřazujete k produktu obchodu. |
| Objednávky WooCommerce | Používáte uložené návrhy zákazníků, náhledy a soubory potřebné k vyřízení objednávky. |
Místní soubory, vložená aplikace Alter Product
Zdroje ukládáte u sebe a rozhraní nástrojů se načítá z Alter Product ve vloženém okně iframe. Služba Alter Product kontroluje přístup účtu, tarif a relace a poskytuje katalog pro import. Integrace vyžaduje připojení k této službě.
Při zálohování uchovávejte databázi, adresář souborů a klíče i soli WordPressu potřebné ke čtení šifrovaných dat pluginu. Díky tomu můžete obnovit nejen viditelnou grafiku, ale také data nezbytná pro další práci.
Personalizace na webu vaší značky
Vložený nástroj může být součástí stránky produktu nebo samostatné stránky WordPressu. Zákazník zůstává v nákupním procesu vašeho obchodu a WooCommerce spravuje košík a objednávku.
Stránka produktu, stránka nástroje nebo blok
Přizpůsobte způsob zobrazení rozvržení obchodu: nástroj na stránce produktu, tlačítko vedoucí na vyhrazenou stránku nebo vložení pomocí dostupných bloků a shortcodů. Viewer, Configurator a Customizer plní různé role, takže zákazníkovi nemusíte zpřístupnit všechny najednou.
- Zobrazte Viewer tam, kde si má zákazník prohlédnout model produktu.
- Použijte Configurator, když prodáváte připravené varianty a možnosti.
- Vyberte Customizer, pokud má zákazník přidat nápis, obrázek nebo změnit kompozici potisku.
Vlastní pozadí, logo a jazyková verze
Přizpůsobte prezentaci produktu své značce. V pluginu spravujete místní pozadí a loga i nastavení vzhledu vložených nástrojů. Dostupnost jednotlivých možností závisí na tarifu.
- Pozadí scény, barvy rozhraní a připravený vzhled návrhu pomáhají zachovat jednotný styl obchodu.
- Aplikace a plugin podporují 22 jazykových verzí. Jazyk administrace WordPressu nastavujete pro uživatele a jazyk webu v nastavení webu.
- Vlastní názvy produktů, texty potisků a popisy nabídky připravujete v jazycích svých zákazníků. Podpora jazyka rozhraní neznamená automatický překlad obsahu obchodu.
Od zákaznického návrhu k položce objednávky
Zákazník vybere variantu a připraví personalizaci. Plugin propojí konfiguraci a uložený návrh s položkou košíku a později objednávky WooCommerce. Dostupné mockupy pomáhají rozpoznat objednaný potisk.
- Zákazník otevře produkt nebo přiřazený nástroj a vybere možnosti.
- Při personalizaci uloží návrh a přidá produkt do košíku.
- V košíku zkontroluje produkt, konfiguraci a dostupný náhled návrhu a poté projde pokladnou WooCommerce.
- Majitel v administraci objednávky otevře uložený návrh a připraví jeho realizaci.
Vyřizování objednávek, POD a volitelná AI
Propojení obchodu s 3D nástroji je začátkem procesu. Z připraveného návrhu můžete stáhnout soubory pro vlastní výrobu nebo využít integraci s poskytovatelem tisku na vyžádání dostupnou v pluginu.
Připojte Printify nebo Printful
V nastavení pluginu nakonfigurujte připojení k vybranému poskytovateli. Poté propojte produkt, varianty a umístění potisku s nabídkou poskytovatele, připravte soubory a zadejte objednávku k realizaci z WooCommerce.
- Přizpůsobte tiskové plochy a formát souborů konkrétnímu produktu a poskytovateli.
- Před odesláním do výroby zkontrolujte vygenerované soubory a variantu objednávky.
- Využívejte aktualizaci stavů objednávek a údajů o zásilkách v pluginu.
- Pokud připravujete vlastní výrobu, stáhněte soubory PDF, SVG nebo PNG podle možností návrhu a nastavení exportu.
AI pro přípravu grafiky v administraci majitele
Můžete nastavit vlastní připojení k poskytovateli AI a při práci na návrhu používat dostupné funkce pro generování nebo vylepšování grafiky. Požadavky pluginu odcházejí z WordPressu k vybranému poskytovateli a jsou účtovány na vašem účtu u tohoto poskytovatele.
Relace vložených nástrojů: doba platnosti a čerpání limitu
Relace představuje dočasné oprávnění k otevření konkrétního nástroje ve vašem obchodě. Pomáhá bezpečně zpřístupňovat produkty zákazníkům a je jednotkou započítávanou do měsíčního limitu relací vložených nástrojů. Není totéž co jedno kliknutí, unikátní návštěvník nebo objednávka.
Jak dlouho platí klíč relace?
Při spuštění vloženého nástroje získá integrace krátkodobý token, tedy klíč relace. Trvalé přístupové údaje účtu zůstávají na serveru. Zákazník nemusí kopírovat klíče ani se přihlašovat k účtu majitele v Alter Product.
Výchozí doba platnosti tokenu v současné implementaci je 15 minut. Server může určit jinou dobu, proto integrace používá čas vypršení obdržené relace. Opětovné použití tokenu tento čas neprodlužuje. Pro další autorizaci po jeho vypršení je nutná nová relace.
Spotřebuje obnovení stránky další relaci?
Záleží na nástroji a na tom, zda má stále odpovídající platnou relaci. Plugin nepoužívá jednu společnou relaci pro všechny návštěvníky a všechny produkty. Následující pravidla popisují jeho současné chování.
| Situace | Co se děje s relací? | Dopad na limit |
|---|---|---|
| První otevření nástroje bez odpovídající relace | Integrace požádá o nový token pro daný nástroj a kontext produktu. | Úspěšné vydání nového tokenu spotřebuje jednu relaci. |
| Otáčení modelu, změna barvy nebo úprava textu v otevřeném nástroji | Práce probíhá v rámci spuštěné relace. | Tyto činnosti samy o sobě neznamenají vydávání dalších tokenů. |
| Úplné obnovení stránky s Viewerem nebo Configuratorem | Plugin po opětovném načtení stránky obvykle získá nový token. Paměť relací těchto nástrojů se mezi úplnými obnoveními neuchovává. | Další úspěšné vydání tokenu spotřebuje další relaci. |
| Obnovení Customizeru na stejné kartě | Customizer může znovu použít uloženou relaci, pokud odpovídá obchodu, produktu, objednávce a pracovnímu režimu a neblíží se její vypršení. | Opětovné použití nezvyšuje počítadlo. Pokud podmínky nejsou splněny, je nutná nová relace. |
| Vypršení tokenu, jiný produkt nebo změna pracovního kontextu | Může být nutná nová autorizace a nový token. Možnost opětovného použití ovlivňuje také dostupnost úložiště prohlížeče. | Nově vydaný token zvyšuje čerpání limitu. |
Jak zohlednit relace v nákladech a tarifu obchodu?
Počítadlo roste při úspěšném vydání nového tokenu přes API. Použití již vydaného platného tokenu není dalším vydáním. Při výběru tarifu proto zohledněte spuštění nástrojů, obnovení a opětovná otevření, nejen počet objednávek nebo návštěvníků.
Nástroje vložené v rámci stejného obchodu sdílejí společný měsíční limit relací. Počítadlo se vede samostatně pro daný obchod po kalendářních měsících podle času UTC. Nové relace vloženého Designeru a Generátoru modelů v administraci WordPressu také zvyšují toto počítadlo. Samotné stažení dostupného modelu přes importní API není otevřením relace editoru.
Po dosažení limitu systém odmítne vydávat další relace. Jde o limit využití v rámci předplatného; aktuální velikost balíčku najdete ve svém tarifu.
- Spouštějte nástroj tam, kde jej zákazník skutečně používá. Pro prezentaci seznamu produktů můžete využít běžné fotografie a hotové mockupy.
- Ve vlastní integraci API nevytvářejte novou relaci při každém vykreslení komponenty nebo změně možnosti. Platnou relaci používejte pouze v jejím správném kontextu.
- Plánování limitu oddělte od nákladů na realizaci POD a generování AI, které vznikají používáním těchto externích služeb.
Vlastní integrace přes API
Máte vlastní obchod, headless aplikaci nebo vlastní systém objednávek? Můžete vytvořit vlastní integrační vrstvu využívající Public API Alter Product a vložit na web potřebné nástroje. Tento postup vyžaduje programátorskou práci.
Propojte Alter Product ve své technologii
Public API používá HTTP požadavky a data JSON. Vlastní integraci tedy můžete napsat v jazyce a prostředí, ve kterém běží váš backend. Pro vložení nástrojů Alter Product nemusíte obchod převádět na WordPress.
Níže najdete příklady technologií pro přípravu připojení na straně serveru. V každé z nich realizujete stejné kroky: autorizaci API, vytvoření relace nástroje a propojení produktů, košíku a objednávek s vlastním systémem.
JavaScript a TypeScript / Node.js
Přidejte integraci do backendu v Node.js, například s Express nebo NestJS. Volejte API ze serveru a frontendu poskytujte data potřebná k vložení nástroje.
Python
Propojte stávající aplikaci Python, například Django nebo FastAPI, s produkty, relacemi a objednávkami Alter Product pomocí HTTP požadavků.
PHP
Použijte PHP ve vlastním obchodě nebo aplikaci, například Laravel či Symfony. Můžete připravit vlastní integraci API nezávisle na hotovém pluginu WordPress.
Java
Integrujte nástroje s backendem Java, například Spring, a propojte data návrhů s vlastním katalogem produktů a vyřizováním objednávek.
C# / .NET
Použijte backend .NET, například ASP.NET Core, k autorizaci, vytváření relací a předávání dat do stávajících procesů obchodu.
Go
Připravte připojení ve službě napsané v Go. Standardní HTTP klient umožňuje zpracovávat požadavky API a odpovědi JSON.
Ruby
Přidejte integraci do aplikace Ruby, například Ruby on Rails, a využijte vlastní model produktů, košíku a vyřizování objednávek.
Rust
Propojte backend Rust pomocí HTTP klienta a zpracování JSON. Relace a nákupní události můžete začlenit do své architektury služeb.
Frontend přizpůsobený vašemu webu
V prohlížeči můžete použít React, Vue, Angular nebo běžné HTML a JavaScript. TypeScript je také vhodný pro implementaci komunikace. Stránka vkládá iframe, zpracovává události postMessage a připojuje se k vašemu backendu.
Frontend zajišťuje vzhled stránky a reakce košíku, backend pak autentizovaná volání Public API. U frameworků kombinujících obě vrstvy, například Next.js, umístěte obsluhu trvalých klíčů a vytváření relací výhradně do serverové části.
Můžete zachovat vlastní pokladnu, platební systém, CMS i proces vyřizování objednávek. V rámci implementace tyto prvky propojíte s daty návrhu a událostmi vybraného nástroje Alter Product.
Co poskytuje API a co připravuje váš systém?
Alter Product poskytuje 3D nástroje, data návrhů a mechanismy relací. Váš backend je propojuje s produkty, zákaznickými účty, košíkem a vyřizováním objednávek. Můžete vytvořit vlastní zprostředkující endpointy pro svůj frontend bez zveřejnění přístupových údajů Alter Product v prohlížeči.
| Vrstva | Úkol |
|---|---|
| Frontend vašeho webu | Zobrazuje iframe, reaguje na komunikaci nástroje a aktualizuje rozhraní obchodu. |
| Váš backend | Ověřuje požadavky na Public API, vytváří relace, kontroluje přístup zákazníka a ukládá vazby na vlastní košík nebo objednávky. |
| Public API Alter Product | Poskytuje funkce připojení, produktů, vazeb na nástroje, objednávek a přístupu k souborům a zdrojům. |
| Vložený nástroj | Zobrazuje model a umožňuje konfiguraci nebo personalizaci podle zvoleného režimu a připraveného návrhu. |
Od autorizace k vlastnímu košíku
Nejprve zprovozněte připojení a relaci vloženého nástroje pro jeden produkt. Poté přidejte obsluhu konfigurace, ukládání návrhu a objednávek podle vybraného nástroje.
- Nastavte přístupové údaje API a doménu obchodu. Ověřte připojení požadavkem provedeným na backendu.
- Propojte produkt svého obchodu s návrhem a příslušným nástrojem Alter Product.
- Vložte iframe a zpracujte zahájení komunikace. Vytvořte krátkodobou relaci na straně serveru a předejte ji nástroji podle dokumentace.
- Zpracujte událost konfigurace nebo personalizace a uložte potřebná data do svého košíku.
- Po nákupu synchronizujte objednávku i požadovaná data a soubory s vlastním systémem pro vyřizování objednávek.
Přejděte k návodu pro svůj nástroj
V návodech k vložení najdete parametry a příklady. Kapitoly postMessage vysvětlují komunikaci se stránkou a dokumentace API popisuje operace prováděné backendem.
Před zahájením prodeje ověřte celý postup
Testujte produkt tak, jak jej používá zákazník: od otevření stránky až po návrh viditelný u objednávky. Proveďte test na počítači i telefonu, také bez přihlášení do administrace.
Stručný kontrolní seznam
Po přípravě jednoho produktu projděte celý proces. Teprve potom použijte ověřený způsob nastavení pro další položky katalogu.
- Ověřte aktivní tarif Business nebo vyšší a fungování domény přes HTTPS s platným certifikátem SSL/TLS.
- Zkontrolujte viditelnost stránek nástrojů, přiřazení návrhu a zvolený způsob vložení.
- Vyberte různé velikosti a barvy. Porovnejte možnosti návrhu s variantami a cenami v obchodě.
- V Customizeru přidejte text nebo grafiku, uložte návrh a přidejte jej do košíku. Ověřte také úpravu již přidané personalizace.
- Zkontrolujte náhled, množství a konfiguraci v košíku i po vytvoření zkušební objednávky.
- Otevřete návrh u objednávky a zkontrolujte vygenerované tiskové soubory. Pokud používáte POD, otestujte také mapování poskytovatele a kontrolovaný proces odeslání zakázky.
- Zkontrolujte knihovnu dostupnou zákazníkovi, jazyk, branding a chování stránky na telefonu.