Magento 2 custom checkout step navigation

Question

Ich passe den Bestellvorgang in Magento 2 an, indem ich einen benutzerdefinierten Schritt zwischen Versand- und Zahlungsschritten hinzufüge und ein Kontrollkästchen im Versandschritt hinzufüge.

Das Problem

Wenn man sich Seite zum ersten Mal meiner Lieferung und Gewohnheit beiden Schritte im Bild gezeigten ausgewählt werden zur Kasse.

http://imgur.com/yvVhYZZ

So gibt es zwei Fragen:

1. Wie kann ich das mache nur der Versand Schritt sichtbar ist, wenn ich zum ersten Mal zur Kasse Seite gehen?
2. Wie kann ich das machen, wenn ich das Kontrollkästchen, das ich im Shipping-Schritt hinzugefügt habe, überspringen ich meine benutzerdefinierte Schritt (direkt vom Versand zur Zahlung), aber wenn ich nicht die Checkbox ich gehe zu meinem benutzerdefinierten Schritt?

Was ich bisher getan haben

Ich habe den benutzerdefinierten Schritt mit den Dokumenten, die von magento Team zur Verfügung gestellt erstellt in http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_step.html

Das ist mein Vendor_CustomCheckout/view/Frontend/web/js/view/Schritt-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(); 
     } 
    }); 
} 
); 

Das ist mein 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> 

Danke,

A. Martz.

Answer 1

Ich hatte das gleiche Problem zuerst. Der Grund ist in diesen Zeilen:

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

Wenn Sie es auf true gesetzt, ist es Ihren Schritt sofort zeigen wird, also entweder Sie eine Bedingung für die wahren bauen oder es auf false gesetzt. Damit sollte Ihr Schritt erst nach dem Versand sichtbar sein. Hier

Answer 2

ist die Lösung, die für uns gearbeitet

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(); 
      } 
     }); 
    } 
); 

Hier weitere Details zu dieser Lösung ist on my own blog