WooCommerce के लिए एक 3 डी विन्यासकर्ता बनाना

यह पाठ प्रोग्रामिंग और लेआउट के उपयोग के बिना तीन आयामी विन्यासकर्ताओं के निर्माण के बारे में दो पिछले लेखों ( भाग 1 , भाग 2 ) की एक तार्किक निरंतरता है।

पिछले भाग में, हमने वर्डप्रेस के लिए Verge3D प्लगइन में शामिल मानक आदेश प्रणाली का उपयोग करके त्रि-आयामी भाग को एकीकृत करने के मुद्दे की जांच की। हालांकि, यह विकल्प सभी के लिए उपयुक्त नहीं है, क्योंकि इस प्लगइन की क्षमताएं काफी सीमित हैं। इसकी मदद से लोकप्रिय भुगतान प्रणालियों, जैसे पेपाल या 2 चेकआउट तक पहुंचना असंभव है, यह छूट, कूपन, स्टॉक और अन्य चीजों के साथ संचालित करना असंभव है जो सभी को लोकप्रिय ई-कॉमर्स सिस्टम में देखने के लिए उपयोग किया जाता है।



इस लेख में, हम आपको दिखाएंगे कि इन सीमाओं के आसपास कैसे जाएं और WooCommerce ऑनलाइन स्टोर में सीधे 3 डी विज़ुअलाइज़ेशन को एकीकृत करें। वैसे, आज यह सबसे लोकप्रिय ई-कॉमर्स प्रणाली है - आंकड़ों के अनुसार , यह सभी ऑनलाइन स्टोर के 28% में उपयोग किया जाता है।

परिणाम

यह हमारा स्टोर कैसा दिखेगा - इसे लाइव करने के लिए चित्र पर क्लिक करें।



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

योजना

वर्कफ़्लो विशेष रूप से मुश्किल नहीं है, लेकिन सिर्फ मामले में, हम जो करने जा रहे हैं उसकी एक छोटी योजना की रूपरेखा तैयार करते हैं:

• WooCommerce और Verge3D प्लगइन स्थापित करें।
• एक इंटरैक्टिव अनुप्रयोग बनाना और इसे साइट पर अपलोड करना।
• WooCommerce में कई उत्पाद विकल्प बनाएं।
• दृश्य संपादक में आवेदन का तर्क निर्धारित करना।

अब इन चरणों पर अधिक विस्तार से विचार करें।

स्थापना

WooCommerce और Verge3D प्लगइन्स मानक वर्डप्रेस निर्देशिका में उपलब्ध हैं। बस उन्हें ढूंढें, इंस्टॉल करें और सक्रिय करें।



WooCommerce सिस्टम स्थापित करते समय, विज़ार्ड आपके भविष्य के स्टोर के लिए कई मापदंडों को दर्ज करने की पेशकश करेगा, जबकि Verge3D अतिरिक्त सेटिंग्स नहीं करता है।

3 डी ग्राफिक्स

इस लेख के प्रयोजनों के लिए, हम Verge3D उदाहरणों में शामिल एक तैयार-निर्मित स्पिनर मॉडल का उपयोग करते हैं। वैसे, इस तरह के मॉडल को एक व्यक्ति द्वारा आसानी से बनाया जा सकता है जिसके पास 3 डी मैक्स या ब्लेंडर 3 डी मॉडलिंग कार्यक्रमों के साथ काम करने का बुनियादी कौशल है, या एक मुफ्त कैटलॉग या मॉडल स्टोर से डाउनलोड किया जाता है।



मॉडल के अतिरिक्त, हमें विज़ुअल पज़ल्स एडिटर में एप्लिकेशन के तर्क को निर्धारित करना होगा। विशेष रूप से, हमें रंग और आकार बदलने की आवश्यकता होगी, साथ ही क्लिक द्वारा एनीमेशन को चालू / बंद करना होगा। हम इसके बारे में नीचे बात करेंगे।

साइट पर 3D एप्लिकेशन अपलोड करें

अपनी वेबसाइट पर एप्लिकेशन अपलोड करने के लिए वर्डप्रेस टूलबार पर स्थित Verge3D-Applications टूल का उपयोग करें। नया जोड़ें बटन पर क्लिक करें:



अपने 3D एप्लिकेशन के लिए एक नाम दर्ज करें और अगला क्लिक करें। सेटिंग्स पृष्ठ पर, एप्लिकेशन फ़ाइलों के साथ फ़ोल्डर का चयन करें और "अपलोड करें" पर क्लिक करें:



डाउनलोड पूरा होने के बाद, एप्लिकेशन विंडो पर वापस जाएं और देखें कि spinner.html लिंक पर क्लिक करके सब कुछ कैसे काम करता है।



हमारा 3D स्पिनर कॉन्फ़िगरेशन एक नई विंडो में खुलेगा और पूरे पृष्ठ पर कब्जा कर लेगा। यह सामान्य है, क्योंकि हमने अभी तक WooCommerce के साथ मुख्य भाग के साथ एकीकरण नहीं किया है।

उत्पाद पृष्ठ पर 3D जोड़ना

हमारा अगला कदम WooCommerce स्टोर में सामानों की उबाऊ स्थिर छवियों को एक पूर्ण-आयामी मॉडल के साथ बदलना है। वैसे, यदि आपने उत्पाद स्वयं नहीं बनाया है, तो यह करने का समय है।

3D कनेक्शन को संपादन मोड में बनाया गया है:



"उत्पाद डेटा" अनुभाग में, Verge3D टैब पर जाएं और हमारे द्वारा पहले बनाए गए एप्लिकेशन का चयन करें:



सेटिंग्स को सहेजें और उत्पाद पृष्ठ पर जाएं। अब इसे चित्र के बजाय एक संवादात्मक अनुप्रयोग दिखाना चाहिए:

उत्पाद विकल्प जोड़ना

ग्राहकों को 3D उत्पाद प्रकार दिखाना पहले से ही एक बड़ी उपलब्धि है। लेकिन जब से हमने केवल 3 डी विज़ुअलाइज़ेशन नहीं, बल्कि एक पूर्ण विन्यासकर्ता के रूप में काम किया, हमें अपने त्रि-आयामी मॉडल को अनुकूलन योग्य बनाने की आवश्यकता होगी।

3D उत्पाद विन्यासकर्ता बनाने की क्षमता मानक WooCommerce फ़ंक्शन द्वारा प्रदान की जाती है जिसे चर उत्पाद कहा जाता है। हमारे स्टोर में, खरीदार तीन अलग-अलग आकारों और रंगों में से एक का उत्पाद चुनने में सक्षम होगा।

तो, चलो फूलों के साथ शुरू करते हैं! "उत्पाद डेटा" अनुभाग में, "चर उत्पाद" चुनें और फिर "गुण" टैब पर जाएं और "रंग" नामक एक नई विशेषता जोड़ें। 3 मान निर्दिष्ट करें - लाल, नीला और पीला - और "विविधताओं के लिए प्रयुक्त" की जाँच करें।



आकार के लिए एक और "आकार" विशेषता जोड़ें और सेटिंग्स को सहेजें:



अब WooCommerce में सभी संभावित उत्पाद विकल्प बनाएं:



कुल मिलाकर, 9 अलग-अलग उत्पाद बनाए जाएंगे: नीले छोटे, लाल छोटे, पीले बड़े और इतने पर। आपको केवल प्रत्येक विकल्प के लिए कीमतों को नीचे रखना होगा:



सेटिंग्स को सहेजें और स्टोर में उत्पाद की जांच करें!

3 डी विन्यासकर्ता बनाना

इस बिंदु पर, आपके पास WooCommerce चर उत्पाद है। हालाँकि, त्रि-आयामी भाग हमेशा समान रहता है, चाहे ग्राहक कोई भी विकल्प चुनें। चलो इसे ठीक करो!

पिछले चरण में, आपने देखा होगा कि आवेदन में 3 रंगीन गेंदें हैं जो स्पिनर के रंग बदलने के लिए काम करती हैं। जब आप इनमें से एक "बटन" दबाते हैं, तो मॉडल की सामग्री बदल जाती है। यह सरल पहेलियाँ ब्लॉक का उपयोग करके किया जाता है, दृश्य तर्क संपादक को Verge3D के साथ शामिल किया गया है:



अब, इन तीन क्षेत्रों के बजाय, हम चयन मेनू का उपयोग करेंगे, जिसने उत्पाद पृष्ठ पर स्वचालित रूप से WooCommerce जोड़ा। इस मामले में, तार्किक ब्लॉक कुछ अलग दिखेंगे:



चित्र दिखाता है कि जब ग्राहक एक रंग का चयन करता है, तो उसी नाम वाली सामग्री को मॉडल को सौंपा जाएगा - लाल, नीला या पीला।

और यहाँ मॉडल का आकार बदलने के लिए तर्क दिया गया है:



वह सब है! तर्क बनाने के बाद, आप बस साइट पर एप्लिकेशन अपलोड करते हैं, जैसा कि हमने ऊपर किया था, और उत्पाद पृष्ठ को फिर से लोड करें। अब हमारे पास एनीमेशन, आकार और रंगों की पसंद के साथ एक पूर्ण-विन्यासकर्ता है।

प्रोग्रामिंग और लेआउट के बिना त्रि-आयामी विन्यासकर्ता बनाने पर पाठ की त्रयी पूरी हो गई है। यदि कुछ अस्पष्ट रहता है, या अन्य प्रश्न होंगे, तो टिप्पणियों में चर्चा करें। यह भी लिखें कि आप वेब पर 3 डी का उपयोग करने के बाद के ट्यूटोरियल में क्या देखना चाहेंगे।