كيفية إضافة دفع مخصص إلى Magento 2 Checkout
نشرت: 2021-05-11جدول المحتويات
أحد التحسينات الكبيرة لـ Magento 2.x على Magento 1.x هو أنه يمكن دمج طرق الدفع المخصصة في عملية الدفع. في هذا البرنامج التعليمي ، سنوضح لك كيفية تنفيذ عرض طريقة الدفع في تسجيل الخروج من Magento 2.
الخطوة 1: قم بإنشاء ملف مكون .js
للبدء ، يجب أن يعمل عارض طريقة الدفع كمكون لواجهة مستخدم يعتمد على وحدة Magento_Checkout ويوسع مكون طريقة الدفع الافتراضية (يوجد عارض طريقة الدفع الافتراضية في <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js ).
قم بإنشاء ملف .js الخاص بالمكون (عارض طريقة الدفع) في دليل الوحدة النمطية المخصصة. يجب تخزينه في الدليل <your_module_dir>/view/frontend/web/js/view/ .
العرض العام لعارض طريقة الدفع هو كما يلي:
حدد(
['Magento_Checkout / js / view / payment /
إفتراضي'
] ،
وظيفة (مكون) {
"
استخدام صارم "؛
إرجاع Component.extend ({
الافتراضيات: {
النموذج: 'المسار٪ إلى القالب٪'
} ،
// أضف المنطق المطلوب هنا
}) ؛
}
) ؛ لكي تتمكن طريقة الدفع الجديدة هذه من الوصول إلى بيانات تكوين النظام ، يجب عليها تنفيذ واجهة \Magento\Checkout\Model\ConfigProviderInterface ، ويجب إدخال الفئة التي تنفذها إلى موفر التكوين المركب عبر تكوين واجهة DI الأمامية.
نموذج تنفيذ ملف .php \Magento\Checkout\Model\ConfigProviderInterface :
فئة MyCustomPaymentConfigProvider implements \ Magento \ Checkout \ Model \ ConfigProviderInterface
{
...
getConfig () الوظيفة العامة
{
إرجاع [
// 'key' => أزواج 'القيمة' من التكوين
] ؛
}
...
} وفي حال كانت طريقة الدفع الجديدة تتطلب معلومات بطاقة الائتمان ، يجب عليك استخدام عارض Magento لتنفيذ نموذج بطاقة الائتمان (الموجود في <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js ).
الخطوة 2: قم بإنشاء مكون .js الذي يقوم بتسجيل العارض
في دليل الوحدة النمطية المخصصة ، قم بإنشاء مكون .js UI الذي يسجل عارض طريقة الدفع في قائمة العارضين. يجب أن يكون موجودًا ضمن الدليل <your_module_dir>/view/frontend/web/js/view/ .
محتوى الملف على النحو التالي:
حدد(
['uiComponent'، 'Magento_Checkout / js / model / payment / renderer - list']،
وظيفة(
مكون،
قائمة العارض
) {
"
استخدام صارم "؛
RendererList.push ({
اكتب: "٪ payment_method_code٪" ،
المكون: "٪ js_renderer_component٪"
} ،
// أدوات تقديم طريقة الدفع الأخرى إذا لزم الأمر
) ؛
/ ** أضف منطق العرض هنا إذا لزم الأمر * /
إرجاع Component.extend ({}) ،
}
) ؛الخطوة 3: قم بإنشاء نموذج لمكون طريقة الدفع
قم بإنشاء ملف <your_module_dir>/view/frontend/web/template/<your_template>.html في دليل الوحدة النمطية المخصصة. يمكن للقالب استخدام بناء جملة Knockout JS.
على سبيل المثال ، نموذج عرض طريقة الدفع PayPal Express:
https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html
الخطوة 4: التصريح عن طريقة الدفع في التخطيط
- قم بإنشاء ملف
<your_module_dir>/view/frontend/layout/checkout_index_index.xmlفي دليل الوحدة النمطية المخصصة لديك - أضف التعليمات البرمجية التالية إلى هذا الملف
<page xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: View / Layout / etc / page_configuration.xsd">
<الجسم>
<referenceBlock name = "checkout.root">
<الحجج>
<اسم الوسيطة = "jsLayout" xsi: type = "array">
<اسم العنصر = "المكونات" xsi: type = "array">
<item name = "checkout" xsi: type = "array">
<item name = "children" xsi: type = "array">
<item name = "steps" xsi: type = "array">
<item name = "children" xsi: type = "array">
<item name = "billing-step" xsi: type = "array">
<item name = "component" xsi: type = "string"> uiComponent </item>
<item name = "children" xsi: type = "array">
<item name = "payment" xsi: type = "array">
<item name = "children" xsi: type = "array">
<! - التصريح عن مكونات إضافية قبل الدفع. ابدأ ->
<item name = "beforeMethods" xsi: type = "array">
<item name = "component" xsi: type = "string"> uiComponent </item>
<item name = "displayArea" xsi: type = "string"> beforeMethods </item>
<item name = "children" xsi: type = "array">
<اسم العنصر = "٪ your_feature_name٪" xsi: type = "array">
<item name = "component" xsi: type = "string">٪ path / to / your / feature_js_component٪ </item>
</item>
</item>
</item>
<! - التصريح عن مكونات إضافية قبل الدفع. النهاية ->
<! - قم بتعريف طريقة الدفع (المكون الذي يقوم بالتسجيل في القائمة). ابدأ ->
<item name = "renders" xsi: type = "array">
<item name = "children" xsi: type = "array">
<اسم العنصر = "٪ اسم المجموعة لطرق الدفع٪" xsi: type = "array">
<! - مثال على القيمة: Magento_Paypal / view / frontend / web / js / view / payment ->
<item name = "component" xsi: type = "string">٪ component_that_registers_payment_renderer٪ </item>
<اسم العنصر = "الأساليب" xsi: type = "array">
<! - أضف هذا إذا كانت طريقة الدفع تتطلب إدخال عنوان إرسال الفواتير ->
<اسم العنصر = "٪ payment_method_code٪" xsi: type = "array">
<item name = "isBillingAddressRequired" xsi: type = "boolean"> صحيح </ em>
</item>
</item>
</item>
</item>
</item>
<! - قم بتعريف طريقة الدفع (المكون الذي يقوم بالتسجيل في القائمة). النهاية ->
<! - التصريح بمكونات إضافية بعد الدفع. ابدأ ->
<item name = "afterMethods" xsi: type = "array">
<item name = "component" xsi: type = "string"> uiComponent </item>
<item name = "displayArea" xsi: type = "string"> afterMethods </item>
<item name = "children" xsi: type = "array">
<اسم العنصر = "٪ your_feature_name٪" xsi: type = "array">
<item name = "component" xsi: type = "string">٪ path / to / your / feature_js_component٪ </item>
</item>
</item>
</item>
<! - التصريح بمكونات إضافية بعد الدفع. النهاية ->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</ الحجج>
</referenceBlock>
</body>
</page>(لوضع الإنتاج فقط) الخطوة 5: قم بتشغيل أوامر CLI
في وضع الإنتاج ، ستحتاج إلى تشغيل بعض الأوامر الأخرى مثل:
php bin / magento setup: di: compile إعداد php bin / magento: محتوى ثابت: نشر php bin / magento cache: نظيف
جناح ملحق الخروج ماجنتو 2
تعد صفحة الخروج ، إلى حد بعيد ، الوجهة الأكثر أهمية لأي موقع ويب على الإنترنت ، والتي يمكنها إما جلب العميل إلى المستهلك أو دفعه بعيدًا عن نقطة البيع.
لحسن الحظ ، تساعد إضافة Magento 2 Checkout هذه على تحسين عملية الدفع الخاصة بك دون عناء.
تحقق من البدلة الآن!
أنظر أيضا:
كيفية تخصيص عملية السحب في Magento 2
كيفية إضافة رمز الخصم إلى الخروج في Magento