Krok 1: Pobierz klucz widgetu Photta
Zaloguj się do panelu Photta Business pod adresem business.photta.app. Przejdź do Settings → API Keys i skopiuj swój klucz publiczny (publishable key), który zaczyna się od pk_live_. To jedyne poświadczenie, którego potrzebujesz. Aby klucz zadziałał, dodaj domenę swojego sklepu WooCommerce (np. mojsklep.pl) w Settings → Allowed Domains. Weryfikacja domeny odbywa się przy każdym żądaniu przymiarki, więc lista dozwolonych domen musi być skonfigurowana przed uruchomieniem produkcyjnym.
Jeśli testujesz lokalnie na subdomenie takiej jak localhost lub adresie stagingowym, dodaj tę domenę do listy oddzielnie. W dowolnym płatnym planie możesz dodać do 10 domen. Konto testowe pozwala na jedną domenę. Gdy Twoja domena znajdzie się na liście, żądania z tego źródła będą akceptowane natychmiast — nie ma opóźnień w propagacji.
Krok 2: Wybierz shortcode lub tag skryptu
WooCommerce oferuje dwie czyste ścieżki integracji. Metoda shortcode ([photta_widget pk="pk_live_..."]) pozwala wkleić widget w konkretne miejsce w szablonie strony produktu lub niestandardowy hook WooCommerce — idealne, jeśli chcesz, aby przycisk pojawił się dokładnie między galerią produktu a przyciskiem „Dodaj do koszyka”. Aby użyć shortcode'u, wklej go bezpośrednio do pliku szablonu produktu WooCommerce single-product/add-to-cart/simple.php lub użyj bloku w kreatorze stron.
Metoda tagu skryptu wstawia SDK globalnie poprzez plik functions.php Twojego motywu za pomocą funkcji wp_enqueue_script. Dodaj poniższy kod do pliku functions.php motywu potomnego: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); To automatycznie wygeneruje przycisk widgetu na każdej stronie produktu, bez konieczności zmian w szablonach. Większość sprzedawców preferuje metodę tagu skryptu ze względu na jej prostotę.
Krok 3: Wklej i zapisz wybrany fragment kodu
Dla ścieżki shortcode: otwórz nadpisanie szablonu WooCommerce dla strony pojedynczego produktu w motywie potomnym. Wklej [photta_widget pk="pk_live_..."] dokładnie w tym miejscu pionowym, w którym ma się pojawić przycisk. Zapisz plik. Mechanizm renderujący shortcode jest rejestrowany przez lekki pomocnik Photta — plik wtyczki nie jest potrzebny, ponieważ samo SDK rejestruje obsługę shortcode'u po załadowaniu.
Dla ścieżki tagu skryptu: otwórz Wygląd → Edytor plików motywu w panelu administracyjnym WordPress, przejdź do pliku functions.php motywu potomnego i dodaj fragment kodu z akcją wp_footer pokazany w Kroku 2. Kliknij Aktualizuj plik, aby zapisać zmiany. Zweryfikuj zapis, odświeżając edytor. Jeśli używasz wtyczki do buforowania (WP Rocket, W3 Total Cache), wyczyść pamięć podręczną teraz, aby nowy skrypt w stopce zaczął być serwowany.
Krok 4: Sprawdź, czy widget pojawia się w Twoim sklepie
Przejdź do strony produktu w swoim sklepie WooCommerce w oknie prywatnym przeglądarki. Powinieneś zobaczyć przycisk „Przymierz” w pobliżu sekcji „Dodaj do koszyka”. Kliknij przycisk, prześlij testowe zdjęcie i sprawdź, czy wynik przymiarki się generuje. Jeśli przycisk się nie pojawia, otwórz konsolę przeglądarki (F12) i poszukaj błędów photta. Błąd domeny 403 oznacza, że Twoja domena nie została jeszcze dodana do listy Allowed Domains.
Sprawdź również, czy tag skryptu SDK pojawia się w kodzie źródłowym strony, naciskając Ctrl+U (Wyświetl źródło) i wyszukując frazę „photta”. Jeśli tagu brakuje, a dodałeś hook wp_footer, upewnij się, że Twój motyw wywołuje funkcję wp_footer() w szablonie stopki — niektóre starsze lub mocno zmodyfikowane motywy pomijają to wywołanie. Dodanie <?php wp_footer(); ?> przed zamykającym tagiem </body> w pliku footer.php rozwiąże problem.
Krok 5: Skonfiguruj widoczność dla kategorii
Domyślnie przycisk widgetu pojawia się na wszystkich stronach produktów. Aby ograniczyć go do konkretnych kategorii, dodaj atrybut data-categories do tagu skryptu z listą slugów kategorii WooCommerce oddzielonych przecinkami: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="odziez-damska,odziez-meska,stroje-kapielowe" defer></script>. SDK odczytuje dane kategorii WooCommerce aktualnej strony i automatycznie ukrywa przycisk na niepasujących stronach.
Użytkownicy shortcode'ów powinni umieszczać kod tylko w szablonach powiązanych z docelowymi kategoriami lub opakować go w instrukcję warunkową WooCommerce: użyj funkcji PHP has_term(), aby sprawdzić, czy bieżący produkt należy do docelowej kategorii przed wyświetleniem shortcode'u. Ten wzorzec daje chirurgiczną kontrolę nad tym, które typy produktów wyświetlają opcję przymiarki, bez powielania szablonów.