0

Hi I have been trying to add simple text message in the highlighted section of attached screenshot . I am currently adding the custom text message in

I overrided below file from \vendor\magento\module-checkout\view\frontend\layout\checkout_index_index.xml

\app\design\frontend\Company\porto_base_child\Magento_Checkout\layout\checkout_index_index.xml

<item name="popUpForm" xsi:type="array">
    <item name="element" xsi:type="string">#opc-new-shipping-address</item>
    <item name="options" xsi:type="array">
        <item name="type" xsi:type="string">popup</item>
        <item name="responsive" xsi:type="boolean">true</item>
        <item name="innerScroll" xsi:type="boolean">true</item>
        <item name="title" xsi:type="string" translate="true">Shipping Address</item>
        <item name="trigger" xsi:type="string">opc-new-shipping-address</item>
        <item name="notice" xsi:type="string" translate="true">Some note here</item>
        <item name="additionalInfo" xsi:type="string">
            <![CDATA[<b>My Html Information</b>]]>
        </item>
        <item name="text" xsi:type="string" translate="true">Some note here</item>
        <item name="buttons" xsi:type="array">
            <item name="save" xsi:type="array">
                <item name="text" xsi:type="string" translate="true">Save Address</item>
                <item name="class" xsi:type="string">action primary action-save-address</item>
            </item>
            <item name="cancel" xsi:type="array">
                <item name="text" xsi:type="string" translate="true">Cancel</item>
                <item name="class" xsi:type="string">action secondary action-hide-popup</item>
            </item>
        </item>
    </item>
</item>

enter image description here I am not getting any error's or warning but the below code in above file did not work. Can anyone please guide me through this it would definitely help me continue my learning of magento 2 concepts and get clear understanding how it works? thanks

<item name="notice" xsi:type="string" translate="true">Some note here</item>
            <item name="additionalInfo" xsi:type="string">
                <![CDATA[<b>My Html Information</b>]]>
            </item>
            <item name="text" xsi:type="string" translate="true">Some note here</item>

1 Answer 1

1

The position where you add the html text is a modal footer position. You can not add text here as simple. Because this is create by modal widget. You can easily add html text above this position and under the 'Save in address book' checkbox by this below process.

  1. Overwrite the file /vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form.html and add 'Your content will be in here' as below.
<div id="shipping-new-address-form" class="fieldset address">
        <!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko if: (isCustomerLoggedIn) -->
        <div class="field choice" data-bind="visible: !isFormInline">
            <input type="checkbox" class="checkbox" id="shipping-save-in-address-book" data-bind="checked: saveInAddressBook" />
            <label class="label" for="shipping-save-in-address-book">
                <span data-bind="i18n: 'Save in address book'"></span>
            </label>
        </div>
        <!-- /ko -->

        <!---- Your content will be in here------>

    </div>
  1. Or if you need to add in modal footer Then you need to do this.

a. Overrite this file /vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

Search line number 173. and change the code ass below

From :

this.popUpForm.options.opened = function () {
                    // Store temporary address for revert action in case when user click cancel action
                    self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
                };

To:

this.popUpForm.options.opened = function () {
                    // Store temporary address for revert action in case when user click cancel action
                    self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
                    $(".modal-footer .action:first").before( 'Your content will be in here' );
                };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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