How to Add Additional Text Based on Selected Shipping Methods in the Checkout in Magento 2

 Steps to Add Additional Text Based on Selected Shipping Methods in the Checkout in Magento 2:

Step 1: Create a Template file in the path given below.  


{{magento_root}}\app\code\Vendor\Extension\view\frontend\web\template\shipping-info.html


And add the code as follows.


<div class="free-shipping-info" data-bind="visible: showFreeShippingInfo()" style="display: none;">

    <div class="step-title" data-role="title" data-bind="i18n: 'Free Shipping Information'"></div>

    <p class="desc" data-bind="i18n: 'Here add custom Free shipping text..'"></p>

</div>

<div class="table-rate-shipping-info" data-bind="visible: showTableRateShippingInfo()" style="display: none;">

    <div class="step-title" data-role="title" data-bind="i18n: 'Table Rate Delivery'"></div>

    <p class="desc" data-bind="i18n: 'Here add custom Table Rate shipping text..'"></p>

</div>

Step 2: Create a Layout file in the following path.


{{magento_root}}\app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml


Then add the code as given below.


<?xml version="1.0"?>

<page layout="1column" 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="shippingAdditional" xsi:type="array">

                                                            <item name="component" xsi:type="string">uiComponent</item>

                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>

                                                            <item name="children" xsi:type="array">

                                                                <item name="shipping-info-wrapper" xsi:type="array">

                                                                    <item name="component" xsi:type="string">Vendor_Extension/js/view/shipping-info</item>

                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>

                                                                    <item name="sortOrder" xsi:type="string">0</item>

                                                                </item>

                                                            </item>

                                                        </item>

                                                    </item>

                                                </item>

                                            </item>

                                        </item>

                                    </item>

                                </item>

                            </item>

                        </item>

                    </item>

                </argument>

            </arguments>

        </referenceBlock>

    </body>

</page>

Step 3: Create a Javascript file at the below-mentioned file


{{magento_root}}\app\code\Vendor\Extension\view\frontend\web\js\view\shipping-info.js


Now add the following code snippet


define([

    'uiComponent',

    'ko',

    'Magento_Checkout/js/model/quote'

 

], function (Component, ko, quote) {

    'use strict';

 

    return Component.extend({

        defaults: {

            template: 'Vendor_Extension/shipping-info'

        },

 

        initObservable: function () {

            var self = this._super();

            this.showFreeShippingInfo = ko.computed(function() {

                var method = quote.shippingMethod();

 

                if(method && method['carrier_code'] !== undefined) {

                    if(method['carrier_code'] === 'freeshipping') {

                        return true;

                    }

                }

 

                return false;

 

            }, this);

 

            this.showTableRateShippingInfo = ko.computed(function() {

                var method = quote.shippingMethod();

 

                if(method && method['carrier_code'] !== undefined) {

                    if(method['carrier_code'] === 'tablerate') {

                        return true;

                    }

                }

 

                return false;

 

            }, this);

 

            return this;

        }

    });

});

Step 4: After that, run the below commands in terminal


php bin/magento setup:static-content:deploy -f

php bin/magento setup:di:compile

php bin/magento cache:flush

Comments

Post a Comment

Popular posts from this blog

Add Admin User name and Action name in Order Comment Section through Action Performed from Sales Order Grid in Magento 2

  Step 1:  First, we need to create an “events.xml“ file inside our extension at the following path app\code\Vendor\Extension\etc\adminhtml\ Then add the code as follows. <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">     <event name="sales_order_save_after">         <observer name="sales_order_save_after_comment_history_add"           instance="\Vendor\Extension\Observer\OrderSaveAfter" />     </event> </config> Step 2:  After that, we need to create an “OrderSaveAfter.php” file inside our extension at the following path app\code\Vendor\Extension\Observer\ And embed the code as given below. <?php  namespace Vendor\Extension\Observer;   use Magento\Framework\Event\ObserverInterface; use Magento\Framework\App\RequestInterface; use Magento\Backen...
Read more

How to Update Product Stock Programmatically in Magento 2

 Steps to Update Product Stock Programmatically in Magento 2: Step 1: We need to create a “Data.php” file inside our extension at the following path app\code\Vendor\Extension\Helper\ Now add the code as follows <?php namespace Vendor\Extension\Helper;   class Data extends \Magento\Framework\App\Helper\AbstractHelper {     protected $_productobj;     protected $_stockRegistry;       public function __construct(         \Magento\Framework\App\Helper\Context $context,         \Magento\Catalog\Model\Product $productobj,         \Magento\CatalogInventory\Api\StockRegistryInterface $stockRegistry,      ) {         $this->_productobj = $productobj;         $this->_stockRegistry = $stockRegistry;         parent::__construct($context);     }       public function updateProductStock($pr...
Read more

How to Set and Get Cookie in Magento 2

 <?php namespace Vendor\Extension\Model; class Customcookie {     private $customCookieManager;     private $customCookieMetadataFactory;     public function __construct(         \Magento\Framework\Stdlib\CookieManagerInterface $customCookieManager,         \Magento\Framework\Stdlib\Cookie\CookieMetadataFactory $customCookieMetadataFactory)    {         $this->customCookieManager = $customCookieManager;         $this->customCookieMetadataFactory = $customCookieMetadataFactory;     }     public function setCookie()     {         $customCookieMetadata = $this->customCookieMetadataFactory->createPublicCookieMetadata();         $customCookieMetadata->setDurationOneYear();         $customCookieMetadata->setPath('/');         $customCookieMe...
Read more