Pasul 1: Obțineți cheia widget-ului Photta
Autentificați-vă în Panoul de Control Photta Business la business.photta.app. Mergeți la Setări → Chei API și copiați cheia publicabilă, care începe cu pk_live_. Aceasta este singura acreditare de care aveți nevoie. Înainte ca cheia să funcționeze, adăugați domeniul magazinului dvs. WooCommerce (ex: mystore.com) la Setări → Domenii Permise. Verificarea domeniului se face la fiecare cerere de probă, deci lista de permisiuni trebuie setată înainte de a lansa site-ul.
Dacă testați local pe un subdomeniu precum localhost sau un URL de staging, adăugați acel domeniu separat în lista de permisiuni. Puteți adăuga până la 10 domenii pe orice plan plătit. Contul de test (trial) permite un singur domeniu. Odată ce domeniul este listat, cererile de la acea origine vor fi acceptate imediat — nu există nicio întârziere de propagare.
Pasul 2: Alegeți între shortcode și tag-ul de script
WooCommerce vă oferă două căi curate de integrare. Abordarea prin shortcode ([photta_widget pk="pk_live_..."]) vă permite să inserați widget-ul într-o locație specifică din șablonul paginii de produs sau într-un hook WooCommerce personalizat — ideal dacă doriți ca butonul să apară exact între galeria de produse și butonul Adaugă în Coș. Pentru a folosi shortcode-ul, lipiți-l direct în fișierul de șablon de produs WooCommerce single-product/add-to-cart/simple.php sau folosiți un bloc de tip page builder.
Abordarea prin tag de script inserează SDK-ul global prin fișierul functions.php al temei dvs. folosind wp_enqueue_script. Adăugați următoarele în fișierul functions.php al temei copil: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Acest lucru randează butonul widget-ului pe fiecare pagină de produs automat, fără modificări per șablon. Majoritatea comercianților preferă abordarea prin tag de script pentru simplitatea sa.
Pasul 3: Lipiți și salvați fragmentul ales
Pentru calea prin shortcode: deschideți suprascrierea șablonului WooCommerce pentru pagina de produs individual. Lipiți [photta_widget pk="pk_live_..."] la poziția verticală exactă unde doriți să apară butonul. Salvați fișierul. Randarea shortcode-ului este înregistrată de script-ul ușor al Photta — nu este necesar niciun fișier de plugin, deoarece SDK-ul însuși înregistrează handler-ul de shortcode la încărcare.
Pentru calea prin tag de script: deschideți Aspect → Editor fișier temă în administrarea WordPress, navigați la functions.php al temei copil și adăugați fragmentul cu acțiunea wp_footer prezentat la Pasul 2. Faceți clic pe Actualizare fișier pentru a salva. Verificați dacă fragmentul a fost salvat reîmprospătând editorul și confirmând prezența codului. Dacă folosiți un plugin de caching (WP Rocket, W3 Total Cache), goliți memoria cache acum pentru ca noul script de footer să fie servit.
Pasul 4: Verificați dacă widget-ul apare în magazin
Navigați la o pagină de produs din magazinul dvs. WooCommerce într-o fereastră de navigare privată. Ar trebui să vedeți un buton „Probă virtuală” lângă secțiunea Adaugă în Coș. Faceți clic pe buton, încărcați o fotografie de test și verificați dacă rezultatul probei este afișat. Dacă butonul nu apare, deschideți consola browserului (F12) și căutați erori photta. O eroare de domeniu 403 înseamnă că domeniul dvs. nu este încă în lista de Domenii Permise.
De asemenea, verificați dacă tag-ul de script SDK apare în sursa HTML a paginii apăsând Ctrl+U (Vizualizare sursă) și căutând photta. Dacă tag-ul lipsește deși ați adăugat hook-ul wp_footer, verificați dacă tema dvs. apelează funcția wp_footer() în șablonul de footer — unele teme mai vechi sau foarte personalizate omit acest apel. Adăugarea <?php wp_footer(); ?> înainte de închiderea </body> în footer.php rezolvă această problemă.
Pasul 5: Configurați vizibilitatea pe categorii
În mod implicit, butonul widget-ului apare pe toate paginile de produse. Pentru a-l restricționa la anumite categorii, adăugați atributul data-categories la tag-ul de script cu o listă de slug-uri de categorii WooCommerce separate prin virgulă: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK-ul citește datele categoriei WooCommerce din pagina curentă și ascunde automat butonul pe paginile care nu se potrivesc.
Pentru utilizatorii de shortcode, plasați shortcode-ul doar în șabloanele asociate cu categoriile vizate sau încadrați shortcode-ul într-o condițională WooCommerce: utilizați funcția PHP has_term() pentru a verifica dacă produsul curent aparține categoriei vizate înainte de a afișa shortcode-ul. Acest model vă oferă un control chirurgical asupra tipurilor de produse care afișează opțiunea de probă, fără a duplica șabloanele.