ম্যাজেন্টো 2 - কীভাবে চেকআউটে একটি কাস্টম ফিল্ড যুক্ত করা যায় এবং তারপরে এটি প্রেরণ করা


49

সমস্ত টিউটোরিয়াল কেবল একটি ক্ষেত্র যুক্ত করে কভার করছে তবে এই ফাইল করা ফাইলের সংরক্ষণের মানটি # মাইন্ডব্লাউন এড়িয়ে গেছে। কেন জানি না, এটি কোনও ক্ষেত্র বা ফর্ম যুক্ত করার সবচেয়ে গুরুত্বপূর্ণ অংশ important

আমি ম্যাজেন্টো ডক্স অনুসরণ করার চেষ্টা করেছি , কিন্তু ... এটি সফল হয়।

পরীক্ষার উদ্দেশ্যে আমি শিপিং ঠিকানার সাথে অন্য ক্ষেত্রগুলি যুক্ত করার চেষ্টা করি, কেবলমাত্র কাস্টম স্কোপগুলি, কাস্টম ডেটা সেটগুলি, কাস্টম ডেটা সরবরাহকারী এবং অন্যান্য নথিভুক্ত সামগ্রীকে উপেক্ষা করার জন্য, যা আমার কাছে খুব অদ্ভুত দেখাচ্ছে।

ফর্মটি "স্ট্যাটিক" বা "ডায়নামিক" এর অর্থ কী তা আমার কোনও ধারণা নেই। আমার জন্য সমস্ত চেকআউট ফর্মগুলি নকআউটজেএস টেম্পলেটগুলির শীর্ষে গতিশীলভাবে নির্মিত হয়, কিন্তু ... আমি যখন "স্থিতিশীল" উপায়ে চেষ্টা করি তখন আমি এখানে ইনপুট যুক্ত করতে সক্ষম হয়েছি (সুতরাং এটি একটি স্ট্যাটিক ফর্ম বা না?)।

প্রথমে আমি ডিবাগ করার চেষ্টা করি কেন নকআউট পর্যবেক্ষণযোগ্যরা ডেটা পার্সিং এবং প্রেরণের সময় কেবল আমার ক্ষেত্রগুলিকে উপেক্ষা করেন। আমি দেখতে পেয়েছি যে আমার ফিল্ডগুলিতে খালি nameপ্যারামিটার রয়েছে তবে আমি এই সমস্যাটি সমাধানের কোনও উপায় পরিচালনা করতে পারি না। আইএমও এটি inputNameপ্যারামিটারের মাধ্যমে ইউআই উপাদান রেন্ডারারের কাছে পৌঁছে দেওয়া উচিত , যেমন অন্য কোনও বিকল্পের মতো disabled, placeholderইত্যাদি (অন্যান্য পরামিতিগুলি সূক্ষ্মভাবে কাজ করে, আমি মডিউল শুরুর জন্য আমার এক্সএমএল থেকে তৈরি কনফিগারেশনটি পরীক্ষা করে দেখেছি এবং আমার জন্য ভাল দেখাচ্ছে)

দ্বিতীয় আমি 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, যেখানে আমি অবশেষে কিছু আকর্ষণীয় কনফিগারেশন বিকল্প পেয়েছি - সমস্ত ঠিকানার ক্ষেত্রের তালিকা।

আমি যখন এখানে আমার ক্ষেত্রগুলি যুক্ত করি, স্ক্রিপ্টগুলি পার্সিং এবং প্রেরণ শুরু করে, OFC আমি 500 পেয়েছি, খ / সি ব্যাকএন্ড তাদের চিনতে পারে না ... (জিজ্ঞাসা করবেন না, আমি ব্যাকএন্ড দেব নই)

সুতরাং এখানে আমার প্রশ্ন আসে:

  • এই জাতীয় কাস্টমাইজেশন পরিচালনা করার জন্য এটি একটি সঠিক উপায়? (খ / সি আমার জন্য অদ্ভুত দেখাচ্ছে)
  • নতুন ঠিকানার সাথে সম্পর্কিত নয় ক্ষেত্রগুলির মান কীভাবে প্রেরণ করবেন? আমি কোথাও অনুরূপ কনফিগারেশন দেখতে পাইনি। আমার ক্ষেত্রে আমি অর্ডার মন্তব্য (টেক্সারিয়া) এবং চালানের অনুরোধ (চেকবক্স) প্রেরণ করতে চাই। উভয়ই ঠিকানা হিসাবে সংরক্ষণ করা উচিত নয়, খ / সি কিছু ব্যবহারকারী ভবিষ্যতের ব্যবহারের জন্য এই ঠিকানাটি সংরক্ষণ করতে চাইতে পারে।
  • "স্থিতিশীল" এবং "গতিশীল" ফর্ম বা কিছু উদাহরণ / তুলনা সম্পর্কে কোনও ডকুমেন্টেশন আছে কি? এটি এইভাবে চিন্তা করা মূল্যবান?

অতিরিক্ত অস্তিত্বমূলক প্রশ্ন:

  • কেন এত বেমানান? আমাকে কেন এক্সএমএল / পিএইচপি ফাইলগুলিতে টন পরামিতিগুলি সংজ্ঞায়িত করতে হবে, যখন ম্যাজেন্টো মোটামুটি কেবল একটি ইনপুট সরবরাহ করতে পারে এবং তারপরে আমাকে নিজেরাই সবকিছু পরিচালনা করতে হবে?

3
ম্যাজেন্টো ডেভডোকস সম্প্রতি ইউআই উপাদান ব্যবহার করার বিষয়ে কিছু নতুন ডক্স যুক্ত করেছে। আমরা আসলে একটি সম্পূর্ণ নতুন গাইড লেখার প্রক্রিয়াধীন ... তবে এখনও যাওয়ার উপায় আছে। দয়া করে একবার দেখুন devdocs.magento.com/guides/v2.1/ui_comp_guide/bk-ui_comps.html । দুর্ভাগ্যক্রমে, আমরা এখনও ডেটা উত্সগুলিতে বিষয়গুলি সম্পূর্ণ করতে পারি নি, এটি আপনার বেশিরভাগের মতোই মনে হচ্ছে। ইউআই উপাদানগুলি ব্যবহার করে কনফিগারেশন প্রবাহে একটি বিষয় রয়েছে যা সাহায্য করতে পারে। আমি আরও উত্তর সন্ধানে কাজ করব।
ট্যানবেরি

চেকআউটে একটি সাধারণ ক্ষেত্র যুক্ত করে কেন এটি দুঃস্বপ্ন হতে হবে? আমি শুধু বুঝতে পারি না। এবং প্রায় সবকিছুই সেই কঠিন
স্লেয়ারলিস্টেস্ট

@ স্লেয়ারব্লাস্ট ওয়ার্ল্ড পরিবর্তন হচ্ছে, মরতে সার্ভার-সাইড রেন্ডারিং। সুতরাং এটি ভিন্ন, কোনও কারণ ছাড়াই শক্ত নয়।
igloczek

উত্তর:


55

আমি আপনার প্রশ্নের উত্তর দেওয়ার চেষ্টা করব।

  1. কোন । শিপিং ঠিকানা ফর্মটিতে কাস্টম বৈশিষ্ট্য যুক্ত করার এটি কোনও সঠিক উপায় নয়। আপনার সম্পাদনা করার দরকার নেই new-customer-address.js। প্রকৃতপক্ষে, এই জেএস ফাইলটি সমস্ত পূর্বনির্ধারিত ঠিকানা বৈশিষ্ট্যগুলি এবং সম্পর্কিত ব্যাকএন্ড ইন্টারফেসের সাথে মেলে \Magento\Quote\Api\Data\AddressInterfaceতবে ম্যাজেন্টো ব্যাকএন্ড / ফ্রন্টএন্ড উপাদানগুলি পরিবর্তন না করে ব্যাকএন্ডে কোনও কাস্টম বৈশিষ্ট্যগুলি পাস করার ক্ষমতা সরবরাহ করে ।

    উল্লিখিত জেএস উপাদানটির customAttributesসম্পত্তি রয়েছে। আপনার কাস্টম বৈশিষ্ট্যাবলী যদি $dataScopePrefix' shippindAddress.custom_attributes' হয় তবে তা স্বয়ংক্রিয়ভাবে পরিচালিত হবে ।

  2. যদি আমি আপনার প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে আপনার কাছে এমন ডেটা রয়েছে যা গ্রাহক ঠিকানার অংশ নয় তবে আপনাকে এটিও ব্যাকএন্ডে প্রেরণ করা দরকার। এই প্রশ্নের উত্তর:

    এটা নির্ভর করে । উদাহরণস্বরূপ, আপনি নিম্নলিখিত পদ্ধতির চয়ন করতে পারেন: আপনার সমস্ত অতিরিক্ত ক্ষেত্র অন্তর্ভুক্ত চেকআউট পৃষ্ঠায় কাস্টম ফর্ম (like comment, invoice request etc) যুক্ত করুন, জেএস যুক্তি যুক্ত করুন যা কিছু ইভেন্টের উপর ভিত্তি করে এই ফর্মটি পরিচালনা করবে এবং একটি কাস্টম পরিষেবা সরবরাহ করবে যা সীমান্ত এবং সঞ্চয় থেকে ডেটা পাবেন will ভবিষ্যতে ব্যবহারের জন্য এটি কোথাও।

  3. চেকআউট সংক্রান্ত সমস্ত অফিসিয়াল ডকুমেন্টেশনটি http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_overview.html এ অবস্থিত । স্ট্যাটিক শব্দটি সেই ফর্মগুলিকে বোঝায় যেখানে সমস্ত ক্ষেত্র ইতিমধ্যে পরিচিত / পূর্বনির্ধারিত (উদাহরণস্বরূপ: ফর্মটিতে সর্বদা 2 টি পূর্বনির্ধারিত লেবেলযুক্ত পাঠ্য ক্ষেত্র থাকবে) এবং ব্যাকএন্ডের কিছু সেটিংসের ভিত্তিতে পরিবর্তন করতে পারে না।

    এই জাতীয় ফর্মগুলি ব্যবহার করে ঘোষণা করা যেতে পারে layout XML configuration। অন্যদিকে, শব্দ গতিশীল এমন ফর্মগুলিকে বোঝায় যেগুলির ক্ষেত্রের সেটটি পরিবর্তন করতে পারে (উদাহরণস্বরূপ: চেকআউট ফর্মটিতে কনফিগারেশন সেটিংসের ভিত্তিতে কম / কম ক্ষেত্র থাকতে পারে)।

    এই ক্ষেত্রে এই জাতীয় ফর্মটি ঘোষণা করার একমাত্র উপায় হ'ল LayoutProcessorপ্লাগইন ব্যবহার ।

  4. :) ম্যাজেন্টো যতটা সম্ভব ব্যবহারের কেসগুলি আচ্ছাদন করার চেষ্টা করে যা ম্যাজেন্টো ব্যবহার / কাস্টমাইজেশনের সময় ব্যবসায়ীদের পক্ষে যতটা সম্ভব সম্ভব হয়ে উঠতে পারে। কখনও কখনও কিছু সাধারণ ব্যবহারের ঘটনাগুলি আরও জটিল হয়ে উঠলে এটি পরিস্থিতি বাড়ে।

আশাকরি এটা সাহায্য করবে.

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

ঠিক আছে ... কিছু কোড লিখি;)

  1. পিএইচপি কোড যা লেআউটপ্রসেসরে অতিরিক্ত ক্ষেত্র সন্নিবেশ করে

========

/**
 * @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;

আমি ইতিমধ্যে উল্লিখিত হিসাবে, এটি আপনার ক্ষেত্রটি customAttributesJS ঠিকানা অবজেক্টের সম্পত্তিতে যুক্ত করবে । এই সম্পত্তিটি কাস্টম EAV ঠিকানার বৈশিষ্ট্যগুলি তৈরির জন্য ডিজাইন করা হয়েছিল এবং এটি \Magento\Quote\Model\Quote\Address\CustomAttributeListInterface::getAttributesপদ্ধতির সাথে সম্পর্কিত ।

উপরের কোডটি সম্মুখভাগে স্থানীয় স্টোরেজ অধ্যবসায় স্বয়ংক্রিয়ভাবে পরিচালনা করবে। স্থানীয় সঞ্চয়স্থান থেকে checkoutData.getShippingAddressFromData()(যেখানে checkoutDataরয়েছে Magento_Checkout/js/checkout-data) আপনি নিজের ক্ষেত্রের মানটি পেতে পারেন ।

  1. 'ম্যাজেন্টো_চেকআউট / জেএস / অ্যাকশন / সেট-শিপিং-ইনফরমেশন' এর আচরণ পরিবর্তন করতে মিশিন যুক্ত করুন (এই উপাদানটি শিপিং এবং বিলিং চেকআউট ধাপগুলির মধ্যে ডেটা জমা দেওয়ার জন্য দায়ী)

========

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। আপনার_মডিউল_নাম / ভিউ / ফ্রন্টএন্ড / ওয়েব / জেএস / অ্যাকশন / সেট-শিপিং-ইনফরমেশন-মিক্সিন.জেস তৈরি করুন


/**
 * @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 will generate interface that includes your custom attribute
$value = $address->getExtensionAttributes()->getCustomField();

আশা করি, এটি অফিসিয়াল ডকুমেন্টেশনে সহায়তা করবে এবং যুক্ত হবে।


উত্তরের জন্য ধন্যবাদ অ্যালেক্স! আমি চেষ্টা করেছিলাম custom_attributes, কিন্তু এটি আমার পক্ষে কাজ করে না। লেআউটপ্রসেসর.এফপি`-র অংশটি এমন দেখাচ্ছে - gist.github.com/Igloczek/eaf4d2d7a0a04bd950110296ec3f7727 তবে shipping-info বা এমনকি স্থানীয় স্টোরারেজে checkout-dataএই ডেটাটি মোটেই নেই doesn't
igloczek

দয়া করে উপরে আমার আপডেট হওয়া উত্তরটি দেখুন;)
আকিমভ

4
এই বিষয়ে সরকারী দস্তাবেজ ইতিমধ্যে উপলব্ধ! devdocs.magento.com/guides/v2.1/howdoi/checkout/…
অ্যালেক্স

1
আদেশের বিপরীতে মানগুলি সংরক্ষণ করার জন্য কি অতিরিক্ত পদক্ষেপের দরকার আছে?
অ্যালেক্স হ্যাডলি

আমি মনে করি যে আপনি একটি স্ট্যাটিক ফর্ম আছে, এটা যদি ক্ষেত্রের এই উদাহরণ হিসাবে এক্সএমএল মাধ্যমে LayoutProcessor মধ্যে সন্নিবেশ ভালো: devdocs.magento.com/guides/v2.1/howdoi/checkout/...
cjohansson

-1

আমার অভিজ্ঞতায়, এম 2 ক্ষেত্রগুলি ইত্যাদির মতো উপাদানগুলি সংজ্ঞায়িত করতে এক্সএমএল ব্যবহার করে deb এটি ডিবাগিংয়ের জন্য সহায়তা, ডেটার সাথে ইন্টারেক্টিভ আরও সহজ। ফ্রন্ট-এন্ডারদের ক্ষেত্রে আপনার চেকআউট টেম্পলেটগুলি ওভাররাইড করার চেষ্টা করতে হবে এবং সেখানে নিজের কাস্টম ক্ষেত্রগুলি যুক্ত করতে হবে। KO এর সাহায্যে আপনাকে ফ্রন্টএন্ড এবং ব্যাকএন্ড থেকে ডেটা কাজ করার এবং বাঁধতে সক্ষম করতে সহায়তা করে


4
এটি ভুল পরামর্শ, খ / সি চেকআউট টেম্পলেটগুলিতে ম্যানুয়ালি যুক্ত ইনপুট ক্ষেত্রগুলি থাকা উচিত নয় এবং। নির্বাচিত অঞ্চলে টেমপ্লেটগুলি রেন্ডার করতে আমাদের KO ব্যবহার করতে হবে (ইউআই উপাদান ব্যবহার করে সবকিছুই নির্মিত হয়)
igloczek

আপনি কি সামনের অংশে কাস্টম ফিল্ড ইউআই-উপাদান যুক্ত করার উদাহরণ ভাগ করতে পারেন?
mrtuvn

যেমন @ জিগ্লোজেক বলেছেন যে এটি ভুল পরামর্শ, কারণ চেকআউট টেম্পলেটগুলিতে ম্যানুয়ালি যুক্ত ইনপুট ক্ষেত্রগুলি কখনই থাকা উচিত নয়।
ডায়াজওয়াটসন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.