1. Adım: Photta widget anahtarınızı alın
business.photta.app adresindeki Photta Business Panelinde oturum açın. Ayarlar → API Anahtarları bölümüne gidin ve pk_live_ ile başlayan yayınlanabilir anahtarınızı kopyalayın. İhtiyacınız olan tek kimlik bilgisi budur. Anahtarın çalışması için, Ayarlar → İzin Verilen Alan Adları kısmına WooCommerce mağaza alan adınızı (örneğin, magazam.com) ekleyin. Alan adı kontrolü her deneme isteğinde çalışır, bu nedenle yayına girmeden önce izin verilenler listesi ayarlanmalıdır.
Localhost gibi bir alt alan adında veya hazırlık (staging) URL'sinde yerel olarak test yapıyorsanız, bu alan adını izin verilenler listesine ayrıca ekleyin. Herhangi bir ücretli planda 10 adede kadar alan adı ekleyebilirsiniz. Deneme hesabı bir alan adına izin verir. Alan adınız listelendikten sonra, bu kaynaktan gelen istekler hemen kabul edilecektir — herhangi bir yayılma (propagation) gecikmesi yoktur.
2. Adım: Kısa kod mu yoksa script etiketi mi seçin
WooCommerce size iki temiz entegrasyon yolu sunar. Kısa kod yaklaşımı ([photta_widget pk="pk_live_..."]), widget'ı ürün sayfası şablonunuzdaki belirli bir konuma veya özel bir WooCommerce kancasına (hook) yapıştırmanıza olanak tanır — butonun tam olarak ürün galerisi ile Sepete Ekle butonu arasında görünmesini istiyorsanız idealdir. Kısa kodu kullanmak için doğrudan WooCommerce ürün şablon dosyası single-product/add-to-cart/simple.php içine yapıştırın veya bir sayfa oluşturucu (page builder) bloğu kullanın.
Script etiketi yaklaşımı, SDK'yı temanızın functions.php dosyası aracılığıyla wp_enqueue_script kullanarak global olarak ekler. Alt temanızın (child theme) functions.php dosyasına şunu ekleyin: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); Bu, şablon bazlı değişiklik gerektirmeden widget butonunu her ürün sayfasında otomatik olarak oluşturur. Çoğu satıcı, basitliği nedeniyle script etiketi yaklaşımını tercih eder.
3. Adım: Seçtiğiniz snippet'i yapıştırın ve kaydedin
Kısa kod yolu için: Alt temanızın tek ürün sayfası için olan WooCommerce şablon geçersiz kılma dosyasını açın. [photta_widget pk="pk_live_..."] kodunu butonun görünmesini istediğiniz dikey konuma yapıştırın. Dosyayı kaydedin. Kısa kod işleyicisi Photta'ün hafif yardımcısı tarafından kaydedilir — SDK yüklendiğinde kısa kod işleyicisini kendisi kaydettiği için eklenti dosyasına gerek yoktur.
Script etiketi yolu için: WordPress yönetim panelinizde Görünüm → Tema Dosya Düzenleyici'yi açın, alt temanızın functions.php dosyasına gidin ve 2. Adımda gösterilen wp_footer eylem snippet'ini ekleyin. Kaydetmek için Dosyayı Güncelle'ye tıklayın. Düzenleyiciyi yenileyerek ve kodun orada olduğunu onaylayarak snippet'in kaydedildiğini doğrulayın. Bir önbellek eklentisi (WP Rocket, W3 Total Cache) kullanıyorsanız, yeni alt bilgi (footer) script'inin sunulması için önbelleği şimdi temizleyin.
4. Adım: Widget'ın mağazanızda göründüğünü doğrulayın
Gizli bir tarayıcı penceresinde WooCommerce mağazanızdaki bir ürün sayfasına gidin. Sepete Ekle bölümünün yakınında bir 'Üzerinde Dene' butonu görmelisiniz. Butona tıklayın, bir test fotoğrafı yükleyin ve deneme sonucunun oluştuğunu doğrulayın. Buton görünmüyorsa tarayıcı konsolunu (F12) açın ve photta hatalarını kontrol edin. 403 alan adı hatası, alan adınızın henüz İzin Verilen Alan Adları listesinde olmadığı anlamına gelir.
Ayrıca, Ctrl+U (Kaynağı Görüntüle) tuşlarına basarak ve photta kelimesini arayarak SDK script etiketinin sayfa HTML kaynağında göründüğünü kontrol edin. Etiket eksikse ancak wp_footer kancasını eklediyseniz, temanızın alt bilgi şablonunda wp_footer() işlevini çağırıp çağırmadığını tekrar kontrol edin — bazı eski veya yoğun şekilde özelleştirilmiş temalar bu çağrıyı atlayabilir. footer.php dosyanızdaki kapanış </body> etiketinden önce <?php wp_footer(); ?> eklemek bunu düzeltir.
5. Adım: Kategori bazlı görünürlüğü yapılandırın
Varsayılan olarak, widget butonu tüm ürün sayfalarında görünür. Bunu belirli kategorilerle sınırlamak için script etiketinize WooCommerce kategori kısa isimlerinden (slug) oluşan virgülle ayrılmış bir liste içeren data-categories özniteliğini ekleyin: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="kadin-giyim,erkek-giyim,mayo" defer></script>. SDK, mevcut sayfanın WooCommerce kategori verilerini okur ve butonu eşleşmeyen sayfalarda otomatik olarak gizler.
Kısa kod kullanıcıları için, kısa kodu yalnızca hedef kategorilerle ilişkili şablonlara yerleştirin veya kısa kodu bir WooCommerce koşuluyla sarmalayın: Kısa kodu çıktılamadan önce mevcut ürünün hedef kategoriye ait olup olmadığını kontrol etmek için has_term() PHP işlevini kullanın. Bu yöntem, şablonları çoğaltmadan hangi ürün tiplerinin deneme seçeneğini göstereceği üzerinde cerrahi bir kontrol sağlar.