Magento 2自定義結賬步驟導航

Question

我正在通過在發貨和付款步驟之間添加自定義步驟並在發貨步驟中添加複選框來自定​​義magento 2中的結帳流程。

問題

當去結賬頁面，第一次同時選擇我的海運和自定義的步驟如圖所示的形象。

http://imgur.com/yvVhYZZ

因此，有兩個問題：

1. 我怎樣才能使只有航運一步是可見的，當我去結帳頁面的第一次？
2. 我怎麼做，如果我選擇我在運輸步驟中添加的複選框，我跳過我的自定義步驟（直接從運輸到付款），但如果我不選擇複選框，我去我的自定義步驟？

我做了什麼至今

我創建使用Magento的團隊提供的文件自定義步驟中http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

這是我Vendor_CustomCheckout /視圖/前端/網絡/ JS /視圖/步驟-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(); 
     } 
    }); 
} 
); 

這是我的供應商_CustomCheckout /視圖/前端/佈局/ 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> 

謝謝，

A.馬茨。

Answer 1

我起初有同樣的問題。原因是在這些線路：

//add here your logic to display step, 
isVisible: ko.observable(true), 

如果你把它設置爲true，它會顯示你一步向右走，所以無論你建立一個條件真或將其設置爲false。有了這個步驟，只有在發貨步驟完成後才能看到。

Answer 2

這裏是爲我們工作

define(
    [ 
     'ko', 
     'uiComponent', 
     'underscore', 
     'Magento_Checkout/js/model/step-navigator' 
    ], 
    function (
     ko, 
     Component, 
     _, 
     stepNavigator 
    ) { 
     'use strict'; 
     /** 
     * 
     * newcheckout - is the name of the component's .html template, 
     * MD_Newcheckoutstep - is the name of the your module directory. 
     * 
     */ 
     return Component.extend({ 
      defaults: { 
       template: 'MD_Newcheckoutstep/newcheckout' 
      }, 

      //add here your logic to display step, 
      // I have given false here so that is will no merge with other step 
      // if you make it true sometime happens that is merge with shipping step. 
      visible: ko.observable(quote.isVirtual()) 

      /** 
      * 
      * @returns {*} 
      */ 
      initialize: function() { 
       this._super(); 
       // register your step 
       stepNavigator.registerStep(
        //step code will be used as step content id in the component template 
        'newcheckoutstep', 
        //step alias 
        null, 
        //step title value 
        'New Checkout Step', 
        //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() { 
       self.visible(true); 
      }, 

      /** 
      * @returns void 
      */ 
      navigateToNextStep: function() { 
       stepNavigator.next(); 
      } 
     }); 
    } 
); 

這裏的解決方案是對這一解決辦法on my own blog