Trinn 1: Hent din Photta-widgetnøkkel
Logg inn på Photta Business-dashbordet på business.photta.app. Gå til Innstillinger → API-nøkler og kopier din publiserbare nøkkel, som starter med pk_live_. Dette er den eneste legitimasjonen du trenger. Før nøkkelen fungerer, må du legge til ditt WooCommerce-butikkdomene (f.eks. minbutikk.no) under Innstillinger → Tillatte domener. Domenesjekken kjøres ved hver prøveforespørsel, så listen må være satt opp før du går live.
Hvis du tester lokalt på et underdomene som localhost eller en staging-URL, må du legge til det domenet separat. Du kan legge til opptil 10 domener på alle betalte abonnementer. Prøvekontoen tillater ett domene. Når domenet ditt er listet opp, vil forespørsler fra det opphavet bli akseptert umiddelbart — det er ingen forsinkelse i utrullingen.
Trinn 2: Velg kortkode vs. script-tag
WooCommerce gir deg to rene integrasjonsveier. Kortkodemetoden ([photta_widget pk="pk_live_..."]) lar deg lime widgeten inn på et spesifikt sted i produktmalen eller en tilpasset WooCommerce-hook — ideelt hvis du vil at knappen skal vises nøyaktig mellom produktgalleriet og 'Legg i handlekurv'-knappen. For å bruke kortkoden, limer du den direkte inn i WooCommerce-produktmalfilen single-product/add-to-cart/simple.php, eller bruk en blokk i en sidebygger.
Script-tag-metoden setter inn SDK-en globalt via temaets functions.php-fil ved hjelp av wp_enqueue_script. Legg til følgende i ditt barnetema (child theme) sin functions.php: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Dette genererer widget-knappen på alle produktsider automatisk, uten endringer i malene. De fleste forhandlere foretrekker script-tag-metoden for dens enkelthet.
Trinn 3: Lim inn og lagre ditt valgte kodesnutt
For kortkode-veien: åpne ditt barnetemas WooCommerce-maloverstyring for den enkelte produktsiden. Lim inn [photta_widget pk="pk_live_..."] på den nøyaktige vertikale posisjonen der du vil at knappen skal vises. Lagre filen. Kortkode-gjengivelsen registreres av Phottas lette hjelpefunksjon — ingen plugin-fil er nødvendig, siden selve SDK-en registrerer kortkode-håndtereren når den lastes.
For script-tag-veien: åpne Utseende → Temafilredigering i din WordPress-admin, naviger til barnetemaets functions.php, og legg til wp_footer-kodesnutten som vises i trinn 2. Klikk på 'Oppdater fil' for å lagre. Bekreft at kodesnutten ble lagret ved å oppdatere redigeringsprogrammet og se at koden er til stede. Hvis du bruker en caching-plugin (WP Rocket, W3 Total Cache), tøm bufferen nå slik at det nye skriptet i bunnteksten blir levert.
Trinn 4: Bekreft at widgeten vises i butikken din
Naviger til en produktside i din WooCommerce-butikk i et privat nettleservindu. Du bør se en 'Prøv på'-knapp i nærheten av 'Legg i handlekurv'-seksjonen. Klikk på knappen, last opp et testbilde, og verifiser at prøveresultatet vises. Hvis knappen ikke vises, åpne nettleserkonsollen (F12) og se etter photta-feil. En 403-domenefeil betyr at domenet ditt ennå ikke er i listen over tillatte domener.
Sjekk også at SDK-script-taggen vises i sidens HTML-kilde ved å trykke Ctrl+U (Vis kildekode) og søke etter photta. Hvis taggen mangler, men du la til wp_footer-hooken, dobbeltsjekk at temaet ditt kaller wp_footer() i sin footer-mal — enkelte eldre eller sterkt tilpassede temaer utelater dette kallet. Å legge til <?php wp_footer(); ?> før den avsluttende </body>-taggen i din footer.php løser dette.
Trinn 5: Konfigurer synlighet per kategori
Som standard vises widget-knappen på alle produktsider. For å begrense den til spesifikke kategorier, legg til data-categories-attributtet i script-taggen med en kommaseparert liste over WooCommerce-kategorislugger: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="dame-klar,herre-klar,badetoy" defer></script>. SDK-en leser gjeldende sides WooCommerce-kategoridata og skjuler knappen på sider som ikke samsvarer automatisk.
For kortkode-brukere: plasser kortkoden bare i malene knyttet til målkategoriene, eller pakk kortkoden inn i en WooCommerce-betingelse: bruk PHP-funksjonen has_term() for å sjekke om det aktuelle produktet tilhører målkategorien før kortkoden skrives ut. Dette mønsteret gir deg kirurgisk kontroll over hvilke produkttyper som viser prøvealternativet uten å duplisere maler.