Magento 2 - चेकआउट करने के लिए एक कस्टम फ़ील्ड कैसे जोड़ें और फिर इसे भेजें


49

सभी ट्यूटोरियल केवल एक फ़ील्ड जोड़कर कवर कर रहे हैं, लेकिन इस दायर की सेविंग वैल्यू #mindblown को छोड़ दी गई है। मुझे नहीं पता क्यों, यह किसी भी क्षेत्र या फॉर्म को जोड़ने का सबसे महत्वपूर्ण हिस्सा है।

मैंने Magento डॉक्स का पालन करने की कोशिश की , लेकिन ... यह बेकार है।

परीक्षण के प्रयोजनों के लिए, मैं शिपिंग पते में एक और फ़ील्ड जोड़ने की कोशिश करता हूं, बस कस्टम स्कोप, कस्टम डेटा सेट, कस्टम डेटा प्रदाता और अन्य अनएक्सपर्टेड सामान को अनदेखा करने के लिए, जो मेरे लिए बहुत अजीब लगता है।

मुझे नहीं पता कि उस फॉर्म का क्या अर्थ है "स्थिर" या "गतिशील"। मेरे लिए सभी चेकआउट फॉर्म नॉकआउटJS टेम्प्लेट के शीर्ष पर गतिशील रूप से बनाए गए हैं, लेकिन ... जब मैं "स्थिर" तरीके से कोशिश करता हूं, तो मैं यहां इनपुट जोड़ने में सक्षम हूं (इसलिए यह स्थिर रूप है या नहीं?)।

पहले मैं डिबग करने की कोशिश करता हूं कि नॉकआउट वेधशालाएं केवल पार्सिंग और डेटा भेजने के दौरान मेरे खेतों की उपेक्षा क्यों करती हैं। मैंने पाया कि मेरे खेतों में खाली nameपैरामीटर है, लेकिन मैं इस मुद्दे को ठीक करने का एक तरीका नहीं संभाल सकता। IMO यह inputNameपैरामीटर के माध्यम से UI घटक रेंडरर को पास किया जाना चाहिए , जैसे कि कोई अन्य विकल्प disabled, placeholderआदि (अन्य पैरामीटर ठीक काम करता है, मैंने अपने XML से उत्पन्न कॉन्फ़िगरेशन को चेकआउट मॉड्यूल इनिशियलाइज़ेशन के लिए चेक किया और मेरे लिए अच्छा लगता है)

दूसरा मैंने प्लगइन बनाने के साथ "डायनेमिक" तरीके का उपयोग करने की कोशिश की LayoutProcessorऔर बिल्कुल उसी डेटा को पारित किया ... और अब मेरे पास nameएस के साथ फ़ील्ड हैं , लेकिन भेजने में अभी भी काम नहीं करता है।

जेएस में खुदाई करने के बाद मैंने पाया कि इस अनुरोध को तैयार करना module-checkout/view/frontend/web/js/model/shipping-save-processor/default.jsफ़ाइल में बनाए रखा गया है, जो इस बात पर निर्भर करता है module-checkout/view/frontend/web/js/model/quote.jsकि नॉकआउट वेधशालाएं कहां परिभाषित / बनाई गई हैं।

किसी तरह module-checkout/view/frontend/web/js/model/address-converter.jsइस वेधशाला को अपडेट करें और इस पर निर्भर करता है module-checkout/view/frontend/web/js/model/new-customer-address.js, जहां मुझे आखिरकार कुछ दिलचस्प कॉन्फ़िगरेशन विकल्प मिले - सभी एड्रेस फ़ील्ड की सूची।

जब मैं अपने खेतों को यहां जोड़ देता हूं, तो लिपियां पार्स करना शुरू कर देती हैं और उन्हें भेजना शुरू कर देती हैं, ओएफसी मुझे 500, बी / सी बैकेंड उन्हें नहीं पहचानता है ... (मत पूछो, मैं बैकेंड देव नहीं हूं)

तो यहाँ मेरे प्रश्न आते हैं:

  • इस प्रकार के अनुकूलन को संभालने का यह एक सही तरीका है? (b / c मेरे लिए अजीब लगता है)
  • नए पते से संबंधित क्षेत्रों के मूल्यों को कैसे भेजें? मैंने कहीं भी समान कॉन्फ़िगरेशन नहीं देखा। मेरे मामले में मैं ऑर्डर कमेंट (textarea) और चालान अनुरोध (चेकबॉक्स) भेजना चाहता हूं। दोनों को पते के रूप में सहेजा नहीं जाना चाहिए, b / c कुछ उपयोगकर्ता भविष्य में उपयोग के लिए इस पते को सहेजना चाहते हैं।
  • क्या "स्थिर" और "गतिशील" रूपों या कुछ उदाहरणों / तुलनाओं के बारे में कोई दस्तावेज है? यह इस तरह से सोचने योग्य है?

अतिरिक्त अस्तित्वगत प्रश्न:

  • यह इतना असंगत क्यों है? मुझे XML / PHP फ़ाइलों में टन के मापदंडों को क्यों परिभाषित करना है, जबकि मैगनेटो केवल एक इनपुट प्रस्तुत कर सकता है और फिर मुझे अपने दम पर सब कुछ संभालना होगा?

3
Magento Devdocs ने हाल ही में UI घटकों का उपयोग करने के बारे में कुछ नए डॉक्स जोड़े हैं। हम वास्तव में एक पूरी नई गाइड लिखने की प्रक्रिया में हैं ... लेकिन अभी भी एक रास्ता है। कृपया devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html पर एक नज़र डालें । दुर्भाग्य से, हमने अभी तक डेटा स्रोतों पर विषयों को पूरा नहीं किया है, जो कि ऐसा लगता है जैसे आपको ज्यादातर ज़रूरत है। UI घटक का उपयोग करके कॉन्फ़िगरेशन प्रवाह पर एक विषय है, जो मदद कर सकता है। मैं और उत्तर खोजने पर काम करूँगा।
टैनबेरी

चेकआउट पर एक साधारण क्षेत्र को जोड़ना एक बुरा सपना क्यों है? मैं अभी नहीं समझ सकता। और लगभग सब कुछ इतना कठिन है
कायरलेब्स्ट

@slayerbleast दुनिया बदल रही है, मरने में सर्वर-साइड प्रतिपादन। तो यह अलग है, बिना किसी कारण के कठिन नहीं है।
इग्लोकोज़ेक

जवाबों:


55

मैं आपके प्रश्न का उत्तर देने का प्रयास करूंगा।

  1. नहीं । यह कस्टम विशेषताओं को शिपिंग एड्रेस फॉर्म में जोड़ने का एक सही तरीका नहीं है। आपको संपादित करने की आवश्यकता नहीं है new-customer-address.js। दरअसल, यह जेएस फाइल सभी पूर्वनिर्धारित पते विशेषताओं को सूचीबद्ध करती है और संबंधित बैकएंड इंटरफेस से मेल खाती है \Magento\Quote\Api\Data\AddressInterfaceलेकिन मैगेंटो बैकएंड / फ्रंटेंड घटकों के संशोधन के बिना किसी भी कस्टम विशेषताओं को पारित करने की क्षमता प्रदान करता है ।

    उल्लेखित जेएस घटक के पास customAttributesसंपत्ति है। यदि आपकी $dataScopePrefix' shippindAddress.custom_attributes' है तो आपकी कस्टम विशेषताएँ अपने आप नियंत्रित हो जाएंगी ।

  2. अगर मैंने आपके प्रश्न को सही ढंग से समझा, तो आपके पास डेटा है जो ग्राहक पते का हिस्सा नहीं है, लेकिन आपको इसे बैकएंड पर भी भेजने की आवश्यकता है। इस प्रश्न का उत्तर है:

    यह निर्भर करता है । उदाहरण के लिए, आप निम्नलिखित दृष्टिकोण का चयन कर सकते हैं: चेकआउट पृष्ठ पर कस्टम फ़ॉर्म जोड़ें जिसमें आपके सभी अतिरिक्त फ़ील्ड शामिल हों (like comment, invoice request etc) , JS लॉजिक जोड़ें जो कुछ घटनाओं के आधार पर इस फ़ॉर्म को संभालेंगे, और एक कस्टम सेवा प्रदान करेंगे जो फ्रंटएंड और स्टोर से डेटा प्राप्त करेंगे। यह भविष्य के उपयोग के लिए कहीं है।

  3. चेकआउट से संबंधित सभी आधिकारिक दस्तावेज http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html पर स्थित है । स्थिर शब्द उन रूपों को संदर्भित करता है जहां सभी फ़ील्ड पहले से ही ज्ञात / पूर्वनिर्धारित हैं (उदाहरण के लिए: फ़ॉर्म में हमेशा पूर्वनिर्धारित लेबल के साथ 2 पाठ फ़ील्ड होंगे) और बैकएंड में कुछ सेटिंग्स के आधार पर बदल नहीं सकते हैं।

    इस तरह के रूपों का उपयोग करके घोषित किया जा सकता है layout XML configuration। दूसरी ओर, टर्म डायनेमिक उन रूपों को संदर्भित करता है , जिनका फील्ड सेट बदल सकता है (उदाहरण के लिए: चेकआउट फॉर्म में कॉन्फ़िगरेशन के आधार पर अधिक / कम फ़ील्ड हो सकते हैं)।

    इस मामले में ऐसे फॉर्म को घोषित करने का एकमात्र तरीका LayoutProcessorप्लगइन का उपयोग करना है ।

  4. :) Magento जितना संभव हो उतना उपयोग मामलों को कवर करने की कोशिश करता है जो Magento के उपयोग / अनुकूलन के दौरान व्यापारियों के लिए महत्वपूर्ण हो सकते हैं। कभी-कभी यह स्थिति की ओर जाता है जब कुछ सरल उपयोग के मामले अधिक जटिल हो जाते हैं।

उम्मीद है की यह मदद करेगा।

================================================== =======================

ठीक है ... कुछ कोड लिखते हैं;)

  1. PHP कोड जो लेआउटप्रोसेसर में अतिरिक्त फ़ील्ड सम्मिलित करता है

========

/**
 * @author aakimov
 */
$customAttributeCode = 'custom_field';
$customField = [
    'component' => 'Magento_Ui/js/form/element/abstract',
    'config' => [
        // customScope is used to group elements within a single form (e.g. they can be validated separately)
        'customScope' => 'shippingAddress.custom_attributes',
        'customEntry' => null,
        'template' => 'ui/form/field',
        'elementTmpl' => 'ui/form/element/input',
        'tooltip' => [
            'description' => 'Yes, this works. I tested it. Sacrificed my lunch break but verified this approach.',
        ],
    ],
    'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode,
    'label' => 'Custom Attribute',
    'provider' => 'checkoutProvider',
    'sortOrder' => 0,
    'validation' => [
       'required-entry' => true
    ],
    'options' => [],
    'filterBy' => null,
    'customEntry' => null,
    'visible' => true,
];

$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'][$customAttributeCode] = $customField;

return $jsLayout;

जैसा कि मैंने पहले ही उल्लेख किया है, यह आपके क्षेत्र को customAttributesजेएस एड्रेस ऑब्जेक्ट की संपत्ति में जोड़ देगा । यह संपत्ति कस्टम EAV पते विशेषताओं को समाहित करने के लिए डिज़ाइन की गई थी और यह \Magento\Quote\Model\Quote\Address\CustomAttributeListInterface::getAttributesविधि से संबंधित है ।

ऊपर दिए गए कोड स्वचालित रूप से फ्रंटेंड पर स्थानीय भंडारण दृढ़ता को संभाल लेंगे। आप checkoutData.getShippingAddressFromData()(जहाँ checkoutDataहै Magento_Checkout/js/checkout-data) का उपयोग करके स्थानीय भंडारण से अपने क्षेत्र का मूल्य प्राप्त कर सकते हैं ।

  1. 'Magento_Checkout / js / क्रिया / सेट-शिपिंग-जानकारी' के व्यवहार को बदलने के लिए मिक्सिन जोड़ें (यह घटक शिपिंग और बिलिंग चेकआउट चरणों के बीच डेटा सबमिशन के लिए ज़िम्मेदार है)

========

2.1। सृजन करनाyour_module_name/view/frontend/requirejs-config.js


/**
 * @author aakimov
 */
var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/action/set-shipping-information': {
                '<your_module_name>/js/action/set-shipping-information-mixin': true
            }
        }
    }
};

2.2। अपना_मॉडल_नाम / दृश्य / दृश्य / वेब / js / क्रिया / सेट-शिपिंग-जानकारी-mixin.ds बनाएं


/**
 * @author aakimov
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define([
    'jquery',
    'mage/utils/wrapper',
    'Magento_Checkout/js/model/quote'
], function ($, wrapper, quote) {
    'use strict';

    return function (setShippingInformationAction) {

        return wrapper.wrap(setShippingInformationAction, function (originalAction) {
            var shippingAddress = quote.shippingAddress();
            if (shippingAddress['extension_attributes'] === undefined) {
                shippingAddress['extension_attributes'] = {};
            }

            // you can extract value of extension attribute from any place (in this example I use customAttributes approach)
            shippingAddress['extension_attributes']['custom_field'] = shippingAddress.customAttributes['custom_field'];
            // pass execution to original action ('Magento_Checkout/js/action/set-shipping-information')
            return originalAction();
        });
    };
});
  1. अपना_मॉड्यूल_नाम / आदि / एक्सटेंशन_एट्टीजे.एक्सएमएल बनाएं

========

<?xml version="1.0"?>
<!--
/**
 * @author aakimov
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
    <extension_attributes for="Magento\Quote\Api\Data\AddressInterface">
        <attribute code="custom_field" type="string" />
    </extension_attributes>
</config>

यह बैकएंड पक्ष पर मॉडल को संबोधित करने के लिए एक एक्सटेंशन विशेषता जोड़ देगा। विस्तार गुण Magento द्वारा प्रदान किए गए विस्तार बिंदुओं में से एक हैं। अपने डेटा का उपयोग बैकएंड पर करने के लिए आप कर सकते हैं:

// Magento will generate interface that includes your custom attribute
$value = $address->getExtensionAttributes()->getCustomField();

आशा है, यह मदद करता है और आधिकारिक प्रलेखन में जोड़ा जाएगा।


उत्तर के लिए धन्यवाद एलेक्स! मैंने कोशिश की custom_attributes, लेकिन यह मेरे लिए काम नहीं करता है। यह किस तरह से लेआउटप्रोसेसर का एक हिस्सा है ।php` जैसा दिखता है - gist.github.com/Igloczek/eaf4d2d7a0a04bd950110296ec3f7727 लेकिन shipping-info या लोकलस्टोरcheckout-data में यह डेटा बिल्कुल नहीं होता है।
igloczek

कृपया मेरा अद्यतन उत्तर ऊपर देखें;)
आकिमोव

4
इस विषय पर आधिकारिक डॉक्टर पहले से ही उपलब्ध है! devdocs.magento.com/guides/v2.1/howdoi/checkout/…
एलेक्स

1
क्या ऑर्डर के खिलाफ मूल्यों को सहेजने के लिए एक अतिरिक्त कदम की आवश्यकता है?
एलेक्स हैडली

मुझे लगता है कि अगर आपके पास एक स्थिर रूप है, तो इस उदाहरण के रूप में XML के माध्यम से लेआउटप्रोसेसर में फ़ील्ड सम्मिलित करना बेहतर है: devdocs.magento.com/guides/v2.1/howdoi/checkout/…
cjohansson

-1

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


4
यह गलत सलाह है, बी / सी चेकआउट टेम्प्लेट शामिल नहीं है और इसमें मैन्युअल रूप से जोड़े गए इनपुट फ़ील्ड शामिल नहीं होने चाहिए। हमें चयनित क्षेत्रों में टेम्पलेट रेंडर करने के लिए KO का उपयोग करना होगा (सब कुछ UI घटकों का उपयोग करके बनाया गया है)
igloczek

आप दृश्यपटल में कस्टम फ़ील्ड यूआई-घटकों को जोड़ने का एक उदाहरण साझा कर सकते हैं?
मर्तुवना

जैसा कि @igloczek का कहना है कि यह गलत सलाह है, क्योंकि चेकआउट टेम्प्लेट में मैन्युअल रूप से जोड़े गए इनपुट फ़ील्ड नहीं होने चाहिए।
डायजेवाट्सन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.