كيفية تخصيص عملية السحب في Magento 2

نشرت: 2018-04-23

جدول المحتويات

تخصيص الخروج الافتراضي لـ Magento 2
- أضف خطوة تسجيل خروج جديدة
  - الخطوة 1: قم بإنشاء جزء العرض الخاص بمكون خطوة السحب
  - الخطوة 2: أضف خطوتك إلى تخطيط صفحة Checkout
- تخصيص عرض الخروج الحالي
  - الخطوة 1: قم بتغيير تنفيذ المكون .js والقالب
  - الخطوة 2: أضف المكون الجديد إلى تخطيط صفحة الخروج
  - الخطوة 3: تعطيل أحد المكونات
  - الخطوة 4: قم بإزالة أحد المكونات

في Magento 2 ، تمت إعادة تصميم عملية الدفع للحصول على تجربة أسرع وأسهل. تقود صفحة Checkout العميل من خلال خطوتين سهلتين للعملية. يمكن للعملاء الذين قاموا بتسجيل الدخول إلى حساباتهم إكمال عملية الدفع بسرعة ، لأن الكثير من المعلومات موجودة بالفعل في حساباتهم. تتمثل الخطوة الأولى في عملية السداد في أن يكمل العميل معلومات عنوان الشحن واختيار طريقة الشحن. خلال الخطوة الثانية ، يختار العميل طريقة الدفع ويطبق أي كوبونات لإتمام عملية الشراء.

تخصيص الخروج الافتراضي لـ Magento 2

يمكنك إما إضافة خطوة سحب جديدة أو تغيير طريقة عرض الخروج الحالي لتخصيص الخروج الافتراضي بطريقتك الخاصة.

أضف خطوة تسجيل خروج جديدة

يمكنك إضافة خطوة سحب مخصصة ، يجب تنفيذها كمكون لواجهة المستخدم. من أجل التوافق وقابلية الترقية وسهولة الصيانة ، لا تقم بتحرير كود Magento الافتراضي ، أضف التخصيصات الخاصة بك في وحدة منفصلة.

الخطوة 1: قم بإنشاء جزء العرض الخاص بمكون خطوة السحب

لإنشاء جزء العرض لخطوة الخروج الجديدة:

إضافة دليل وحدة. يجب تخزين جميع الملفات المخصصة هناك. لكي يتم تطبيق تخصيص الخروج بشكل صحيح ، يجب أن تعتمد الوحدة المخصصة الخاصة بك على وحدة Magento_Checkout . لا تستخدم Ui لاسم الوحدة النمطية المخصصة الخاصة بك ، لأن تدوين %Vendor%_Ui ، المطلوب عند تحديد المسارات ، قد يتسبب في حدوث مشكلات.
قم بإنشاء ملف .js لتطبيق نموذج العرض.
قم بإنشاء نموذج .html . للمكون.

يتم وصف كل خطوة بالتفصيل أدناه:

1. أضف ملف JavaScript لتنفيذ الخطوة الجديدة

يجب تنفيذ خطوة سحب جديدة كمكون لواجهة المستخدم. وهذا يعني أن تطبيق JavaScript الخاص به يجب أن يكون وحدة JavaScript.

يجب تخزين الملف تحت دليل <your_module_dir>/view/frontend/web/js/view .

<your_module_dir> إلى المسار إلى دليل الوحدة النمطية من الدليل الجذر. عادةً ما يكون أحد الإجراءات التالية: app/code/<YourVendor>/<YourModule> أو vendor/<yourvendor>/module-<module>-<name> .

نموذج my-step-view.js مع التعليقات التالي:

 حدد(
    ['ko'، 'uiComponent'، 'شرطة سفلية'، 'Magento_Checkout / js / model / step - navigator']،
    وظيفة(
        كو
        مكون،
        _ ،
        ملاح
    ) {'
        استخدام صارم "؛
        / **
         *
         * mystep - هو اسم قالب html الخاص بالمكون ،
         * <Vendor> _ <Module> - هو اسم دليل الوحدة الخاصة بك.
         *
         * /
        إرجاع Component.extend ({
            الافتراضيات: {
                template: "<Vendor> _ <Module> / mystep"
            } ،

            // أضف هنا منطقك لعرض الخطوة ،
            isVisible: ko.observable (صحيح) ،

            / **
             *
             * @عائدات {*}
             * /
            تهيئة: function () {
                this._super () ؛
                // سجل خطوتك
                stepNavigator.registerStep (
                    // سيتم استخدام كود الخطوة كمعرّف محتوى الخطوة في قالب المكون
                    "step_code"،
                    // الخطوة الاسم المستعار
                    لا شيء،
                    // قيمة عنوان الخطوة
                    "عنوان الخطوة" ،
                    // خاصية قابلة للملاحظة مع منطق عند عرض الخطوة أو إخفاء الخطوة
                    هذا. غير مرئي ،

                    _.bind (this.navigate ، this) ،

                    / **
                     * ترتيب قيمة الفرز
                     * "ترتيب ترتيب القيمة" <10: عرض الخطوة قبل خطوة الشحن ؛
                     * 10 <"ترتيب قيمة الترتيب" <20: يتم عرض الخطوة بين الشحن وخطوة الدفع
                     * "ترتيب قيمة الفرز"> 20: يتم عرض الخطوة بعد خطوة الدفع
                     * /
                    15
                ) ؛

                إعادة هذا
            } ،

            / **
             * طريقة navigate () هي المسؤولة عن التنقل بين خطوة الخروج
             * أثناء الخروج. يمكنك إضافة منطق مخصص ، على سبيل المثال بعض الشروط
             * للتبديل إلى خطوتك المخصصة
             * /
            التنقل: الوظيفة () {

            } ،

            / **
             *returns باطل
             * /
            navigateToNextStep: function () {
                stepNavigator.next () ؛
            }
        }) ؛
    }
) ؛

2. أضف نموذج html

في دليل الوحدة النمطية ، أضف قالب .html للمكون. يجب أن يكون موجودًا ضمن دليل <your_module_dir>/view/frontend/web/template .

يتبع نموذج mystep.html :

 <! - يجب استخدام قيمة "step_code" من ملف .js–>
<li data-bind = "fadeVisible: isVisible">
    <div class = "step-title" data-bind = "i18n: 'Step Title'" data-role = "title"> </div>
    <div class = "step-content" data-role = "content">

        <form data-bind = "submit: navigateToNextStep" novalidate = "novalidate">
            <div class = "Actions-toolbar">
                <div class = "primary">
                    <button data-role = "opc-continue" type = "submit" class = "button action continue basic">
                        <span> <! - ko i18n: 'التالي' -> <! - / ko -> </span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

الخطوة 2: أضف خطوتك إلى تخطيط صفحة Checkout

لكي يتم عرض الخطوة الجديدة على الصفحة ، تحتاج إلى الإعلان عنها في تخطيط صفحة الخروج ، المحدد في checkout_index_index.xml .

لذلك تحتاج إلى إضافة ملف تخطيط checkout_index_index.xml ممتد في الموقع التالي: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

يتبع نموذج checkout_index_index.xml :

 <page xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" 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 = "my-new-step" xsi: type = "array">
                                            <item name = "component" xsi: type = "string">٪ Vendor٪ _٪ Module٪ / js / view / my-step-view </item>
                                            <! - لعرض محتوى الخطوة قبل خطوة الشحن يجب أن تكون قيمة "sortOrder" <1–>
                                            <! - لعرض محتوى الخطوة بين خطوة الشحن وخطوة الدفع 1 <"sortOrder" <2 ->
                                            <! - لعرض محتوى الخطوة بعد خطوة الدفع "sortOrder"> 2 ->
                                            <item name = "sortOrder" xsi: type = "string"> 2 </item>
                                            <item name = "children" xsi: type = "array">
                                                <! - أضف هنا تصريح المكون الفرعي لخطوتك->
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </ الحجج>
        </referenceBlock>
    </body>
</page>

Magento 2 الخروج حقل مخصص

119.00 دولار

ماجنتو 2 خطوة واحدة الخروج

99 ~~دولارًا و 119.00 دولارًا~~

تخصيص عرض الخروج الحالي

في تطبيقات Magento ، يتم تنفيذ السحب باستخدام مكونات واجهة المستخدم. يمكنك تخصيص كل خطوة عن طريق تغيير تطبيق JavaScript أو قالب لأحد المكونات ، أو إضافة أحد المكونات أو إزالته أو تعطيله.

الخطوة 1: قم بتغيير تنفيذ المكون .js والقالب

لتغيير تطبيق .js والقالب المستخدم لعرض المكونات ، تحتاج إلى إعلان الملفات الجديدة في تخطيط صفحة الخروج. للقيام بذلك ، اتبع الخطوات التالية:

في دليل الوحدة النمطية المخصص ، قم بإنشاء الملف الجديد التالي: <your_module_dir>/view/frontend/layout/checkout_index_index.xml . (لكي يتم تطبيق تخصيص الخروج بشكل صحيح ، يجب أن تعتمد الوحدة المخصصة الخاصة بك على وحدة Magento_Checkout.)
أضف في هذا الملف ما يلي:

 <page xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" xsi: noNamespaceSchemaLocation = "urn: magento: framework: View / Layout / etc / page_configuration.xsd">

    <الجسم>
        <referenceBlock name = "checkout.root">
            <الحجج>
                <اسم الوسيطة = "jsLayout" xsi: type = "array">
                    <! - التخصيص الخاص بك سيكون هنا ->
                    ...
                </argument>
            </ الحجج>
        </referenceBlock>
    </body>
</page>

في ملف <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml ، ابحث عن المكون الذي تريد تخصيصه. انسخ العقدة المطابقة وجميع العقد الأصلية حتى <argument> . ليست هناك حاجة لترك جميع سمات وقيم العقد الأبوية ، لأنك لن تغيرها.
قم بتغيير المسار إلى ملف .js الخاص بالمكون أو القالب أو أي خاصية أخرى.

مثال:

تضيف الوحدة النمطية Magento_Shipping مكونًا يتم تقديمه كارتباط لمعلومات سياسة الشحن إلى خطوة الشحن:

 <Magento_Shipping_module_dir> /view/frontend/layout/checkout_index_index.xml

يبدو كالتالي:

 <page xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" 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 = "shipping-step" xsi: type = "array">
                                            <item name = "children" xsi: type = "array">
                                                <item name = "shippingAddress" xsi: type = "array">
                                                    <item name = "children" xsi: type = "array">
                                                        <item name = "before-shipping-method-form" xsi: type = "array">
                                                            <item name = "children" xsi: type = "array">
                                                                <item name = "shipping_policy" xsi: type = "array">
                                                                    <item name = "component" xsi: type = "string"> Magento_Shipping / js / view / checkout / shipping / shipping-policy </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </ الحجج>
        </referenceBlock>
    </body>
</page>

الخطوة 2: أضف المكون الجديد إلى تخطيط صفحة الخروج

تتم إضافة أي مكون من مكونات واجهة المستخدم في checkout_index_index.xml بطريقة مشابهة للطريقة التي يتم بها إضافة مكون خطوة السحب.

تأكد من تعريف أحد المكونات بحيث يتم تقديمه بشكل صحيح بواسطة المكون الرئيسي. إذا كان المكون الرئيسي مكونًا عامًا لواجهة المستخدم (يشار إليه بواسطة الاسم المستعار uiComponent ) ، فسيتم عرض المكونات الفرعية دون أي شروط. ولكن إذا كان المكون الرئيسي امتدادًا لمكونات واجهة المستخدم العامة ، فقد يتم تقييد عرض الأطفال بطريقة معينة. على سبيل المثال ، يمكن للمكون أن يعرض العناصر displayArea فقط من منطقة عرض معينة.

الخطوة 3 : تعطيل أحد المكونات

لتعطيل المكون في checkout_index_index.xml ، استخدم الإرشادات التالية:

 <اسم العنصر = "٪ the_component_to_be_disabled٪" xsi: type = "array">
    <اسم العنصر = "config" xsi: type = "array">
        <item name = "componentDisabled" xsi: type = "boolean"> صحيح </ em>
    </item>
</item>

الخطوة 4: قم بإزالة أحد المكونات

لإزالة مكون من عرض التخطيط ، تحتاج إلى إنشاء مكون إضافي لطريقة \Magento\Checkout\Block\Checkout\LayoutProcessor::process . في المكون الإضافي الخاص بك ، قم بتنفيذ طريقة around لإزالة عقد التخطيط المقابلة في وقت التشغيل.

النموذج التالي هو مثال على طريقة around التي تزيل مكونًا:

 unset ($ jsLayout ['المكونات'] ['checkout'] ['الأطفال'] ['الخطوات'] [٪ path_to_target_node٪]) ؛ //٪ path_to_target_node٪ هو المسار إلى عقدة المكون في checkout_index_index.xml
إرجاع $ jsLayout؛

(إذا كنت تريد استخدام هذا النموذج في التعليمات البرمجية الخاصة بك ، فاستبدل العنصر النائب %path_to_target_node% بقيمة حقيقية.)

* تعطيل مقابل إزالة أحد المكونات: إذا قمت بتعطيل أحد المكونات ، فسيتم تحميله ولكن لا يتم عرضه. إذا قمت بإزالة أحد المكونات ، فلن يتم تحميله.

المنشورات ذات الصلة:
كيفية إضافة رمز الخصم إلى الخروج في Magento
كيفية إضافة دفع مخصص إلى Magento 2 Checkout