Viewer: obejrzyj produkt
Prezentacja modelu 3D i jego wyglądu. Przydaje się, gdy najważniejsze jest pokazanie produktu z różnych stron bez udostępniania edycji nadruku.
Integracja e-commerce - od projektu do zamówienia
Osadź Alter Product na swojej stronie: WordPress + WooCommerce lub API
Dodaj prezentację 3D, konfigurację wariantów i personalizację produktów do własnej strony. Klient ogląda produkt, wybiera opcje i przygotowuje projekt w Twoim sklepie, a Ty zarządzasz ofertą oraz zamówieniami w swoim systemie.
Wybierz wtyczkę dla WordPressa z zainstalowanym WooCommerce, aby przejść przez konfigurację bez pisania kodu integracji. Jeśli rozwijasz własną stronę lub sklep, połącz osadzone narzędzia z backendem i koszykiem przez Public API oraz zdarzenia postMessage.
Ilustracje przedstawiają rzeczywisty interfejs z nagrań i panelu wtyczki. Nazwy przycisków na ujęciach są po angielsku; wygląd narzędzia zależy od konfiguracji sklepu.
Dwie drogi do własnego sklepu z personalizacją
Ten sam projekt produktu możesz przygotować do prezentacji, konfiguracji lub edycji nadruku. Sposób połączenia ze sklepem dobierasz do swojej strony i zakresu prac programistycznych.
Wtyczka czy własna integracja?
Wtyczka zapewnia gotową obsługę WordPressa i WooCommerce. API pozwala zbudować własne połączenie z inną platformą, aplikacją headless lub istniejącym systemem zamówień.
| Obszar | WordPress + WooCommerce | Własny system przez API |
|---|---|---|
| Uruchomienie | Instalacja wtyczki i kreator połączenia w panelu WordPressa. | Implementacja połączenia na backendzie i osadzenia na stronie. |
| Produkty i warianty | Przypisanie projektu do produktu WooCommerce i synchronizacja wariantów. | Powiązanie identyfikatorów produktów i opcji z danymi własnego sklepu. |
| Koszyk i zamówienia | Gotowa obsługa konfiguracji, projektu klienta i podglądów w WooCommerce. | Obsługa zdarzeń osadzonego narzędzia oraz synchronizacji zamówień w swoim systemie. |
| Pliki i zasoby | Lokalna biblioteka, projekty i pliki zamówień na serwerze WordPressa. | Przechowywanie i dostęp do danych zgodnie z wybranym trybem integracji. Wariant z własnym storage wymaga jego obsługi po Twojej stronie. |
Które narzędzie udostępnić klientowi?
Dobierz narzędzie do tego, co klient ma zrobić na stronie. Projekt i zasady personalizacji przygotowujesz wcześniej w Designerze.
Configurator: wybierz wariant
Wybór przygotowanych opcji produktu, np. rozmiaru, koloru lub materiału. Klient widzi zmianę na modelu i przekazuje konfigurację do koszyka.
Customizer: przygotuj własny nadruk
Personalizacja z użyciem udostępnionych narzędzi, grafik, tekstów i szablonów. Zapisany projekt klienta zostaje powiązany z pozycją koszyka lub zamówienia.
Designer: przygotuj ofertę
Obszar pracy właściciela sklepu. Tutaj przygotowujesz kompozycję, warianty, obszary nadruku i ustawienia narzędzi dla klientów. Dostęp do administracyjnej edycji jest oddzielony od korzystania ze sklepu.
WordPress + WooCommerce: od instalacji do gotowego produktu
Alter Product jest wtyczką do WordPressa. Do integracji sklepowej wymaga zainstalowanego i aktywnego WooCommerce. Typową konfigurację wykonujesz w panelu, bez tworzenia własnej obsługi API i koszyka.
Wymagania: WordPress, WooCommerce, HTTPS i plan Business
Do osadzania Alter Product na własnej stronie potrzebujesz aktywnej subskrypcji Business lub wyższego planu obejmującego tę funkcję. Dotyczy to zarówno wtyczki WordPress + WooCommerce, jak i własnej integracji przez API. Plany Personal FREE i Personal nie obejmują osadzania w Twoim sklepie.
Przy ścieżce z wtyczką przygotuj WordPress z zainstalowanym i aktywnym WooCommerce oraz konto Alter Product. Przechowywanie plików na własnym hostingu nie zastępuje wymaganej subskrypcji: Alter Product nadal dostarcza aplikację i autoryzuje jej uruchamianie.
- Uruchom sklep przez HTTPS z ważnym certyfikatem SSL/TLS dla jego domeny. Jest to wymagane do prawidłowego działania osadzonych narzędzi na publicznej stronie.
- Włącz przyjazne bezpośrednie odnośniki WordPressa zgodnie z instrukcją instalacji.
- Zapewnij na hostingu miejsce na modele, grafiki, projekty i pliki zamówień. Biblioteka sklepu korzysta z zasobów Twojego serwera.
Dlaczego potrzebny jest HTTPS i certyfikat SSL/TLS?
Alter Product działa na stronie sklepu w osadzonym oknie iframe. Przeglądarki ograniczają dostęp do części funkcji używanych przez aplikację, jeśli strona nie zapewnia bezpiecznego kontekstu. HTTPS szyfruje połączenie, a prawidłowy certyfikat pozwala przeglądarce zweryfikować domenę.
Przeglądarka sprawdza również stronę otaczającą iframe. Dlatego sam adres HTTPS aplikacji Alter Product nie wystarczy, gdy sklep działa przez HTTP. HTTPS musi obejmować również Twoją stronę, na której osadzasz narzędzie. Wynika to z zasad bezpieczeństwa przeglądarek dla osadzonych aplikacji.
- Włącz certyfikat SSL/TLS u swojego dostawcy hostingu i sprawdź, czy jest ważny dla domeny sklepu.
- Ustaw adresy witryny WordPress oraz domenę integracji na HTTPS. Włącz przekierowanie z HTTP na HTTPS.
- Otwórz stronę produktu przez HTTPS i sprawdź, czy przeglądarka nie zgłasza problemów z certyfikatem lub zasobami ładowanymi przez HTTP.
Połącz sklep przez Auto Connect
Automatyczne połączenie prowadzi przez autoryzację konta Alter Product i konfigurację sklepu. Nie musisz ręcznie przenosić kluczy API przy tej ścieżce.
- W WordPressie przejdź do Wtyczki → Dodaj nową, wyszukaj Alter Product, zainstaluj i aktywuj wtyczkę.
- Otwórz panel Alter Product i wybierz Auto Connect. Zaloguj się na właściwe konto Alter Product, sprawdź sklep i zatwierdź połączenie.
- Wróć do WordPressa. Wybierz model startowy i pobierz wymagane zasoby. Poczekaj na zakończenie pobierania oraz kontroli gotowości.
- Sprawdź utworzone strony narzędzi i ustawienia wyświetlania, a następnie przejdź do przygotowania produktu.
Przypisz projekt i zsynchronizuj warianty
W edycji produktu WooCommerce otwórz zakładkę Alter Product. Utwórz nowy projekt albo wybierz istniejący, a następnie otwórz Designer. Ustaw nadruk, dostępne opcje i obszary druku dla tego produktu.
- Przy produkcie wariantowym przygotuj atrybuty, np. rozmiary, oraz odpowiednie warianty WooCommerce.
- W Designerze użyj Sync variants, aby powiązać opcje projektu z wariantami produktu. Sprawdź także domyślne wybory, które nie są atrybutami wariantu w WooCommerce.
- Zapisz projekt i produkt. Wybierz narzędzie wyświetlane na stronie oraz sposób jego otwierania.
- Sprawdź rezultat na stronie produktu: wybierz kilka wariantów, przygotuj projekt i przejdź do koszyka.
Twoja biblioteka na serwerze WordPressa
Modele, projekty, grafiki i pliki zamówień przechowujesz na hostingu, na którym działa Twój WordPress. Zasoby dodane lokalnie służą Twojemu sklepowi i nie stają się przez to pozycjami publicznej biblioteki Alter Product dla innych sklepów.
Co jest przechowywane lokalnie?
Wtyczka zapisuje pliki modeli, bibliotek, projektów, mockupów i zamówień w przestrzeni WordPressa. Dane projektów generatora i ich rewizji są również zapisywane w bazie danych tej instalacji.
Możesz dodawać własne materiały i importować wybrane zasoby z Alter Product. Po pobraniu korzystasz z lokalnej kopii. Import, sprawdzanie aktualizacji i pobranie nowych wersji są osobnymi działaniami.
| Miejsce w panelu | Co tam robisz |
|---|---|
| Zasoby | Zarządzasz m.in. modelami, grafikami, szablonami, tłami, logotypami, teksturami i środowiskami. Dostępne sposoby dodawania zależą od rodzaju zasobu. |
| Generator modeli | Tworzysz lokalne projekty na podstawie szablonów i pracujesz z modelami powiązanymi z generatorem. |
| Projekty produktów / Designer | Przygotowujesz lub importujesz design, edytujesz go i przypisujesz do produktu sklepu. |
| Zamówienia WooCommerce | Korzystasz z zapisanych projektów klientów, podglądów i plików potrzebnych do realizacji zamówienia. |
Lokalne pliki, osadzona aplikacja Alter Product
Zasoby przechowujesz u siebie, a interfejs narzędzi jest ładowany z Alter Product w osadzonym oknie iframe. Usługa Alter Product sprawdza dostęp konta, plan i sesje oraz dostarcza katalog do importu. Integracja wymaga połączenia z tą usługą.
Przy kopiach zapasowych zachowuj bazę danych, katalog plików oraz klucze i sole WordPressa potrzebne do odczytu szyfrowanych danych wtyczki. Dzięki temu możesz odtworzyć nie tylko widoczne grafiki, lecz także dane wymagane do dalszej pracy.
Personalizacja na stronie Twojej marki
Osadzenie może być częścią karty produktu lub osobnej strony WordPressa. Klient pozostaje w procesie zakupowym Twojego sklepu, a WooCommerce obsługuje koszyk i zamówienie.
Karta produktu, strona narzędzia lub blok
Dobierz sposób wyświetlania do układu sklepu: narzędzie na stronie produktu, przycisk prowadzący do dedykowanej strony albo osadzenie przez dostępne bloki i shortcode. Viewer, Configurator i Customizer pełnią różne role, więc nie musisz udostępniać klientowi wszystkich naraz.
- Pokaż Viewer tam, gdzie klient ma obejrzeć model produktu.
- Użyj Configuratora, gdy sprzedajesz przygotowane warianty i opcje.
- Wybierz Customizer, gdy klient ma dodać napis, obraz lub zmienić kompozycję nadruku.
Własne tła, logo i wersja językowa
Dopasuj prezentację produktu do swojej marki. We wtyczce zarządzasz lokalnymi tłami i logotypami oraz ustawieniami wyglądu osadzonych narzędzi. Dostępność poszczególnych opcji zależy od planu.
- Tło sceny, kolory interfejsu i przygotowany wygląd projektu pomagają zachować spójność ze sklepem.
- Aplikacja i wtyczka obsługują 22 wersje językowe. Język panelu WordPressa ustawiasz dla użytkownika, a język strony w ustawieniach witryny.
- Własne nazwy produktów, treść nadruków i opisy oferty przygotowujesz w językach swoich klientów. Obsługa języka interfejsu nie oznacza automatycznego tłumaczenia treści sklepu.
Od projektu klienta do pozycji zamówienia
Klient wybiera wariant i przygotowuje personalizację. Wtyczka wiąże konfigurację oraz zapisany projekt z pozycją koszyka, a później zamówienia WooCommerce. Dostępne mockupy pomagają rozpoznać zamówiony nadruk.
- Klient otwiera produkt lub przypisane narzędzie i wybiera opcje.
- Przy personalizacji zapisuje projekt i dodaje produkt do koszyka.
- W koszyku sprawdza produkt, konfigurację i dostępny podgląd projektu, a następnie przechodzi przez checkout WooCommerce.
- W panelu zamówienia właściciel otwiera zapisany projekt i przygotowuje jego realizację.
Realizacja zamówień, POD i opcjonalne AI
Połączenie sklepu z narzędziami 3D to początek procesu. Z przygotowanego projektu możesz pobrać pliki do własnej produkcji albo skorzystać z dostępnej we wtyczce integracji z dostawcą druku na żądanie.
Połącz Printify lub Printful
W ustawieniach wtyczki skonfiguruj połączenie z wybranym dostawcą. Następnie powiąż produkt, warianty i miejsca nadruku z ofertą dostawcy, przygotuj pliki i zleć realizację zamówienia z WooCommerce.
- Dopasuj powierzchnie nadruku i format plików do konkretnego produktu oraz dostawcy.
- Sprawdź wygenerowane pliki i wariant zamówienia przed wysłaniem do produkcji.
- Korzystaj z odświeżania statusów zamówień i danych przesyłek we wtyczce.
- Jeśli przygotowujesz własną produkcję, pobierz pliki PDF, SVG lub PNG zgodnie z możliwościami projektu i ustawieniami eksportu.
AI do przygotowania grafik w panelu właściciela
Możesz skonfigurować własne połączenie z dostawcą AI i używać dostępnych funkcji generowania lub ulepszania grafiki podczas pracy nad projektem. Żądania z wtyczki wychodzą z WordPressa do wybranego dostawcy i są rozliczane na Twoim koncie u tego dostawcy.
Sesje osadzania: czas ważności i wykorzystanie limitu
Sesja to czasowe uprawnienie do otwarcia konkretnego narzędzia w Twoim sklepie. Pomaga bezpiecznie udostępniać produkty klientom i jest jednostką uwzględnianą w miesięcznym limicie sesji osadzania. Nie jest tym samym co pojedyncze kliknięcie, unikalny odwiedzający ani zamówienie.
Jak długo działa klucz sesji?
Przy uruchomieniu osadzonego narzędzia integracja uzyskuje krótkotrwały token, czyli klucz sesji. Stałe dane dostępowe konta pozostają po stronie serwera. Klient nie musi kopiować kluczy ani logować się do konta właściciela Alter Product.
Domyślny czas ważności tokenu w obecnej implementacji wynosi 15 minut. Serwer może określić inny czas, dlatego integracja korzysta z terminu ważności otrzymanej sesji. Ponowne użycie tokenu nie przedłuża tego terminu. Do kolejnej autoryzacji po jego wygaśnięciu potrzebna jest nowa sesja.
Czy odświeżenie strony zużywa kolejną sesję?
Zależy to od narzędzia i od tego, czy ma ono nadal odpowiednią, ważną sesję. Wtyczka nie stosuje jednej wspólnej sesji dla wszystkich odwiedzających i wszystkich produktów. Poniższe zasady opisują jej obecne działanie.
| Sytuacja | Co dzieje się z sesją? | Wpływ na limit |
|---|---|---|
| Pierwsze otwarcie narzędzia bez pasującej sesji | Integracja prosi o nowy token dla danego narzędzia i kontekstu produktu. | Pomyślne wydanie nowego tokenu zużywa jedną sesję. |
| Obracanie modelu, zmiana koloru lub edycja tekstu w otwartym narzędziu | Praca odbywa się w ramach uruchomionej sesji. | Te czynności same w sobie nie oznaczają wydawania kolejnych tokenów. |
| Pełne odświeżenie strony z Viewerem lub Configuratorem | Wtyczka zwykle uzyskuje nowy token po ponownym załadowaniu strony. Pamięć sesji tych narzędzi nie jest zachowywana między pełnymi odświeżeniami. | Kolejne pomyślne wydanie tokenu zużywa kolejną sesję. |
| Odświeżenie Customizera w tej samej karcie | Customizer może ponownie użyć zachowanej sesji, jeśli pasuje do sklepu, produktu, zamówienia i trybu pracy oraz nie zbliża się do wygaśnięcia. | Ponowne użycie nie zwiększa licznika. Jeśli warunki nie są spełnione, potrzebna jest nowa sesja. |
| Wygaśnięcie tokenu, inny produkt lub zmiana kontekstu pracy | Potrzebna może być nowa autoryzacja i nowy token. Dostępność pamięci przeglądarki także wpływa na możliwość ponownego użycia. | Nowo wydany token zwiększa wykorzystanie limitu. |
Jak uwzględnić sesje w kosztach i planie sklepu?
Licznik rośnie przy pomyślnym wydaniu nowego tokenu przez API. Użycie już wydanego, ważnego tokenu nie jest kolejnym wydaniem. Dlatego przy wyborze planu uwzględnij uruchomienia narzędzi, odświeżenia i ponowne otwarcia, a nie tylko liczbę zamówień lub odwiedzających.
Narzędzia osadzone w ramach tego samego sklepu korzystają ze wspólnego miesięcznego limitu sesji. Licznik jest prowadzony osobno dla danego sklepu, w miesiącach kalendarzowych według czasu UTC. Nowe sesje osadzonego Designera i Generatora modeli w panelu WordPressa również zwiększają ten licznik. Samo pobranie dostępnego modelu przez API importu nie jest otwarciem sesji edytora.
Po osiągnięciu limitu system odmawia wydawania kolejnych sesji. Jest to limit wykorzystania w ramach subskrypcji; bieżącą wielkość pakietu sprawdź w swoim planie.
- Uruchamiaj narzędzie tam, gdzie klient rzeczywiście z niego korzysta. Do prezentacji listy produktów możesz używać zwykłych zdjęć i gotowych mockupów.
- We własnej integracji API unikaj tworzenia nowej sesji przy każdym renderowaniu komponentu lub zmianie opcji. Wykorzystuj ważną sesję tylko w jej właściwym kontekście.
- Planowanie limitu oddziel od kosztów realizacji POD i generowania AI, które wynikają z korzystania z tych zewnętrznych usług.
Własna integracja przez API
Masz autorski sklep, aplikację headless albo własny system zamówień? Możesz zbudować własną warstwę integracji korzystającą z Public API Alter Product i osadzić potrzebne narzędzia na stronie. Ta ścieżka wymaga pracy programistycznej.
Połącz Alter Product w swojej technologii
Public API korzysta z żądań HTTP i danych JSON. Możesz więc napisać własną integrację w języku i środowisku, w którym działa Twój backend. Nie musisz przebudowywać sklepu na WordPressa, aby osadzić narzędzia Alter Product.
Poniżej znajdziesz przykładowe technologie do przygotowania połączenia po stronie serwera. W każdej z nich realizujesz te same etapy: autoryzację API, utworzenie sesji narzędzia oraz powiązanie produktów, koszyka i zamówień ze swoim systemem.
JavaScript i TypeScript / Node.js
Dodaj integrację do backendu w Node.js, np. z Express lub NestJS. Wywołuj API z serwera, a frontendowi udostępniaj dane potrzebne do osadzenia narzędzia.
Python
Połącz istniejącą aplikację Python, np. Django lub FastAPI, z produktami, sesjami i zamówieniami Alter Product przez żądania HTTP.
PHP
Wykorzystaj PHP w autorskim sklepie lub aplikacji, np. Laravel albo Symfony. Możesz przygotować własną integrację API niezależnie od gotowej wtyczki WordPress.
Java
Zintegruj narzędzia z backendem Java, np. Spring, i powiąż dane projektów z własnym katalogiem produktów oraz obsługą zamówień.
C# / .NET
Użyj backendu .NET, np. ASP.NET Core, do autoryzacji, tworzenia sesji i przekazywania danych do istniejących procesów sklepu.
Go
Przygotuj połączenie w usłudze napisanej w Go. Standardowy klient HTTP pozwala obsłużyć żądania API i odpowiedzi JSON.
Ruby
Dodaj integrację do aplikacji Ruby, np. Ruby on Rails, i wykorzystaj własny model produktów, koszyka oraz realizacji zamówień.
Rust
Połącz backend Rust przez klienta HTTP i obsługę JSON. Sesje oraz zdarzenia zakupowe możesz włączyć do swojej architektury usług.
Frontend dopasowany do Twojej strony
Po stronie przeglądarki możesz użyć Reacta, Vue, Angulara albo zwykłego HTML i JavaScript. TypeScript również sprawdzi się przy implementacji komunikacji. Strona osadza iframe, obsługuje zdarzenia postMessage i łączy się z Twoim backendem.
Frontend odpowiada za wygląd strony i reakcje koszyka, a backend za uwierzytelnione wywołania Public API. Przy frameworkach łączących obie warstwy, np. Next.js, umieść obsługę stałych kluczy i tworzenie sesji wyłącznie w części serwerowej.
Możesz zachować własny checkout, system płatności, CMS i proces realizacji zamówień. W ramach wdrożenia łączysz te elementy z danymi projektu i zdarzeniami wybranego narzędzia Alter Product.
Co zapewnia API, a co przygotowuje Twój system?
Alter Product udostępnia narzędzia 3D, dane projektów i mechanizmy sesji. Twój backend łączy je z produktami, kontami klientów, koszykiem i obsługą zamówień. Możesz stworzyć własne endpointy pośredniczące dla swojego frontendu, bez ujawniania danych dostępowych Alter Product w przeglądarce.
| Warstwa | Zadanie |
|---|---|
| Frontend Twojej strony | Wyświetla iframe, odpowiada na komunikację narzędzia i aktualizuje interfejs sklepu. |
| Twój backend | Uwierzytelnia żądania do Public API, tworzy sesje, kontroluje dostęp klienta i zapisuje powiązania z własnym koszykiem lub zamówieniami. |
| Public API Alter Product | Udostępnia funkcje połączenia, produktów, powiązań narzędzi, zamówień oraz dostępu do plików i zasobów. |
| Osadzone narzędzie | Pokazuje model i umożliwia konfigurację lub personalizację zgodnie z wybranym trybem i przygotowanym projektem. |
Od autoryzacji do własnego koszyka
Najpierw uruchom połączenie i sesję osadzenia dla jednego produktu. Następnie dodaj obsługę konfiguracji, zapisu projektu i zamówień zgodnie z wybranym narzędziem.
- Skonfiguruj dane dostępowe API i domenę sklepu. Sprawdź połączenie żądaniem wykonywanym na backendzie.
- Powiąż produkt swojego sklepu z projektem i właściwym narzędziem Alter Product.
- Osadź iframe i obsłuż rozpoczęcie komunikacji. Twórz krótkotrwałą sesję po stronie serwera i przekaż ją narzędziu zgodnie z dokumentacją.
- Obsłuż zdarzenie konfiguracji lub personalizacji i zapisz potrzebne dane w swoim koszyku.
- Po zakupie synchronizuj zamówienie oraz wymagane dane i pliki z własnym systemem realizacji.
Przejdź do instrukcji dla swojego narzędzia
W instrukcjach osadzania znajdziesz parametry i przykłady. Rozdziały postMessage wyjaśniają komunikację ze stroną, a dokumentacja API opisuje operacje wykonywane przez backend.
Sprawdź pełną ścieżkę przed uruchomieniem sprzedaży
Testuj produkt tak, jak korzysta z niego klient: od otwarcia strony do projektu widocznego przy zamówieniu. Przeprowadź próbę na komputerze i telefonie, również bez zalogowania do panelu administracyjnego.
Krótka lista kontrolna
Po przygotowaniu jednego produktu przejdź przez cały proces. Dopiero potem powiel sprawdzony sposób konfiguracji dla kolejnych pozycji katalogu.
- Sprawdź aktywny plan Business lub wyższy oraz działanie domeny przez HTTPS z prawidłowym certyfikatem SSL/TLS.
- Sprawdź widoczność stron narzędzi, przypisanie projektu i wybrany sposób osadzenia.
- Wybierz różne rozmiary i kolory. Porównaj opcje projektu z wariantami oraz cenami w sklepie.
- W Customizerze dodaj tekst lub grafikę, zapisz projekt i dodaj go do koszyka. Sprawdź także edycję już dodanej personalizacji.
- Zweryfikuj podgląd, ilość i konfigurację w koszyku oraz po złożeniu próbnego zamówienia.
- Otwórz projekt przy zamówieniu i sprawdź wygenerowane pliki do druku. Jeśli korzystasz z POD, przetestuj również mapowanie dostawcy i kontrolowany proces wysyłki zlecenia.
- Sprawdź bibliotekę dostępną klientowi, język, branding i zachowanie strony na telefonie.