কি displayAreaএবং providerএর checkout_index_index.xmlmagento2 গড়?
কি displayAreaএবং providerএর checkout_index_index.xmlmagento2 গড়?
উত্তর:
কি বোঝার জন্য checkoutProviderএবং displayArea, আপনাকে প্রথমে সুযোগ আপনি খুঁজছি হয় বুঝতে হবে: jsLayout।
jsLayoutচেকআউট পৃষ্ঠায় জাভাস্ক্রিপ্ট ইউআই উপাদানগুলির জন্য জাভাস্ক্রিপ্ট কনফিগারেশনের একটি গুচ্ছ। আপনি যদি তাকান module-checkout/view/frontend/templates/onepage.phtml, আপনি নিম্নলিখিত x-magento-init-Data লক্ষ্য করবেন:
<script type="text/x-magento-init">
{
"#checkout": {
"Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
}
}
</script>এটা সব শুরু হয় এই যেখানে। এতে বলা হয়েছে:
উপাদানটির জন্য
#checkout,Magento_Ui/js/core/appনিম্নলিখিত তথ্যের সাহায্যে কম্পোনেন্টটি আরম্ভ করুন: ...
এবং এটি প্রাপ্ত তথ্য হ'ল এক্সএমএল লেআউটে তৈরি তথ্য jsLayout। এখন, এর অর্থ এই যে সবকিছু আপনার XML- এর এখন মাধ্যমে প্রেরণ করা হয় Magento_Ui/js/core/app-component (প্লাগিন যাব ও লেআউট প্রসেসর এবং স্টাফ মুহূর্ত জন্য সমীকরণ থেকে বের ...)
এখন, আমি কীভাবে module-ui/view/base/web/js/core/app.jsসমস্ত কিছুকে সিদ্ধ করে ফেলার বিষয়ে বিশদে ডুব দিতে যাচ্ছি না , কারণ এটি এই পোস্টটি খুব দীর্ঘায়িত করবে তবে সংক্ষিপ্তসারটি হ'ল:
Magento_Ui/js/core/app-Component একটি সৃষ্টি checkout-component।uiComponent(এটি একটি খুব জেনেরিক উপাদান যা আপনার নিজস্ব কাস্টম UI উপাদানগুলি স্থগিত করতে ব্যবহার করা যেতে পারে It এটি বেসিক নকআউট টেম্পলেট রেন্ডারিং এবং স্টাফ সহ আসে)।Magento_Checkout/web/frontend/template/onepage.html।errors, estimation, steps, ইত্যাদি ...)steps-Child একটি হতে হবে uiComponent।এখন আপনার displayAreaএবং- providerপ্রশ্নে উঠার জন্য: উপরে আপনি যেমনটি দেখেছেন, সবকিছু জাভাস্ক্রিপ্ট ক্লাসে মানচিত্র করে। আমরা প্রথমবারের ব্যবহারটি দেখি displayAreaযখন আমরা- stepsকম্পোনেন্ট তৈরি করি, যা প্রকারের uiComponent। সুতরাং uiComponentএর ব্যবহার সন্ধান করার জন্য একটি যৌক্তিক প্রার্থী হবে displayArea।
এখন, uiComponentএ ধরণের জাভাস্ক্রিপ্ট শ্রেণি Magento_Ui/js/lib/core/collection। (আপনি এটি সন্ধান করতে পারেন module-ui/view/base/requirejs-config.js)। এই মানচিত্র module-ui/view/base/web/js/lib/core/collection.js। এখানে আমরা নিম্নলিখিত ব্যবহার দেখতে পাচ্ছি:
/**
* Synchronizes multiple elements arrays with a core '_elems' container.
* Performs elemets grouping by theirs 'displayArea' property.
* @private
*
* @returns {Collection} Chainable.
*/
_updateCollection: function () {
var _elems = compact(this._elems),
grouped;
grouped = _elems.filter(function (elem) {
return elem.displayArea && _.isString(elem.displayArea);
});
grouped = _.groupBy(grouped, 'displayArea');
_.each(grouped, this.updateRegion, this);
this.elems(_elems);
return this;
},সুতরাং এটি কার্যকরভাবে কী করে, এটি ইউআই উপাদানগুলির একটি নির্দিষ্ট গোষ্ঠীতে একটি uiComp घटक 'মানচিত্র' করে। এটি জেনে রাখা জরুরী, কারণ এটি এক্সআইএমএল লেআউটটিকে ঠিকঠাক করেই ইউআই উপাদানগুলিকে বিন্যাসের অন্যান্য স্থানে সরিয়ে নিতে দেয়, ঠিক যেমন আপনি phtmlসার্ভার-সাইড রেন্ডার করা টেম্পলেটগুলির সাহায্যে এটি করেন। কেবলমাত্র ওভাররাইড করুন displayAreaএবং আপনি যে কোনও জাভাস্ক্রিপ্ট ইউআই কম্পোনেন্টকে অন্য কোথাও রেন্ডার করতে পারেন (লক্ষ্য অঞ্চলটি কোথাও রেন্ডার করা হয়েছে)।
এখন আপনার দ্বিতীয় প্রশ্নের জন্য: provider। ঠিক যেমন আমরা সন্ধান করেছি displayArea, আমাদের প্রথমে ইউআই কম্পোনেন্টটি দেখা শুরু করা উচিত, যা Magento_Checkout/js/view/form/element/email। এবং যদি আমরা এর দিকে তাকাই requirejs-config.js, আমরা শেষ পর্যন্ত খুঁজে পাই module-checkout/view/frontend/web/js/view/form/element/email.js।
কিন্তু ... providerএই ক্লাসে কোনও ব্যবহার হয় না। সুতরাং আসুন আমরা কেবল শ্রেণীর মধ্যে এটি প্রসারিত কিছু খুঁজে পেতে পারি কিনা তা দেখতে দিন: Component(যা আমাদের uiComponentক্লাস আবার)।
তবে ... না provider। ঠিক আছে, uiComponentকেবল প্রসারিত হয় Element(যা এখানে অবস্থিত module-ui/view/base/web/js/lib/core/element/element.js), সুতরাং আসুন কেবল সেখানে দেখুন:
/**
* Parses 'modules' object and creates
* async wrappers for specified components.
*
* @returns {Element} Chainable.
*/
initModules: function () {
_.each(this.modules, function (name, property) {
if (name) {
this[property] = this.requestModule(name);
}
}, this);
if (!_.isFunction(this.source)) {
this.source = registry.get(this.provider);
}
return this;
},বিঙ্গো! দেখা যাচ্ছে যে সরবরাহকারীর কাছ থেকে ডেটা আনতে উত্স হিসাবে ব্যবহৃত হয়। যদি আমরা এর নির্মাণকারীর দিকে নজর রাখি তবে Elementআপনি দেখতে পাবেন যে এটি ডিফল্টরূপে এটি খালি হয়ে গেছে:
provider: '',সুতরাং আমাদের কনফিগারেশন ফিরে। আমরা যদি এখন আমাদের কনফিগারেশনটি পড়ি, আমরা বুঝতে পারি যে আইটেমটি shippingAddressএকটি উপাদান Magento_Checkout/js/view/shipping, এটি থেকে ডেটা এনেছে checkoutProvider।
যাতে আমাদের দুটি প্রশ্ন রেখে যায়:
checkoutProviderসংজ্ঞায়িত কোথায় ?ঠিক আছে, আপনি যদি নীচে স্ক্রোল করেন তবে checkout_index_index.xmlআপনি লক্ষ্য করবেন যে এটি কোনও ভ্যানিলা ছাড়া আর কিছু নয় uiComponent:
<item name="checkoutProvider" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
</item>এবং যদি আপনি তাকান module-checkout/view/frontend/web/js/view/shipping.js, আপনি দেখতে পাবেন যে এটি এরকম ব্যবহৃত হয়:
registry.async('checkoutProvider')(function (checkoutProvider) {
var shippingAddressData = checkoutData.getShippingAddressFromData();
if (shippingAddressData) {
checkoutProvider.set(
'shippingAddress',
$.extend({}, checkoutProvider.get('shippingAddress'), shippingAddressData)
);
}
checkoutProvider.on('shippingAddress', function (shippingAddressData) {
checkoutData.setShippingAddressFromData(shippingAddressData);
});
});সত্যি কথা বলতে: এখান থেকেই আমার বিশ্লেষণ থেমে গেছে, কারণ যা চলছে তা অনুসন্ধান করা এবং বিনিয়োগ করা আমার পক্ষে কঠিন হয়ে পড়ে, তবে আমি আশা করি যে অন্য কেউ এটিকে এখানে থেকে বেছে নিতে পারে ...
আমি জানি যে এটি registry.async()একটি পদ্ধতিতে ফিরে আসার সাথে কিছু করার আছে যা তাত্ক্ষণিকভাবে একটি কলব্যাক ফাংশন দিয়ে তাত্ক্ষণিকভাবে কার্যকর করা হয়, তবে অন্য কাউকে এটি ব্যাখ্যা করার প্রয়োজন ...
* অস্বীকৃতি: সর্বদা, আমি ভুল হলে দয়া করে আমাকে সংশোধন করুন! বাস্তবের জন্য উপরেরগুলির কোনও চেষ্টা করে দেখেনি, তবে আমি প্রায় বছর ধরে ম্যাজেন্টো 2 এর সাথে কাজ করছি এবং আমি বিশ্বাস করি এটি এটি কীভাবে কাজ করে। দুর্ভাগ্যক্রমে আপনি যদি ম্যাজেন্টো মহাসাগরের নীচে ডুব দিতে চান তবে খুব বেশি ডকুমেন্টেশন নেই।
আমার আসল উত্তরের 6 মাস পরে আমি মনে করি আমি কী displayAreaতা থেকে আরও ভাল উত্তর দিতে পারি ।
আমার বোধগম্যতার মধ্যে, getTemplate()এগুলি সবই নকআউটস' - স্মৃতিবিজড়িত, দ্য- getRegion()মডেল এবং ইউআই উপাদানগুলির শিশুদের সাথে একত্রিত হয় । এর একটি ভাল উদাহরণ দেখা যাবে যখন আপনি পরীক্ষা করছেন vendor/magento/module-checkout/view/frontend/templates/registration.phtmlএবং vendor/magento/module-checkout/view/frontend/web/template/registration.html।
ইন registration.phtml, আপনি একটি ডিফল্ট ম্যাজেন্টো ইউআই উপাদান দেখতে পাবেন যার সন্তান রয়েছে:
<script type="text/x-magento-init">
{
"#registration": {
"Magento_Ui/js/core/app": {
"components": {
"registration": {
"component": "Magento_Checkout/js/view/registration",
"config": {
"registrationUrl": "<?php /* @escapeNotVerified */ echo $block->getCreateAccountUrl(); ?>",
"email": "<?php /* @escapeNotVerified */ echo $block->getEmailAddress(); ?>"
},
"children": {
"errors": {
"component": "Magento_Ui/js/view/messages",
"sortOrder": 0,
"displayArea": "messages",
"config": {
"autoHideTimeOut": -1
}
}
}
}
}
}
}
}
</script>উল্লেখ্য ব্যবহার displayAreaমধ্যে children-node। মূলত, এটি নকআউটকে বলে যে এই শিশু উপাদানটিকে 'বার্তা' নামক অঞ্চলে রেন্ডার করা উচিত ।
এখন এর শীর্ষে একবার দেখুন registration.html:
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->নকআউট কোডের এই লাইনটি মূলত যা করে তা হ'ল: এটি সমস্ত বাচ্চার উপাদানগুলির উপরে পুনরাবৃত্তি করে যা প্রদর্শনআরিয়া'র বার্তাগুলিতে উপস্থিত থাকে এবং তাদের রেন্ডার করে।
মূলত, যদি আপনি আমাকে জিজ্ঞাসা করেন তবে নামকরণটি কিছুটা বিভ্রান্তিকর। আপনি কেন এক জায়গায় 'ডিসপ্লেআরিয়া ' এবং অন্য জায়গায় 'অঞ্চল' ব্যবহার করবেন ? তবে সম্ভবত আমার ধারণা সম্পূর্ণ ভুল। সম্ভবত কোনও ম্যাজেন্টো কোর বিকাশকারী এতে আরও কিছুটা আলোকিত করতে পারেন?
getRegionএবং আমার মন কেবল প্ররোচিত। উভয় জবাবের জন্য আপনাকে ধন্যবাদ, খুব সহায়ক!