चरण 1: अपनी Photta विजेट कुंजी प्राप्त करें
business.photta.app पर Photta Business डैशबोर्ड में लॉग इन करें। Settings → API Keys पर जाएं और अपनी पब्लिशेबल की (publishable key) को कॉपी करें, जो pk_live_ से शुरू होती है। यह एकमात्र क्रेडेंशियल है जिसकी आपको आवश्यकता है। कुंजी के काम करने से पहले, अपने WooCommerce स्टोर डोमेन (जैसे, mystore.com) को Settings → Allowed Domains में जोड़ें। डोमेन चेक हर ट्राई-ऑन अनुरोध पर चलता है, इसलिए लाइव जाने से पहले अनुमति सूची सेट की जानी चाहिए।
यदि आप स्थानीय रूप से localhost या स्टेजिंग URL जैसे सबडोमेन पर परीक्षण कर रहे हैं, तो उस डोमेन को अनुमति सूची में अलग से जोड़ें। आप किसी भी पेड प्लान पर 10 डोमेन तक जोड़ सकते हैं। ट्रायल अकाउंट एक डोमेन की अनुमति देता है। एक बार जब आपका डोमेन सूचीबद्ध हो जाता है, तो उस ऑरिजिन से अनुरोध तुरंत स्वीकार कर लिए जाएंगे — इसमें कोई प्रोपेगेशन डिले नहीं है।
चरण 2: शॉर्टकोड बनाम स्क्रिप्ट टैग चुनें
WooCommerce आपको दो साफ-सुथरे एकीकरण पथ देता है। शॉर्टकोड दृष्टिकोण ([photta_widget pk="pk_live_..."]) आपको विजेट को अपने उत्पाद पृष्ठ टेम्प्लेट या कस्टम WooCommerce हुक के अंदर एक विशिष्ट स्थान पर पेस्ट करने की अनुमति देता है — यदि आप चाहते हैं कि बटन उत्पाद गैलरी और 'Add to Cart' बटन के ठीक बीच में दिखाई दे तो यह आदर्श है। शॉर्टकोड का उपयोग करने के लिए, इसे सीधे WooCommerce उत्पाद टेम्प्लेट फ़ाइल single-product/add-to-cart/simple.php में पेस्ट करें, या पेज बिल्डर ब्लॉक का उपयोग करें।
स्क्रिप्ट टैग दृष्टिकोण wp_enqueue_script का उपयोग करके आपके थीम की functions.php फ़ाइल के माध्यम से SDK को वैश्विक रूप से सम्मिलित करता है। अपने चाइल्ड थीम की functions.php में निम्नलिखित जोड़ें: add_action('wp_footer', function() { echo '<script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." defer></script>'; }); यह बिना किसी प्रति-टेम्प्लेट परिवर्तन के स्वचालित रूप से हर उत्पाद पृष्ठ पर विजेट बटन रेंडर करता है। अधिकांश व्यापारी इसकी सरलता के कारण स्क्रिप्ट टैग दृष्टिकोण को पसंद करते हैं।
चरण 3: अपना चुना हुआ स्निपेट पेस्ट करें और सहेजें
शॉर्टकोड पथ के लिए: सिंगल प्रोडक्ट पेज के लिए अपने चाइल्ड थीम का WooCommerce टेम्प्लेट ओवरराइड खोलें। [photta_widget pk="pk_live_..."] को उस सटीक लंबवत स्थिति में पेस्ट करें जहां आप चाहते हैं कि बटन दिखाई दे। फ़ाइल सहेजें। शॉर्टकोड रेंडरर Photta के लाइटवेट हेल्पर द्वारा पंजीकृत है — किसी प्लगइन फ़ाइल की आवश्यकता नहीं है, क्योंकि SDK लोड होने पर स्वयं शॉर्टकोड हैंडलर को पंजीकृत करता है।
स्क्रिप्ट टैग पथ के लिए: अपने वर्डप्रेस एडमिन में Appearance → Theme File Editor खोलें, अपने चाइल्ड थीम के functions.php पर नेविगेट करें, और चरण 2 में दिखाया गया wp_footer एक्शन स्निपेट जोड़ें। सहेजने के लिए Update File पर क्लिक करें। एडिटर को रिफ्रेश करके और कोड की उपस्थिति की पुष्टि करके सत्यापित करें कि स्निपेट सहेजा गया था। यदि आप कैशिंग प्लगइन (WP Rocket, W3 Total Cache) का उपयोग करते हैं, तो अभी कैश साफ़ करें ताकि नया पाद लेख स्क्रिप्ट प्रदर्शित हो सके।
चरण 4: सत्यापित करें कि विजेट आपके स्टोर पर दिखाई दे रहा है
एक निजी ब्राउज़र विंडो में अपने WooCommerce स्टोर पर एक उत्पाद पृष्ठ पर नेविगेट करें। आपको 'Add to Cart' सेक्शन के पास एक 'Try it on' बटन दिखाई देना चाहिए। बटन पर क्लिक करें, एक परीक्षण फोटो अपलोड करें, और सत्यापित करें कि ट्राई-ऑन परिणाम रेंडर होता है। यदि बटन दिखाई नहीं देता है, तो ब्राउज़र कंसोल (F12) खोलें और photta त्रुटियों की तलाश करें। 403 डोमेन त्रुटि का अर्थ है कि आपका डोमेन अभी तक अनुमति प्राप्त डोमेन सूची में नहीं है।
यह भी जांचें कि SDK स्क्रिप्ट टैग पृष्ठ HTML सोर्स में Ctrl+U (View Source) दबाकर और photta खोजकर दिखाई देता है। यदि टैग अनुपस्थित है लेकिन आपने wp_footer हुक जोड़ा है, तो दोबारा जांचें कि आपका थीम अपने पाद लेख टेम्प्लेट में wp_footer() को कॉल कर रहा है — कुछ पुराने या भारी अनुकूलित थीम इस कॉल को छोड़ देते हैं। अपने footer.php में </body> बंद होने से पहले <?php wp_footer(); ?> जोड़ना इसे ठीक कर देता है।
चरण 5: प्रति-श्रेणी दृश्यता कॉन्फ़िगर करें
डिफ़ॉल्ट रूप से, विजेट बटन सभी उत्पाद पृष्ठों पर दिखाई देता है। इसे विशिष्ट श्रेणियों तक सीमित करने के लिए, अपने स्क्रिप्ट टैग में WooCommerce श्रेणी स्लग की अल्पविराम से अलग की गई सूची के साथ data-categories एट्रिब्यूट जोड़ें: <script src="https://widget.photta.app/sdk.js" data-pk="pk_live_..." data-categories="womens-apparel,mens-apparel,swimwear" defer></script>। SDK वर्तमान पृष्ठ के WooCommerce श्रेणी डेटा को पढ़ता है और गैर-मेल खाने वाले पृष्ठों पर बटन को स्वचालित रूप से छिपा देता है।
शॉर्टकोड उपयोगकर्ताओं के लिए, शॉर्टकोड को केवल लक्षित श्रेणियों से जुड़े टेम्प्लेट में रखें, या शॉर्टकोड को WooCommerce शर्त में लपेटें: शॉर्टकोड आउटपुट करने से पहले यह जांचने के लिए has_term() PHP फंक्शन का उपयोग करें कि क्या वर्तमान उत्पाद लक्षित श्रेणी से संबंधित है। यह पैटर्न आपको टेम्प्लेट को डुप्लिकेट किए बिना किस उत्पाद प्रकार पर ट्राई-ऑन विकल्प प्रदर्शित करना है, इस पर सर्जिकल नियंत्रण देता है।