首頁>Magento>source

我正在定製magento 2中的結帐流程,方法是在"運费"和"付款"步骤之間添加自定義步骤,並在"運輸"步骤中添加一个複選框。

The problem

首次进入結帐頁面時,如圖所示選擇了我的送货和自定義步骤.

所以有两个問题:

  1. 当我第一次去結帐頁面時,我怎麼能只看到運輸步骤?

  2. 如果我選擇我在"運輸"步骤中添加的複選框,我可以跳過我的自定義步骤(直接从運费到付款),但如果我没有選中複選框,我会轉到我的自定義步骤

What i have done so far

我使用magento团队在http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

這是我的 Vendor_CustomCheckout/view/frontend/web/js/view/step-view.js

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/form/form'
],
function (
    ko,
    Component,
    _,
    stepNavigator
) {
    'use strict';
    /**
     *
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of the your module directory.
     *
     */
    return Component.extend({
        defaults: {
            template: 'Vendor_CustomCheckout/mystep'
        },
        //add here your logic to display step,
        isVisible: ko.observable(true),
        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'custom_step',
                //step alias
                null,
                //step title value
                'Direccion de Facturacion',
                //observable property with logic when display step or hide step
                this.isVisible,
                _.bind(this.navigate, this),
                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                15
            );
            return this;
        },
        /**
         * The navigate() method is responsible for navigation between checkout step
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         */
        navigate: function () {
            this.isVisible(false);
            this.isVisible = false;
        },
        /**
         * @returns void
         */
        navigateToNextStep: function () {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customStepForm.data.validate');
            console.dir(this.isVisible);
            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customStepForm');
                // do something with form data
                console.dir(formData);
            }
            stepNavigator.next();
        }
    });
}
);  

這是我的 Vendor_CustomCheckout/view/frontend/layout/checkout_index_index.xml

<item name="custom-step" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_CustomCheckout/js/view/step-view</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Vendor_CustomCheckout/mystep</item>
    </item>
    <!--To display step content before shipping step "sortOrder" value should be < 1-->
    <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
    <!--To display step content after payment step "sortOrder" > 2 -->
    <item name="sortOrder" xsi:type="string">1.5</item>
    <item name="children" xsi:type="array">
    <!--add here child component declaration for your step-->
        <item name="custom-step-form-fieldset" xsi:type="array">
        <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
            <item name="component" xsi:type="string">uiComponent</item>
            <!-- the following display area is used in template (see below) -->
            <item name="displayArea" xsi:type="string">custom-step-form-fields</item>
            <item name="children" xsi:type="array">
                <item name="name" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                    <item name="config" xsi:type="array">
                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                        <item name="customScope" xsi:type="string">customStepForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customStepForm.name</item>
                    <item name="label" xsi:type="string">Nombre</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>                
        </item>
    </item>
</item>
最新回復
  • 2019-12-5
    1 #

    我代替您,在發货資訊步骤之前而不是之後添加了新的自定義步骤,但我發現了相同的行為.你設法解決了吗?

    應该可以使用 navigateTo(code, scrollToElement)   Magento_Checkout/js/model/step-navigator的功能   以此目的。

      Actual the next()   step-navigator.js的功能   被稱為 setShippingInformation()   Magento_Checkout/js/view/shipping.js的功能 (將通過單击"下一步"按钮呼叫它。)

      為了覆盖此功能,您可以複製整个 shipping.js   將檔案添加到自定義模組,並將以下內容添加到自定義 checkout_index_index.xml

      checkout_index_index.xml

      <item name="steps" xsi:type="array">
      ...
          <item name="shipping-step" xsi:type="array">
              <item name="children" xsi:type="array">
                  <item name="shippingAddress" xsi:type="array">
                      <item name="component" xsi:type="string"><Vendor>_<ModuleName>/js/view/shipping</item>
                  </item>
              </item>
          </item>
      ...
      </item>
      

      如果這確實有效,我建議你不要覆盖整个 shipping.js   檔案,但擴充套件它,就像它本身延伸 Magento_Ui/js/form/form   ( Component ).然後你應该能够覆盖 setShippingInformation()   功能

  • Magento 2:Magento 2 - catalogsearch中的插件問题
  • magento2:Magento 2如何在购物車頁面和迷你购物車中获取自定義屬性值