0

How to get the value of a custom block in Knockout Shipping's template. My code is: Vendor/Extension/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">
            <block class="Vendor\Extension\Block\GooglePayButton" name="adyen.googlepay.mini-cart">
                 <action method="setTemplate" ifconfig="amasty_checkout/general/enabled">
                <argument name="setTemplate" xsi:type="string">Vendor_Extension::googlepay/shortcutcustom.phtml</argument>
            </action>
            </block>
        </referenceBlock>
        <referenceBlock name="page.main.title" remove="true"/> 
    </body>
</page>

phtml File : Vendor/Extension/view/frontend/templates/googlepay/shortcutcustom.phtml

<div class="custom-content">
    <div class="express-checkout">Express checkout</div>
    <?php echo $block->getGooglePayButton(); 
   ?>
</div>

And Knockout template file is:..

<li id = "custom-block-value"> how to get custom block value hrere</li>
<li id="shipping" class="checkout-shipping-address amcheckout-shipping-address" data-bind="fadeVisible: visible()">
    <p class="step-title amcheckout-title"
       data-amcheckout-js="step-title"
       data-bind="i18n: getNameShippingAddress()"
       data-role="title"></p>
    <div id="checkout-step-shipping"
         class="step-content amcheckout-content"
         data-amcheckout-js="step-content"
         data-role="content"
         data-bind="mageInit: {'checkoutCollapsibleSteps': {}}">
        <div class="amcheckout-wrapper">
            <!-- ko ifnot: quoteIsVirtual -->
            <!-- ko fastForEach: getRegion('customer-email') -->
                    <!-- ko fastForEach: getRegion('amazon-button-region') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <!--/ko-->

            <!-- ko fastForEach: getRegion('address-list') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->

            <!-- ko fastForEach: getRegion('address-list-additional-addresses') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->

            <!-- ko ifnot: isFormInline -->
            <!-- ko ifnot: window.isShippingAddressFormOverridden -->
            <!-- Address form pop up -->
            <button type="button"
                    data-bind="click: showFormPopUp, visible: !isNewAddressAdded()"
                    class="action action-show-popup amcheckout-button -new-address">
                <span data-bind="i18n: 'New Address'"></span></button>
            <div id="opc-new-shipping-address" data-bind="visible: isFormPopUpVisible">
                <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
            </div>
            <!-- /ko -->
            <!-- /ko -->

            <!-- ko fastForEach: getRegion('before-form') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->

            <!-- Inline address form -->
            <!-- ko if: isFormInline -->
            <!-- ko template: 'Magento_Checkout/shipping-address/form' --><!-- /ko -->
            <!-- /ko -->

            <!-- ko fastForEach: getRegion('billing-address-form-shared') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
    </div>
</li>

1 Answer 1

1
  1. Create a config provider which will create your custom block on __construct

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

<?php

namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Store\Model\ScopeInterface;

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

    /**
    * Configuration path enable module
    */
    const XML_PATH_CUSTOM_ENABLED = 'your_section/your_group/enabled';
    
    /**
    * @var ScopeConfigInterface
    */
    protected $_scopeConfig;

    /**
     * @param LayoutInterface $layout
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        LayoutInterface $layout, 
        $scopeConfig
    ){
        $this->_layout = $layout;
        $this->_scopeConfig = $scopeConfig;
        $this->block = $this->constructBlock();
    }

    /**
     * Create custom block
     * 
     * @return string
     */
    public function constructBlock(){
        $enabledModule = $this->_scopeConfig->getValue(self::XML_PATH_CUSTOM_ENABLED,ScopeInterface::SCOPE_STORE);
       
        if ($enabledModule) {
            $html =  $this->_layout->createBlock('your_block_class')
                            ->setTemplate('Vendor_Module::path_to_template.phtml')
                            ->toHtml();
        } else {
            $html = '';
        }

        return $html;
    }

    /**
     * Get config
     * 
     * @return array
     */
    public function getConfig()
    {
        return [
            'custom_block' => $this->block
        ];
    }
}
  1. Add your custom config provider to the list

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="custom_block_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>
  1. Add a JS component to the checkout layout

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

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="custom-block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor/Module/js/view/custom-block</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>
  1. Create a JS component

app/code/Vendor/Module/view/frontend/web/js/view/custom-block.js

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

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

        });
    }
);
  1. Render your custom block in knockout template

app/code/Vendor/Module/view/frontend/web/template/custom_block.html

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

Your custom block should now be visible before shipping address.

5
  • my block content should be showing on before shipping details.. Commented Apr 3 at 12:40
  • You mean before shipping address? Check above edited answer. Commented Apr 3 at 13:26
  • yes.. my block should be displayed before shipping details Commented Apr 3 at 13:27
  • And also one thing how to call this "<?= $block->getChildHtml('adyen.googlepay.mini-cart'); ?>" block before shipping details on onepage checkout Commented Apr 3 at 13:38
  • $childBlock = $this->_layout->createBlock('child_block_class'); $parentBlock->addChild($childBlock); Commented Apr 3 at 14:02

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.