Vaihe 1: Hae Photta-widget-avaimesi
Kirjaudu sisään Photta Business-hallintapaneeliin osoitteessa business.photta.app. Siirry kohtaan Settings → API Keys ja kopioi julkinen avaimesi (publishable key), joka alkaa merkkijonolla pk_live_. Tämä on ainoa tarvitsemasi tunnus. Ennen kuin avain toimii, lisää WooCommerce-kauppasi verkkotunnus (esim. kauppa.fi) kohtaan Settings → Allowed Domains. Verkkotunnuksen tarkistus suoritetaan jokaisen sovituspyynnön yhteydessä, joten sallittujen listan on oltava kunnossa ennen julkaisua.
Jos testaat paikallisesti alidomainilla kuten localhost tai testisivuston (staging) URL-osoitteella, lisää kyseinen verkkotunnus sallittujen listalle erikseen. Voit lisätä jopa 10 verkkotunnusta millä tahansa maksullisella paketilla. Kokeilutili sallii yhden verkkotunnuksen. Kun verkkotunnuksesi on listattu, kyseisestä lähteestä tulevat pyynnöt hyväksytään välittömästi – viivettä ei ole.
Vaihe 2: Valitse lyhytkoodi tai skriptitunniste
WooCommerce tarjoaa kaksi selkeää integraatiotapaa. Lyhytkoodi-tapa ([photta_widget pk="pk_live_..."]) antaa sinun liittää widgetin tiettyyn kohtaan tuotesivun mallipohjassa tai mukautetussa WooCommerce-hookissa – ihanteellista, jos haluat painikkeen näkyvän täsmälleen tuotegallerian ja Lisää ostoskoriin -painikkeen välissä. Käyttääksesi lyhytkoodia, liitä se suoraan WooCommerce-tuotemallitiedostoon single-product/add-to-cart/simple.php tai käytä sivunrakentajan lohkoa.
Skriptitunniste-tapa lisää SDK:n maailmanlaajuisesti teemasi functions.php-tiedoston kautta käyttämällä wp_enqueue_script-funktiota. Lisää seuraava koodi lapsiteemasi functions.php-tiedostoon: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Tämä lisää widget-painikkeen jokaiselle tuotesivulle automaattisesti ilman mallikohtaisia muutoksia. Useimmat kauppiaat suosivat skriptitunnistetta sen yksinkertaisuuden vuoksi.
Vaihe 3: Liitä ja tallenna valitsemasi koodinpätkä
Lyhytkoodin tapauksessa: avaa lapsiteemasi WooCommerce-mallin ylikirjoitustiedosto yksittäiselle tuotesivulle. Liitä [photta_widget pk="pk_live_..."] täsmälleen siihen pystysuoraan kohtaan, jossa haluat painikkeen näkyvän. Tallenna tiedosto. Lyhytkoodin renderöijä on rekisteröity Photta-apuohjelmalla – erillistä lisäosatiedostoa ei tarvita, sillä SDK itse rekisteröi lyhytkoodin käsittelijän latautuessaan.
Skriptitunnisteen tapauksessa: avaa WordPress-hallinnassa Ulkoasu → Teematiedostojen muokkain, siirry lapsiteemasi functions.php-tiedostoon ja lisää vaiheessa 2 näytetty wp_footer-koodinpätkä. Tallenna klikkaamalla Päivitä tiedosto. Varmista tallennus päivittämällä muokkain ja tarkistamalla, että koodi on paikallaan. Jos käytät välimuistilisäosaa (WP Rocket, W3 Total Cache), tyhjennä välimuisti nyt, jotta uusi footer-skripti tulee näkyviin.
Vaihe 4: Varmista, että widget näkyy kaupassasi
Siirry WooCommerce-kauppasi tuotesivulle yksityisessä selainikkunassa. Sinun pitäisi nähdä 'Kokeile päälle' -painike lähellä Lisää ostoskoriin -osiota. Klikkaa painiketta, lataa testikuva ja varmista, että kokeilun tulos renderöityy. Jos painike ei tule näkyviin, avaa selaimen konsoli (F12) ja etsi photta-virheitä. 403-verkkotunnusvirhe tarkoittaa, että verkkotunnuksesi ei ole vielä sallittujen listalla.
Tarkista myös, että SDK-skriptitunniste näkyy sivun HTML-lähdekoodissa painamalla Ctrl+U ja etsimällä sanaa photta. Jos tunnistetta ei löydy, vaikka lisäsit wp_footer-hookin, tarkista, että teemasi kutsuu wp_footer()-funktiota alatunnistemallissaan – jotkut vanhemmat tai vahvasti räätälöidyt teemat jättävät tämän kutsun pois. Lisäämällä <?php wp_footer(); ?> ennen sulkevaa </body>-tagia footer.php-tiedostossa korjaa tämän.
Vaihe 5: Määritä kategoriakohtainen näkyvyys
Oletusarvoisesti widget-painike näkyy kaikilla tuotesivuilla. Rajoittaaksesi sen tiettyihin kategorioihin, lisää data-categories-attribuutti skriptitunnisteeseesi pilkuilla erotetulla listalla WooCommerce-kategorioiden polkutunnuksista: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="naisten-vaatteet,miesten-vaatteet,uima-asut" defer></script>. SDK lukee nykyisen sivun WooCommerce-kategoriatiedot ja piilottaa painikkeen automaattisesti sivuilta, jotka eivät täsmää.
Lyhytkoodin käyttäjät: sijoita lyhytkoodi vain kohdekategorioihin liittyviin malleihin tai kääri se WooCommerce-ehtolauseeseen: käytä has_term() PHP-funktiota tarkistaaksesi, kuuluuko nykyinen tuote kohdekategoriaan ennen lyhytkoodin tulostamista. Tämä antaa sinulle tarkan kontrollin siitä, mitkä tuotetyypit näyttävät sovitusvaihtoehdon ilman mallipohjien monistamista.