अपनी वेबसाइट पर Alter Product एम्बेड करें: WordPress + WooCommerce या API

प्लगइन WordPress और WooCommerce के लिए तैयार सुविधाएँ देता है। API से आप किसी अन्य प्लेटफ़ॉर्म, हेडलेस ऐप या मौजूदा ऑर्डर प्रबंधन सिस्टम के साथ अपना कनेक्शन बना सकते हैं।

वेबसाइट पर ग्राहक को जो करना है, उसके अनुसार टूल चुनें। डिज़ाइन और वैयक्तिकरण के नियम पहले से Designer में तैयार करें।

अपनी वेबसाइट पर Alter Product एम्बेड करने के लिए सक्रिय Business सदस्यता या इस सुविधा वाला उच्चतर प्लान चाहिए। यह WordPress + WooCommerce प्लगइन और अपने API इंटीग्रेशन, दोनों पर लागू है। Personal FREE और Personal प्लान में आपके स्टोर पर एम्बेडिंग शामिल नहीं है।

प्लगइन वाले तरीके के लिए WordPress में WooCommerce इंस्टॉल और सक्रिय करें तथा Alter Product खाता तैयार रखें। फ़ाइलें अपनी होस्टिंग पर रखने से आवश्यक सदस्यता की जगह नहीं ली जा सकती: Alter Product ऐप उपलब्ध कराता है और उसे चलाने की अनुमति देता है।

Alter Product स्टोर के पेज पर एम्बेड किए गए iframe में चलता है। यदि पेज सुरक्षित संदर्भ नहीं देता, तो ब्राउज़र ऐप द्वारा इस्तेमाल की जाने वाली कुछ सुविधाओं की पहुँच सीमित कर देते हैं। HTTPS कनेक्शन को एन्क्रिप्ट करता है और मान्य प्रमाणपत्र से ब्राउज़र डोमेन की पुष्टि करता है।

ब्राउज़र iframe को रखने वाले पेज की भी जाँच करता है। इसलिए स्टोर HTTP पर चलता हो, तो केवल Alter Product ऐप का HTTPS पता पर्याप्त नहीं है। जिस पेज में आप टूल एम्बेड करते हैं, उस पर भी HTTPS होना चाहिए। यह एम्बेड किए गए ऐप के लिए ब्राउज़र सुरक्षा नियमों के कारण आवश्यक है।

स्वचालित कनेक्शन आपको Alter Product खाते के प्राधिकरण और स्टोर सेटअप से गुज़ारता है। इस तरीके में API कुंजियाँ मैन्युअल रूप से स्थानांतरित नहीं करनी पड़तीं।

WooCommerce उत्पाद संपादक में Alter Product टैब खोलें। नया डिज़ाइन बनाएँ या मौजूदा डिज़ाइन चुनें, फिर Designer खोलें। इस उत्पाद के लिए प्रिंट, उपलब्ध विकल्प और प्रिंट क्षेत्र सेट करें।

प्लगइन मॉडल, लाइब्रेरी, डिज़ाइन, mockup और ऑर्डर की फ़ाइलें WordPress स्टोरेज में रखता है। जनरेटर प्रोजेक्ट और उनके संशोधन का डेटा भी इसी इंस्टॉलेशन के डेटाबेस में सहेजा जाता है।

अपने संसाधन जोड़ें और Alter Product से चुने हुए एसेट आयात करें। डाउनलोड के बाद आप स्थानीय कॉपी इस्तेमाल करते हैं। आयात करना, अपडेट जाँचना और नए संस्करण डाउनलोड करना अलग-अलग क्रियाएँ हैं।

उचित अनुमतियों के साथ WordPress पैनल में लाइब्रेरी और डिज़ाइन संभालें। ग्राहक आपके स्टोर में उपलब्ध टूल और सामग्री इस्तेमाल करते हैं; उन्हें लाइब्रेरी के प्रशासनिक संपादन की पहुँच नहीं मिलती।

आप तय करते हैं कि उत्पाद को कौन-सा डिज़ाइन असाइन करना है, एम्बेड किया गया टूल कहाँ दिखाना है और कौन-से वैयक्तिकरण विकल्प देने हैं। एम्बेड किए गए Customizer की लाइब्रेरी में उपलब्ध एसेट भी जाँचें। डिज़ाइन असाइन करने पर उत्पाद पेज में एम्बेडिंग डिफ़ॉल्ट रूप से सक्रिय हो सकती है; उत्पाद की सेटिंग में उसका प्रदर्शन नियंत्रित करें।

एसेट आपके पास रहते हैं और टूल का इंटरफ़ेस Alter Product से iframe में लोड होता है। Alter Product सेवा खाते की पहुँच, प्लान और सेशन जाँचती है तथा आयात के लिए कैटलॉग देती है। इंटीग्रेशन को इस सेवा से कनेक्शन चाहिए।

बैकअप में डेटाबेस, फ़ाइल डायरेक्टरी और प्लगइन का एन्क्रिप्टेड डेटा पढ़ने के लिए आवश्यक WordPress कुंजियाँ तथा salt मान सुरक्षित रखें। इससे आप न केवल दिखाई देने वाले ग्राफ़िक्स, बल्कि आगे काम जारी रखने के लिए आवश्यक डेटा भी बहाल कर सकते हैं।

स्टोर के लेआउट के अनुसार प्रदर्शन चुनें: उत्पाद पेज पर टूल, समर्पित पेज पर ले जाने वाला बटन या उपलब्ध ब्लॉक और shortcode से एम्बेडिंग। Viewer, Configurator और Customizer की अलग भूमिकाएँ हैं; सभी एक साथ देना आवश्यक नहीं है।

उत्पाद की प्रस्तुति अपने ब्रांड के अनुसार ढालें। प्लगइन में स्थानीय बैकग्राउंड, लोगो और एम्बेड किए गए टूल के रूप की सेटिंग संभालें। अलग-अलग विकल्पों की उपलब्धता प्लान पर निर्भर है।

ग्राहक वेरिएंट चुनकर वैयक्तिकरण तैयार करता है। प्लगइन कॉन्फ़िगरेशन और सहेजे गए डिज़ाइन को कार्ट आइटम और बाद में WooCommerce ऑर्डर से जोड़ता है। उपलब्ध mockup ऑर्डर किए गए प्रिंट को पहचानने में मदद करते हैं।

प्लगइन सेटिंग में चुने गए प्रदाता का कनेक्शन बनाएँ। फिर उत्पाद, वेरिएंट और प्रिंट स्थानों को प्रदाता के कैटलॉग से जोड़ें, फ़ाइलें तैयार करें और WooCommerce से ऑर्डर पूर्ति के लिए भेजें।

अपने AI प्रदाता का कनेक्शन सेट करें और डिज़ाइन पर काम करते हुए उपलब्ध इमेज जनरेशन या सुधार सुविधाएँ इस्तेमाल करें। प्लगइन के अनुरोध WordPress से चुने गए प्रदाता तक जाते हैं और उस प्रदाता के आपके खाते पर बिल किए जाते हैं।

एम्बेड किया गया टूल शुरू होने पर इंटीग्रेशन को कम अवधि का token, यानी सेशन कुंजी मिलती है। खाते की स्थायी एक्सेस जानकारी सर्वर पर रहती है। ग्राहक को कुंजियाँ कॉपी करने या मालिक के Alter Product खाते में साइन इन करने की ज़रूरत नहीं है।

वर्तमान कार्यान्वयन में token की डिफ़ॉल्ट वैधता 15 मिनट है। सर्वर दूसरी अवधि तय कर सकता है, इसलिए इंटीग्रेशन प्राप्त सेशन का समाप्ति समय इस्तेमाल करता है। token का दोबारा उपयोग उसकी वैधता नहीं बढ़ाता। उसकी अवधि समाप्त होने के बाद अगली अनुमति के लिए नया सेशन आवश्यक है।

यह टूल और उसके पास उपयुक्त, वैध सेशन मौजूद होने पर निर्भर करता है। प्लगइन सभी आगंतुकों और सभी उत्पादों के लिए एक साझा सेशन इस्तेमाल नहीं करता। नीचे दिए नियम उसके वर्तमान व्यवहार का वर्णन करते हैं।

API से नया token सफलतापूर्वक जारी होने पर काउंटर बढ़ता है। पहले से जारी वैध token का उपयोग नया token जारी करना नहीं है। इसलिए प्लान चुनते समय केवल ऑर्डर या आगंतुकों की संख्या नहीं, बल्कि टूल शुरू होने, रिफ़्रेश और दोबारा खुलने को भी ध्यान में रखें।

एक ही स्टोर के एम्बेड किए गए टूल मासिक सेशन सीमा साझा करते हैं। हर स्टोर का काउंटर UTC समय के कैलेंडर महीनों के अनुसार अलग रखा जाता है। WordPress पैनल में एम्बेड किए गए Designer और मॉडल जनरेटर के नए सेशन भी यह काउंटर बढ़ाते हैं। आयात API से केवल उपलब्ध मॉडल डाउनलोड करने से संपादक सेशन नहीं खुलता।

सीमा पूरी होने पर सिस्टम आगे सेशन जारी करने से मना करता है। यह सदस्यता की उपयोग सीमा है; वर्तमान उपलब्ध संख्या अपने प्लान में जाँचें।

Public API में HTTP अनुरोध और JSON डेटा इस्तेमाल होते हैं। इसलिए अपने बैकएंड की भाषा और वातावरण में इंटीग्रेशन लिख सकते हैं। Alter Product टूल एम्बेड करने के लिए स्टोर को WordPress पर दोबारा बनाना आवश्यक नहीं है।

नीचे सर्वर पर कनेक्शन बनाने की तकनीकों के उदाहरण हैं। प्रत्येक में समान चरण लागू करते हैं: API अनुमति, टूल सेशन बनाना और उत्पाद, कार्ट तथा ऑर्डर को अपने सिस्टम से जोड़ना।

ब्राउज़र में React, Vue, Angular या साधारण HTML और JavaScript इस्तेमाल कर सकते हैं। संचार लागू करने के लिए TypeScript भी उपयुक्त है। पेज iframe एम्बेड करता है, postMessage इवेंट संभालता है और आपके बैकएंड से जुड़ता है।

फ्रंटएंड पेज का रूप और कार्ट की प्रतिक्रियाएँ संभालता है, जबकि बैकएंड प्रमाणित Public API कॉल करता है। Next.js जैसे दोनों परतों को जोड़ने वाले फ़्रेमवर्क में स्थायी कुंजियों का प्रबंधन और सेशन बनाना केवल सर्वर वाले हिस्से में रखें।

अपना checkout, भुगतान सिस्टम, CMS और ऑर्डर पूर्ति प्रक्रिया बनाए रख सकते हैं। कार्यान्वयन के दौरान इन्हें डिज़ाइन डेटा और चुने गए Alter Product टूल के इवेंट से जोड़ते हैं।

Alter Product 3D टूल, डिज़ाइन डेटा और सेशन व्यवस्था देता है। आपका बैकएंड इन्हें उत्पाद, ग्राहक खाते, कार्ट और ऑर्डर प्रबंधन से जोड़ता है। ब्राउज़र में Alter Product एक्सेस जानकारी दिखाए बिना फ्रंटएंड के लिए मध्यवर्ती endpoint बना सकते हैं।

पहले एक उत्पाद के लिए कनेक्शन और एम्बेडिंग सेशन चालू करें। फिर चुने गए टूल के अनुसार कॉन्फ़िगरेशन, डिज़ाइन सहेजने और ऑर्डर प्रबंधन जोड़ें।

एम्बेडिंग निर्देशों में पैरामीटर और उदाहरण हैं। postMessage अध्याय पेज से संचार समझाते हैं और API दस्तावेज़ बैकएंड के ऑपरेशन बताते हैं।

एक उत्पाद तैयार करने के बाद पूरी प्रक्रिया से गुज़रें। उसके बाद ही सत्यापित सेटअप अन्य कैटलॉग उत्पादों पर लागू करें।