Magento – Magento 2: How to add additional block on checkout page

blockscheckoutcustommagento-2.1.3magento2

I would like to override the below file & display my custom block in the li.

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

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
    <div class="step-title" data-bind="i18n: 'Shipping Address'" data-role="title"></div>
</li>   

<!-- ko if:myBlock --> // Mine need to call block created from Admin
<li>
    <p data-bind="html: myBlock"></p>
</li> 
<!-- /ko -->

<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div class="step-title" data-bind="i18n: 'Shipping Methods'" data-role="title"></div>
    </div>
</li>

If the block is enabled in the admin then it will show a custom li with the block data, otherwise it shows nothing.

Can we check directly in the .html file whether the block is enabled or not?

Best Answer

Here I give example to show custom block above shipping method of checkout

Create di.xml at

app/code/Vendor/Module/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="cms_block_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Create ConfigProvider.php to define your static block to windows.checkoutConfig

app/code/Vendor/Module/Model/ConfigProvider.php

<?php

namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
{
    /** @var LayoutInterface  */
    protected $_layout;

    public function __construct(LayoutInterface $layout)
    {
        $this->_layout = $layout;
    }

    public function getConfig()
    {
        $myBlockId = "my_static_block"; // CMS Block Identifier
        //$myBlockId = 20; // CMS Block ID

        return [
            'my_block_content' => $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($myBlockId)->toHtml()
        ];
    }
}

Override checkout_index_index.xml in your module and define your own shipping component

app/code/Vendor/Module/view/frontend/layout/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="shipping_custom_block" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Vendor_Module/js/view/shipping/customblock</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

Now create shipping.js and define your own shipping template file

app/code/Vendor/Module/view/frontend/web/js/view/shipping/customblock.js

define(
    [
        'uiComponent',
        'jquery',
        'ko'
    ],
    function(
        Component,
        $,
        ko
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/shipping/customblock'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);

Create customblock.html

<div data-bind="html: window.checkoutConfig.my_block_content"></div>

Here I add new product widget in my static block

OUTPUT:

Related Solutions

Magento 2 – Fix Shipping Method Prices Not Showing in Checkout

I got it working! I needed to included the Magento_Tax/js/view/checkout/shipping_method/price component (and display area) as a child of my new step module in my checkout_index_index.xml:

#app/code/Mike/Checkout/view/frontend/layout/checkout_index_index.xml

<item name="shipping-methods" xsi:type="array">
<item name="component" xsi:type="string">Mike_Checkout/js/view/shipping-methods</item>
<item name="sortOrder" xsi:type="string">1</item>
<item name="children" xsi:type="array">
    <item name="price" xsi:type="array">
        <item name="component" xsi:type="string">Magento_Tax/js/view/checkout/shipping_method/price</item>
        <item name="displayArea" xsi:type="string">price</item>
    </item>
</item>

Magento2 – How to Get Guest Email Early in Checkout

Method 1.

When a custom enter email the following file function are called to validate the email

Magento_Checkout/web/js/view/form/element/email.js

Look the function

emailHasChanged: function () {
        var self = this;

        clearTimeout(this.emailCheckTimeout);

        if (self.validateEmail()) {
            quote.guestEmail = self.email();
            checkoutData.setValidatedEmailValue(self.email());
        }
        this.emailCheckTimeout = setTimeout(function () {
            if (self.validateEmail()) {     
               self.checkEmailAvailability();
            } else {
                self.isPasswordVisible(false);
            }
        }, self.checkDelay);

        checkoutData.setInputFieldEmailValue(self.email());
    },

Inside this function quote.guestEmail gives you the email, you can fire an ajax and save that in seesion and use.

Another option saves the email in the browser cookie

$.cookie("checkoutemail", self.email());

and retrieve the cookie value.

Method 2.

Override the following file:-

Magento\Customer\Model\AccountManagement.php

Replace the following function:-

public function isEmailAvailable($customerEmail, $websiteId = null)
{
    $objectManager   =  \Magento\Framework\App\ObjectManager::getInstance();
    $checkoutSession = $objectManager->get('\Magento\Checkout\Model\Session');
    $checkoutSession->setGuestCustomerEmail($customerEmail);
    try {
        if ($websiteId === null) {
            $websiteId = $this->storeManager->getStore()->getWebsiteId();
        }

        $this->customerRepository->get($customerEmail, $websiteId);
        return false;
    } catch (NoSuchEntityException $e) {
        return true;
    }
}

Use the following to retrieve the email:-

$objectManager   =  \Magento\Framework\App\ObjectManager::getInstance();
$checkoutSession = $objectManager->get('\Magento\Checkout\Model\Session');
$guestEmail = $checkoutSession->getGuestCustomerEmail();

Follow this to override model

https://magenticians.com/override-model-magento-2/

Best Answer

Related Solutions

Magento 2 – Fix Shipping Method Prices Not Showing in Checkout

Magento2 – How to Get Guest Email Early in Checkout

Related Topic