Magento 2：如何在结帐页面上添加其他块？

11

我想覆盖上面的文件并在中显示我的自定义块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>

如果在管理员中启用li了该阻止，则它将显示带有阻止数据的自定义内容，否则不显示任何内容。

.html无论是否启用了阻止功能，我们都可以直接在文件中签入吗？

magento2  checkout  blocks  custom  magento-2.1.3 
— 安吉·沙（Ankit Shah）
source
— 亚历克斯·康斯坦丁
嗨@AlexConstantinescu想在上方显示运输方式
— Ankit Shah

Answers:

20

这里我举个例子来展示自定义块上方的结帐方式

1）创建di.xml在

应用程序/代码/供应商/模块/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>

2）创建ConfigProvider.php以将您的静态块定义为windows.checkoutConfig

应用/代码/供应商/模块/模型/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()
        ];
    }
}

3）在您的模块中覆盖checkout_index_index.xml并定义您自己的运输组件

应用/代码/供应商/模块/视图/前端/布局/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="component" xsi:type="string">Vendor_Module/js/view/shipping</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

4）现在创建shipping.js并定义您自己的运输模板文件

应用/代码/供应商/模块/视图/前端/web/js/view/shipping.js

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

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

        });
    }
);

5）从以下位置复制shipping.html

供应商/magento/module-checkout/view/frontend/web/template/shipping.html

到您的模块

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

现在，将window.checkoutConfig.my_block_content添加到shipping.html中要显示静态块的位置

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

在这里，我在静态块中添加了新产品小部件

输出：

在此处输入图片说明

— 帕特尔王子
source
我做了同样的事，但没有工作。我在此标签上看不到静态块内容。
— Sarfaraj Sipai
@Prince，我该怎么做才能在“运输方式”下方显示块？
— Vinaya Maheshwari，
1
@VinayaMaheshwari将您的区块div放到最后，shipping.html以显示运输方法后的区块
— 帕特尔王子（Prince Patel），
1
@VinayaMaheshwari必须是浏览器缓存。检查此答案以了解检查剔除js和html文件的更改的不同方法：magento.stackexchange.com/a/227290/35758
— 帕特尔王子（Prince Patel），
1
是的 这是浏览器缓存，感谢您的帮助。
— Vinaya Maheshwari，
4

这是我在侧边栏下方的结帐页面上显示CMS阻止的操作。1.在templates / onepage.phtml中，我创建了一个js变量来保存cms块内容，如下所示：

<?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.在敲除模板文件（在我的示例中是web / js / template / sidebar.html）中，显示上述js变量中cms块的内容，如下所示：

<div class="opc-help-cms" data-bind="html:my_cms_block">
    </div>

希望这对某人有帮助！谢谢！

— 西朱·约瑟夫
source
简单的解决方案。只需准备自定义的onepage.phtml。我用这个magento.stackexchange.com/questions/127150/...
— 格迪米纳斯
您是否想将其添加到付款步骤中该怎么办？我试图将您上面提到的内容添加到vendor / magento / module-checkout / view / frontend / web / template / onepage.html和payment.html中，但没有任何效果。 magento.stackexchange.com/questions/296500/…–
— 克里斯·温
payment.html应该能够从onepage.phtml访问js变量。请通过打印它控制台结帐页面确保其正确呈现
— 驷驹约瑟夫
-1

在phtml fie中添加静态块：

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

使用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>

在cms页面中添加块：

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}
— 查维·帕里克（Charvi Parikh）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.