Dla sklepu KwiatyDonice.pl zbudowaliśmy kreator, w którym pracownik dodaje produkt do WooCommerce z telefonu w siedmiu krokach: skanuje kod EAN, a kreator pobiera dane z Subiektu, wycina tło ze zdjęć i przygotowuje opis z pomocą modeli Claude i Gemini. Klient chciał, żeby dodanie produktu zajmowało najwyżej kilka minut, żeby było mniej błędów i żeby zrobiła to osoba, która nigdy nie pracowała w panelu WooCommerce. Opisujemy, jak kreator działa, co w nim robi AI, a co zwykły kod, i co sprawiło najwięcej kłopotu.
Po co sklepowi kreator produktu, skoro WooCommerce ma panel?
Panel WooCommerce zakłada, że ktoś siedzi przy komputerze i wie, gdzie co wpisać: cenę, stawkę VAT, wymiary paczki, atrybuty, kategorię główną dla SEO, produkty powiązane. W KwiatyDonice.pl towar przyjeżdża do magazynu i salonu, a zdjęcia robi się przy nim, więc przepisywanie danych do komputera dokładało pracy.
Kreator działa na pełnym ekranie w panelu WordPressa i instaluje się na telefonie jak aplikacja (PWA). Pracownik otwiera go krótkim adresem w sklepie i jeśli nie jest zalogowany, trafia najpierw do logowania. Interfejs napisaliśmy w Alpine.js, a cały moduł ma ponad 9 tys. linii kodu PHP i JavaScript.
Dodawanie produktów zajmuje Wam za dużo czasu? Budujemy kreatory i narzędzia dla obsługi sklepów WooCommerce, połączone z ERP i modelami AI. Opisz, jak dziś dodajecie produkty, a zaproponujemy, które kroki da się skrócić. Sklep WooCommerce →
Jak wygląda dodanie produktu krok po kroku?
- Kanał. Produkt dla klientów detalicznych, dla hurtu albo dla obu grup.
- Identyfikacja. Skan EAN albo wpisanie SKU. Kreator szuka towaru w Subiekcie i w sklepie, pokazuje cenę netto, stawkę VAT i wyliczoną cenę brutto.
- Kategoria i atrybuty. AI sugeruje kategorię, pracownik wybiera markę i atrybuty, a kreator dobiera produkt-wzór, domyślnie najlepiej sprzedający się w tej kategorii.
- Zdjęcia. Z aparatu albo z sieci, z przypisaniem roli (miniatura, z miarką, detal), wycinaniem tła, kadrowaniem i korektą maską malowaną palcem.
- Wysyłka. Gabaryty, waga i klasa wysyłki: paczkomat InPost do gabarytu C, kurier albo paleta.
- Opis. Kopia opisu wzoru, dopasowana przez AI do nowego produktu, plus produkty powiązane.
- Podsumowanie i publikacja.
Na drugim kroku kreator rozróżnia cztery sytuacje. Produkt jest w sklepie i ma stan, więc go edytujemy. Jest w sklepie ze stanem zero, więc nadpisujemy go z zachowaniem adresu URL i opinii. Nie ma go wcale, więc tworzymy nowy albo produkt z dropshippingu. Albo nie zgadza się SKU, ale EAN pasuje do istniejącego produktu. Druga ścieżka chroni pozycje w Google: stary adres z opiniami dostaje nową treść zamiast duplikatu.
Jak zeskanować kod EAN telefonem w przeglądarce?
Skaner wymagał najwięcej iteracji. Przeglądarki mają wbudowane API BarcodeDetector, ale w Safari na iOS zwraca ono pustą listę dla kodów EAN, choć formalnie jest dostępne. Biblioteka ZXing gubiła kody i myliła cyfry. Ostatecznie na iPhonie skanuje ZBar skompilowany do WebAssembly, a na Androidzie i w Chrome na komputerze natywne API.
Dwie decyzje poprawiły pewność odczytu. Kod jest przyjmowany dopiero po dwóch zgodnych odczytach, a pusta klatka nie zeruje licznika, bo ZBar co chwilę gubi kod na pojedynczych ramkach. Skanowanie chodzi w pętli co 100 ms zamiast przy każdym odświeżeniu ekranu, bo to drugie obciążało procesor telefonu. Gdy pracownik wpisze kod ręcznie, kreator rozpoznaje EAN po długości i sumie kontrolnej GS1, więc nie trafi on przez pomyłkę do pola SKU.
Skąd kreator bierze dane o produkcie?
Pierwszym źródłem jest Subiekt. Kreator szuka po symbolu, a jeśli nie znajdzie, po EAN. API Subiektu nie zwraca nazwy produktu, więc kreator ustala ją z rodziny SKU: bierze prefiks symbolu i najczęstszą nazwę rodzeństwa w sklepie. Markę podpowiada po prefiksie EAN, jeśli większość produktów z tym prefiksem ma tę samą markę.
Gdy towar jest nowy, kreator szuka go w sieci. Serper zwraca strony sklepów dla nazwy albo kodu EAN, a Claude Sonnet 4.6 wchodzi na trzy pierwsze przez narzędzie web_fetch i wyciąga nazwę, zdjęcia i wymiary. Wybraliśmy web_fetch zamiast web_search, bo przy nim płaci się tylko za tokeny, a konkretny adres z wyników jest pewniejszy niż zgadywanie. Wynik trzymamy w pamięci podręcznej przez 12 godzin. Zdjęcia, których krótszy bok ma mniej niż 800 px, lądują na końcu listy z ostrzeżeniem.
Zdjęcia z iPhone'a przychodzą w formacie HEIC, więc kreator zamienia je na JPEG jeszcze w przeglądarce, zanim wyśle je na serwer.
Co w kreatorze robi AI, a co zwykły kod?
Granicę postawiliśmy prosto: AI podpowiada treść i obrabia obraz, a wszystko, co dotyczy pieniędzy, stanów i uprawnień, liczy kod.
| Zadanie | Kto je wykonuje |
|---|---|
| Tytuł, kategoria, krótki opis, osobny tekst ALT dla każdego zdjęcia, sprawdzenie, czy zdjęcie pasuje do produktu | Claude Haiku 4.5 |
| Dopasowanie opisu wzoru, odczyt cech ze zdjęcia, dane ze stron sklepów | Claude Sonnet 4.6 |
| Wycinanie tła i usuwanie zaznaczonych elementów | Gemini (model obrazowy) |
| Cena brutto z netto i VAT, klasa wysyłki, zapis do Subiektu, uprawnienia | Kod PHP i JavaScript |
Przy opisie pilnujemy, żeby AI nie zepsuło struktury. Zanim tekst trafi do modelu, linki i obrazki wzoru zamieniamy na tokeny, a po odpowiedzi przywracamy je w tych samych miejscach. Jeśli któregoś tokenu brakuje albo odpowiedź została ucięta limitem długości, kreator pokazuje błąd zamiast zapisać niepełny opis.
Jak wyciąć tło ze zdjęcia produktu, nie zmieniając kolorów?
Model obrazowy, który wycina tło, potrafi przy okazji przemalować produkt. Na wianku z różowymi kwiatami zielone liście wyszły szare, a różowe płatki zniknęły. Dlatego prosimy Gemini o produkt na jednolitym tle w kolorze magenta i z tej odpowiedzi bierzemy tylko maskę. Piksele produktu pochodzą z oryginalnego zdjęcia.
Średnia różnica koloru produktu względem oryginału spadła na tym wianku z 61,6 do 7,46, czyli do poziomu szumu kompresji. Różowych pikseli, które przetrwały wycinanie, było 0%, a po zmianie 99,4%.
Gemini nie zawsze odpowiada tak samo. W mniej więcej co trzeciej próbie zabarwiał całą scenę na różowo zamiast podmienić tło. Kreator wykrywa takie przebarwienie, porównuje kolory z oryginałem i ponawia próbę, najwyżej trzy razy. Na zdjęciu, które zgłosiła obsługa sklepu, pięć prób na pięć dało poprawny wynik.
Wycięty produkt można postawić na jednym z 11 teł sfotografowanych w salonie klienta. Kreator dobiera tło do wysokości rośliny, a ponieważ wycięcie zapisuje się z przezroczystością, zmiana tła trwa 1,8 s i nie wywołuje AI ponownie.
Kto może dodawać produkty i co wolno mu zmienić?
Uprawnienia nadaje się pojedynczym pracownikom na liście użytkowników WordPressa. Są trzy poziomy:
- Pełny: zapis do WooCommerce i do Subiektu, w zakresie pól wskazanych dla danej osoby.
- Tylko Woo: publikacja w sklepie bez zapisu do ERP.
- Foto i EAN: pracownik z telefonem skanuje kod i robi zdjęcia, a produkt zapisuje się jako szkic do dokończenia przy komputerze.
Do Subiektu wracają tylko pola, które pracownik faktycznie zmienił i do których ma prawo. Przed oddaniem modułu próbowaliśmy obejść te ograniczenia z konta o najniższym poziomie, wysyłając do serwera dane, których formularz nie pokazuje. Serwer sprawdza uprawnienia przy każdym zapisie, a nie tylko w interfejsie, a test modułu zapisu do ERP przechodzi 23 z 23 asercji.
Jak przetestowaliśmy kreator przed oddaniem?
Każda poprawka zaczynała się od testu, który odtwarzał problem. Kod JavaScript kreatora ma dziś 66 testów, a do tego dochodzą skrypty PHP sprawdzające formułę VAT, osie wymiarów, atrybuty i zapis produktów powiązanych.
Po wdrożeniu obsługa sklepu przysyłała uwagi z codziennej pracy, m.in. o stawce VAT 8% dla roślin, osiach wymiarów i kolejności zdjęć. Każdą obsłużyliśmy razem z testem, który pilnuje, żeby problem nie wrócił.
Najwięcej dały testy end-to-end, w których dodawaliśmy przez kreator te same produkty, które sklep wcześniej wprowadził ręcznie. Przy dwóch z nich cena w sklepie była wyższa o 76% i 90% niż cena brutto wyliczona z netto w Subiekcie. Teraz kreator ostrzega, gdy różnica przekracza 20%. Testy przechodziliśmy przy szerokości ekranu 390 px, a pola formularzy mają co najmniej 16 px, żeby Safari nie powiększało strony przy wpisywaniu.
Kiedy taki kreator ma sens w Twoim sklepie?
Opłaca się, gdy nowe produkty przychodzą regularnie, dane o nich są już w ERP, a dodawaniem zajmuje się jedna osoba, która zna panel. Przy kilku produktach w miesiącu wystarczy dobrze ustawiony panel WooCommerce i szablon opisu.
Czasu dodania produktu przed i po wdrożeniu nie mierzyliśmy, więc nie podajemy liczb. Zmieniło się to, kto może dodawać produkty: ktoś z telefonem i uprawnieniem do szkiców, bez znajomości panelu. Podobne narzędzia, od kreatorów dla obsługi po kalkulatory dla klientów, opisujemy w ofercie konfiguratorów i kalkulatorów, a szerzej o samym sklepie w case study KwiatyDonice.pl.
