Magento 2: Làm thế nào để thêm khối bổ sung trên trang thanh toán?


10

Tôi muốn ghi đè lên tệp trên và hiển thị khối tùy chỉnh của mình trong li.

magento \ nhà cung cấp \ magento \ mô-đun kiểm tra \ 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>

Nếu khối được bật trong quản trị viên thì nó sẽ hiển thị một tùy chỉnh livới dữ liệu khối, nếu không, nó sẽ không hiển thị gì.

Chúng ta có thể kiểm tra trực tiếp trong .htmltập tin khi khối được kích hoạt hay không?



Xin chào @AlexConstantinescu Muốn hiển thị ở trên Phương thức giao hàng
Ankit Shah

Câu trả lời:


17

Ở đây tôi đưa ra ví dụ để hiển thị khối tùy chỉnh ở trên phương thức thanh toán

1) Tạo di.xml tại

ứng dụng / mã / Nhà cung cấp / Mô-đun / 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) Tạo ConfigProvider.php để xác định khối tĩnh của bạn với windows.checkoutConfig

ứng dụng / mã / Nhà cung cấp / Mô-đun / Mô hình / 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) Ghi đè checkout_index_index.xml trong mô-đun của bạn và xác định thành phần vận chuyển của riêng bạn

ứng dụng / mã / Nhà cung cấp / Mô-đun / chế độ xem / 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="component" xsi:type="string">Vendor_Module/js/view/shipping</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

4) Bây giờ tạo Shipping.js và xác định tệp mẫu vận chuyển của riêng bạn

ứng dụng / mã / Nhà cung cấp / Mô-đun / chế độ xem / frontend / 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) Sao chép vận chuyển.html từ

nhà cung cấp / magento / mô-đun kiểm tra / xem / frontend / web / template / Shipping.html

Để mô-đun của bạn

ứng dụng / mã / Nhà cung cấp / Mô-đun / lượt xem / frontend / web / template / Shipping.html

Bây giờ hãy thêm window.checkoutConfig.my_block_content vào Shipping.html nơi bạn muốn hiển thị khối tĩnh của mình

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

Ở đây tôi thêm tiện ích sản phẩm mới trong khối tĩnh của mình

ĐẦU RA:

nhập mô tả hình ảnh ở đây


tôi đã làm như vậy nhưng không làm việc Tôi không thể thấy nội dung khối tĩnh tại tab này.
Sarfaraj Sipai

@Prince, tôi nên làm gì để hiển thị khối bên dưới "Phương thức giao hàng"?
Vinaya Maheshwari

1
@VinayaMaheshwari đặt div khối của bạn ở vị trí cuối cùng shipping.htmlđể hiển thị khối sau phương thức giao hàng
Prince Patel

1
@VinayaMaheshwari Nó phải là bộ đệm của trình duyệt. Kiểm tra câu trả lời này để biết cách khác nhau để kiểm tra các thay đổi của tệp js và html loại trực tiếp: magento.stackexchange.com/a/227290/35758
Hoàng tử Patel

1
Vâng! Đó là bộ nhớ cache của trình duyệt, nhờ sự giúp đỡ của bạn.
Vinaya Maheshwari

4

Đây là những gì tôi đã làm để hiển thị một khối CMS trên trang thanh toán dưới thanh bên. 1. Trong các mẫu / onepage.phtml tôi đã tạo một biến js để giữ nội dung khối cms như thế này:

<?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. Trong tệp mẫu loại trực tiếp (trong trường hợp của tôi là web / js / template / sidebar.html), đã hiển thị nội dung khối cms từ biến js ở trên như sau:

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

Hy vọng điều này sẽ giúp được ai đó! Cảm ơn!


Giải pháp đơn giản. Chỉ cần chuẩn bị tùy chỉnh onepage.phtml. Tôi đã sử dụng magento.stackexchange.com/questions/127150/iêu
Gediminas

Bạn có biết tôi nên làm gì nếu tôi muốn thêm nó vào bước thanh toán không? tôi đã cố gắng thêm những gì bạn đã đề cập ở trên vào nhà cung cấp / magento / mô-đun kiểm tra / xem / frontend / web / template / onepage.html và Payment.html nhưng không có tác dụng. magento.stackexchange.com/questions/296500/ Mạnh
Kris Wen

Payment.html sẽ có thể truy cập biến js từ onepage.phtml. Hãy chắc chắn rằng nó được hiển thị đúng bằng cách in trên bảng điều khiển trong trang thanh toán
Siju Joseph

-1

thêm khối tĩnh trong phtml fie:

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

thêm khối bằng 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>

thêm khối trong trang cms:

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.