2

I want to set a session variable in checkout if a particular product is in the cart list and then display a section based on that to display a section (fetch in js/view/shipping.js) or a step in checkout.

I want to add a section in mentioned location. but its showing in shipping method section and i need a seperate section 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">
<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="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="our-delivery-component" 
                                                                  xsi:type="array">
                                                                <item name="component" 
                                                                      xsi:type="string">
                                                                    Magento_checkout/js/view/option-delivery</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="message" xsi:type="string" translate="true">Your new message above the shipping form. Welcome!</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

option-deliver.js

define(
    [
        "uiComponent",
        'ko'
    ],
    function(
        Component,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/option-delivery'
            },
            initialize: function () {
                this._super(); //you must call super on components or they will not render
            }
        });
    }
     );

delivery-option.html

<div class="message warning"><span >testing</span></div>
2

If you want to custom the region of the shipping step, you should take a look the shipping step template

vendor/magento/module-checkout/view/frontend/web/template/shipping.html

I'm going to add a new region to this part. This region will be outside the Shipping method region. In web/template/shipping.html

......
<li data-bind="fadeVisible: visible()">
    <each args="getRegion('delivery-option-form')" render="" />
</li>
......

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="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="delivery-option-form" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">delivery-option-form</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="delivery-option" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/delivery-option</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Js component: app/code/Vendor/Module/view/frontend/web/js/view/checkout/delivery-option.js

define(
    [
        "uiComponent",
        'ko'
    ],
    function(
        Component,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/option-delivery'
            },
            initialize: function () {
                this._super();
            }
        });
    }
);

Html template: app/code/Vendor/Module/view/frontend/web/template/option-delivery.html

<div class="message warning"><span >Testing Option Delivery</span></div>

enter image description here

[NOTE] When putting the new area outside the shipping method form, you will need to build more logic to work with server. This will take more time, but worth trying.

| improve this answer | |
  • Its getting displayed in shipping section/step and also in Review & Payments section on top. – Sairaj Gadekar Jun 5 '19 at 10:10
  • 1
    I have updated my answer. Added more logic to shipping.html template. – Khoa TruongDinh Jun 5 '19 at 10:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.