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?
-
magento.stackexchange.com/questions/142680/…Alex Constantinescu– Alex Constantinescu2017年02月04日 12:33:33 +00:00Commented Feb 4, 2017 at 12:33
-
Hi @AlexConstantinescu Would like to display above Shipping MethodJackson– Jackson2017年02月06日 01:35:12 +00:00Commented Feb 6, 2017 at 1:35
4 Answers 4
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:
answered May 27, 2017 at 11:35
Prince Patel
23.1k10 gold badges102 silver badges124 bronze badges
-
i have did the same but not working. i cant see static block content at this tab.Sarfaraj Sipai– Sarfaraj Sipai2017年12月21日 08:52:46 +00:00Commented Dec 21, 2017 at 8:52
-
@Prince, what should I do to display block below "Shipping methods"?Vinaya Maheshwari– Vinaya Maheshwari2018年05月25日 11:51:36 +00:00Commented May 25, 2018 at 11:51
-
1@VinayaMaheshwari place your block div at the last in
shipping.htmlto show block after shipping methodPrince Patel– Prince Patel2018年05月25日 12:05:03 +00:00Commented May 25, 2018 at 12:05 -
1@VinayaMaheshwari It must be browser cache. Check this answer for diffrent way to check changes of knockout js and html files: magento.stackexchange.com/a/227290/35758Prince Patel– Prince Patel2018年05月25日 12:41:10 +00:00Commented May 25, 2018 at 12:41
-
1its not workingDivya Sekar– Divya Sekar2019年06月26日 11:36:29 +00:00Commented Jun 26, 2019 at 11:36
This is what I did to display a CMS block on checkout page under sidebar. 1. In the templates/onepage.phtml I created a js variable to hold the cms block content like this:
<?php $myCmsBlock = $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('my_cms_block')->toHtml() ?>
<script type="text/javascript">
var my_cms_block = <?php echo json_encode($myCmsBlock)?>;
</script>
2. In the knockout template file (in my case it was web/js/template/sidebar.html), displayed the cms block content from the above js variable like this:
<div class="opc-help-cms" data-bind="html:my_cms_block">
</div>
Hope this helps someone! Thanks!
answered Sep 20, 2017 at 18:07
Siju Joseph
8158 silver badges6 bronze badges
-
Simple solution. Just needed to prepare custom onepage.phtml. I used this magento.stackexchange.com/questions/127150/…Gediminas– Gediminas2017年10月27日 14:03:04 +00:00Commented Oct 27, 2017 at 14:03
-
do you know what should i do if i want to add it to payment step? i tried to add what you mentioned above to vendor/magento/module-checkout/view/frontend/web/template/onepage.html and payment.html but doesn't make any effect. magento.stackexchange.com/questions/296500/…Mage Explorer– Mage Explorer2019年11月21日 23:00:29 +00:00Commented Nov 21, 2019 at 23:00
-
payment.html should be able to access the js variable from onepage.phtml. Make sure its rendered properly by printing it on console in checkout pageSiju Joseph– Siju Joseph2019年12月05日 11:27:00 +00:00Commented Dec 5, 2019 at 11:27
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\CustomConfigProvider</item>
</argument>
</arguments>
</type>
<type name="Vendor\Module\Model\CustomConfigProvider">
<arguments>
<argument name="blockId" xsi:type="string">my_static_block</argument>
</arguments>
</type>
</config>
Now Create CustomConfigProvider.php
<?php
namespace Vendor\Module\Model;
use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;
class CustomConfigProvider implements ConfigProviderInterface
{
/** @var LayoutInterface */
protected $_layout;
public function __construct(LayoutInterface $layout, $blockId)
{
$this->_layout = $layout;
$this->cmsBlock = $this->constructBlock($blockId);
}
public function constructBlock($blockId)
{
$block = $this->_layout->createBlock('Magento\Cms\Block\Block')->setBlockId($blockId)->toHtml();
return $block;
}
public function getConfig()
{
return [
'my_block_content' => $this->cmsBlock
];
}
}
Because the variable has been added to the global window.checkoutConfig variable, now you can use window.checkoutConfig.cms_block variable to call that content.
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>
Override checkout_index_index.xml in your module
<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>
IMPORTANT :-
My answer is almost same as Prince's Answer. just I declared
CMS Block Identifierin frontend/di.xml instead of write it inCustomConfigProvider. I passed CMS Block Identifier using di.xml instead of hard coded in CustomConfigProvider.php file
answered Jul 2, 2022 at 7:39
Harsh Patel
2391 silver badge13 bronze badges
-
for refenece mageplaza.com/devdocs/…Harsh Patel– Harsh Patel2022年07月02日 07:44:36 +00:00Commented Jul 2, 2022 at 7:44
add static block in phtml fie :
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>
add block using XML :
<referenceContainer name="content">
<block class="Magento\Cms\Block\Block" name="block_identifier">
<arguments>
<argument name="block_id" xsi:type="string">block_identifier</argument>
</arguments>
</block>
</referenceContainer>
add block in cms page :
{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}
Piyush
5,9249 gold badges35 silver badges67 bronze badges
answered Jul 4, 2017 at 13:27
Charvi Parikh
1,35916 silver badges25 bronze badges
Explore related questions
See similar questions with these tags.
default