Langkah 1: Dapatkan kunci widget Photta anda
Log masuk ke Papan Pemuka Photta Business di business.photta.app. Pergi ke Tetapan → Kunci API dan salin kunci boleh diterbitkan anda, yang bermula dengan pk_live_. Ini adalah satu-satunya kelayakan yang anda perlukan. Sebelum kunci itu berfungsi, tambah domain kedai WooCommerce anda (cth., mystore.com) ke Tetapan → Domain Dibenarkan. Semakan domain dijalankan pada setiap permintaan cuba-pakai, jadi senarai putih mesti ditetapkan sebelum anda mula beroperasi secara langsung.
Jika anda sedang menguji secara tempatan pada subdomain seperti localhost atau URL pementasan (staging), tambah domain tersebut ke senarai putih secara berasingan. Anda boleh menambah sehingga 10 domain pada mana-mana pelan berbayar. Akaun percubaan membenarkan satu domain. Sebaik sahaja domain anda disenaraikan, permintaan daripada asal tersebut akan diterima serta-merta — tiada kelewatan penyebaran.
Langkah 2: Pilih kod pendek vs. tag skrip
WooCommerce memberi anda dua laluan integrasi yang bersih. Pendekatan kod pendek ([photta_widget pk="pk_live_..."]) membolehkan anda menampal widget ke dalam lokasi tertentu di dalam templat halaman produk anda atau cangkuk (hook) WooCommerce tersuai — sesuai jika anda mahu butang itu muncul tepat di antara galeri produk dan butang Tambah ke Troli. Untuk menggunakan kod pendek, tampalkannya terus ke dalam fail templat produk WooCommerce single-product/add-to-cart/simple.php, atau gunakan blok pembina halaman.
Pendekatan tag skrip memasukkan SDK secara global melalui fail functions.php tema anda menggunakan wp_enqueue_script. Tambahkan perkara berikut pada functions.php tema anak (child theme) anda: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Ini memaparkan butang widget pada setiap halaman produk secara automatik, tanpa perubahan pada setiap templat. Kebanyakan pedagang lebih suka pendekatan tag skrip kerana kesederhanaannya.
Langkah 3: Tampal dan simpan coretan pilihan anda
Untuk laluan kod pendek: buka ganti templat WooCommerce tema anak anda untuk halaman produk tunggal. Tampal [photta_widget pk="pk_live_..."] pada kedudukan menegak tepat di mana anda mahu butang itu muncul. Simpan fail. Penyaji kod pendek didaftarkan oleh pembantu ringan Photta — tiada fail plugin diperlukan, memandangkan SDK itu sendiri mendaftarkan pengendali kod pendek apabila dimuatkan.
Untuk laluan tag skrip: buka Rupa → Editor Fail Tema dalam pentadbir WordPress anda, navigasi ke functions.php tema anak anda, dan tambah coretan tindakan wp_footer yang ditunjukkan dalam Langkah 2. Klik Kemas Kini Fail untuk simpan. Sahkan coretan telah disimpan dengan menyegarkan semula editor dan mengesahkan kod tersebut wujud. Jika anda menggunakan plugin caching (WP Rocket, W3 Total Cache), kosongkan cache sekarang supaya skrip pengaki baharu dapat disajikan.
Langkah 4: Sahkan widget muncul di kedai anda
Navigasi ke halaman produk di kedai WooCommerce anda dalam tetingkap pelayar peribadi. Anda sepatutnya melihat butang 'Cuba sekarang' berhampiran bahagian Tambah ke Troli. Klik butang tersebut, muat naik foto ujian, dan sahkan hasil cuba-pakai dipaparkan. Jika butang tidak muncul, buka konsol pelayar (F12) dan cari ralat photta. Ralat domain 403 bermakna domain anda belum lagi berada dalam senarai Domain Dibenarkan.
Semak juga sama ada tag skrip SDK muncul dalam sumber HTML halaman dengan menekan Ctrl+U (Lihat Sumber) dan mencari photta. Jika tag tersebut tiada tetapi anda telah menambah cangkuk wp_footer, semak semula sama ada tema anda memanggil wp_footer() dalam templat pengakinya — beberapa tema lama atau yang banyak diubah suai mengabaikan panggilan ini. Menambah <?php wp_footer(); ?> sebelum penutup </body> dalam footer.php anda akan membetulkan perkara ini.
Langkah 5: Konfigurasikan keterlihatan mengikut kategori
Secara lalai, butang widget muncul pada semua halaman produk. Untuk mengehadkannya kepada kategori tertentu, tambah atribut data-categories ke tag skrip anda dengan senarai slug kategori WooCommerce yang dipisahkan koma: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>. SDK membaca data kategori WooCommerce halaman semasa dan menyembunyikan butang pada halaman yang tidak sepadan secara automatik.
Untuk pengguna kod pendek, letakkan kod pendek hanya dalam templat yang berkaitan dengan kategori sasaran, atau bungkus kod pendek dalam syarat WooCommerce: gunakan fungsi PHP has_term() untuk menyemak sama ada produk semasa tergolong dalam kategori sasaran sebelum mengeluarkan kod pendek. Corak ini memberi anda kawalan tepat ke atas jenis produk yang memaparkan pilihan cuba-pakai tanpa menduplikasi templat.