Подкомпоненты не визуализируются

Я отслеживаю, чтобы отобразить подкомпоненты внутри моего пользовательского шага, но не работаю.

Я хочу показать корзину списка в качестве первого шага.

Вот мой код:

checkout_index_index.XML

<page  layout="1column" xsi_noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
                <arguments>
                    <argument name="jsLayout" xsi_type="array">
                        <item name="components" 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">
                                            <!-- The new step you add -->
                                            <item name="summary-step" xsi_type="array">
                                                <item name="component" xsi_type="string">CloudMobile_CheckoutExt/js/view/summary-step</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">0</item>
                                                <item name="displayArea" xsi_type="string">summary-step</item>
                                                <item name="children" xsi_type="array">
                                                    <item name="totals" xsi_type="array">
                                                        <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/totals</item>
                                                        <item name="displayArea" xsi_type="string">totals</item>
                                                        <item name="config" xsi_type="array">
                                                            <item name="template" xsi_type="string">Magento_Checkout/summary/totals</item>
                                                        </item>
                                                        <item name="children" xsi_type="array">
                                                            <!-- sort order for this totals is configured on admin panel-->
                                                            <!-- Stores->Configuration->SALES->Sales->General->Checkout Totals Sort Order -->
                                                            <item name="subtotal" xsi_type="array">
                                                                <item name="component"  xsi_type="string">Magento_Checkout/js/view/summary/subtotal</item>
                                                                <item name="config" xsi_type="array">
                                                                    <item name="title" xsi_type="string" translate="true">Cart Subtotal</item>
                                                                </item>
                                                            </item>
                                                            <item name="shipping" xsi_type="array">
                                                                <item name="component"  xsi_type="string">Magento_Checkout/js/view/summary/shipping</item>
                                                                <item name="config" xsi_type="array">
                                                                    <item name="title" xsi_type="string" translate="true">Shipping</item>
                                                                    <item name="notCalculatedMessage" xsi_type="string" translate="true">Not yet calculated</item>
                                                                </item>
                                                            </item>
                                                            <item name="grand-total" xsi_type="array">
                                                                <item name="component"  xsi_type="string">Magento_Checkout/js/view/summary/grand-total</item>
                                                                <item name="config" xsi_type="array">
                                                                    <item name="title" xsi_type="string" translate="true">Order Total</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    <item name="itemsBefore" xsi_type="array">
                                                        <item name="component" xsi_type="string">uiComponent</item>
                                                        <item name="children" xsi_type="array">
                                                            <!-- merge your components here -->
                                                        </item>
                                                    </item>
                                                    <item name="cart_items" xsi_type="array">
                                                        <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                                        <item name="children" xsi_type="array">
                                                            <item name="details" xsi_type="array">
                                                                <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                                <item name="children" xsi_type="array">
                                                                    <item name="thumbnail" xsi_type="array">
                                                                        <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                        <item name="displayArea" xsi_type="string">before_details</item>
                                                                    </item>
                                                                    <item name="subtotal" xsi_type="array">
                                                                        <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                        <item name="displayArea" xsi_type="string">after_details</item>
                                                                    </item>
                                                                </item>
                                                            </item>

                                                        </item>
                                                    </item>
                                                    <item name="itemsAfter" xsi_type="array">
                                                        <item name="component" xsi_type="string">uiComponent</item>
                                                        <item name="children" xsi_type="array">
                                                            <!-- merge your components here -->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

web/js/view / summary-step.js

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    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: 'CloudMobile_CheckoutExt/summary-step'
            },

            //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
                    'summary-step',
                    //step alias
                    null,
                    //step title value
                    'Summary',
                    //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
                    */
                    1
                );
                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 () {

            },

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

web / template / summary-step.формат html

<!--The 'step_code' value from the .js file should be used-->
<li id="summary-step" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Summary'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">
        <!-- ko foreach: getRegion('summary-step') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <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 primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

1 ответ

  1. попробуйте добавить область отображения, прежде чем вводить такой компонент:

    <?xml version="1.0"?>
    <page  layout="1column" xsi_noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="checkout.root">
                    <arguments>
                        <argument name="jsLayout" xsi_type="array">
                            <item name="components" 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="cart_step" xsi_type="array">
                                                    <item name="component" xsi_type="string">CloudMobile_CheckoutExt/js/view/summary-step</item>
                                                    <item name="sortOrder" xsi_type="string">0</item>
                                                    <item name="children" xsi_type="array">
                                                        <item name="summary-step" xsi_type="array">
                                                            <item name="displayArea" xsi_type="string">summary-step</item>
                                                            <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/cart-items</item>
                                                            <item name="children" xsi_type="array">
                                                                <item name="details" xsi_type="array">
                                                                    <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details</item>
                                                                    <item name="children" xsi_type="array">
                                                                        <item name="thumbnail" xsi_type="array">
                                                                            <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details/thumbnail</item>
                                                                            <item name="displayArea" xsi_type="string">before_details</item>
                                                                        </item>
                                                                        <item name="subtotal" xsi_type="array">
                                                                            <item name="component" xsi_type="string">Magento_Checkout/js/view/summary/item/details/subtotal</item>
                                                                            <item name="displayArea" xsi_type="string">after_details</item>
                                                                        </item>
                                                                        <item name="editCart" xsi_type="array">
                                                                            <item name="component" xsi_type="string">Namespace_Checkout/js/view/steps/content/cart</item>
                                                                            <item name="displayArea" xsi_type="string">after_details</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </argument>
                    </arguments>
            </referenceBlock>
    
        </body>
    </page>
    

    Сообщение здесь, если это работает 🙂
    Удачи!