Magento 2: วิธีเพิ่มบล็อกเพิ่มเติมในหน้าชำระเงิน?

11

liฉันต้องการจะแทนที่แฟ้มข้างต้นและแสดงบล็อกของฉันเองใน

วีโอไอพี \ ผู้ขาย \ วีโอไอพี \ โมดูลเช็คเอาท์ \ มุมมอง \ ส่วนหน้า \ เว็บ \ แม่แบบ \ 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
แหล่งที่มา
— Alex Constantinescu
สวัสดี @AlexConstantinescu ต้องการแสดงเหนือวิธีการจัดส่ง
— Ankit Shah

คำตอบ:

20

ที่นี่ฉันให้ตัวอย่างเพื่อแสดงบล็อกที่กำหนดเองด้านบนวิธีการจัดส่งของเช็คเอาต์

1) สร้างdi.xmlที่

app / รหัส / ผู้ขาย / โมดูล / etc / ส่วนหน้า / 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

app / รหัส / ผู้ขาย / โมดูล / รุ่น / 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 ในโมดูลของคุณและกำหนดส่วนประกอบการจัดส่งของคุณเอง

app / รหัส / ผู้ขาย / โมดูล / view / ส่วนหน้า / รูปแบบ / 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และกำหนดไฟล์เทมเพลตการจัดส่งของคุณเอง

app / รหัส / ผู้ขาย / โมดูล / view / ส่วนหน้า / เว็บ / 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จาก

ผู้ขาย / วีโอไอพี / โมดูลเช็คเอาต์ / view / ส่วนหน้า / เว็บ / แม่แบบ / shipping.html

ถึงโมดูลของคุณ

app / รหัส / ผู้ขาย / โมดูล / view / ส่วนหน้า / เว็บ / แม่แบบ / shipping.html

ตอนนี้เพิ่มwindow.checkoutConfig.my_block_contentไปที่shipping.htmlที่คุณต้องการแสดงบล็อกสแตติกของคุณ

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

ที่นี่ฉันเพิ่มวิดเจ็ตผลิตภัณฑ์ใหม่ในบล็อกคงที่ของฉัน

เอาท์พุท:

ป้อนคำอธิบายรูปภาพที่นี่

— เจ้าชายเทล
แหล่งที่มา
ฉันทำเช่นเดียวกัน แต่ไม่ทำงาน ฉันไม่เห็นเนื้อหาบล็อกแบบคงที่ที่แท็บนี้
— Sarfaraj Sipai
@ ปรินซ์ฉันควรทำอย่างไรเพื่อแสดงบล็อคด้านล่าง "วิธีการจัดส่ง"
— Vinaya Maheshwari
1
@VinayaMaheshwari วาง div บล็อกของคุณไว้ที่ท้ายshipping.htmlเพื่อแสดง block หลังจากวิธีการจัดส่ง
— Prince Patel
1
@VinayaMaheshwari ต้องเป็นแคชของเบราว์เซอร์ ตรวจสอบคำตอบนี้เพื่อหาวิธีที่แตกต่างในการตรวจสอบการเปลี่ยนแปลงของไฟล์ js และ html ที่น่าพิศวง: magento.stackexchange.com/a/227290/35758
— Prince Patel
1
ใช่ มันเป็นแคชของเบราว์เซอร์ขอบคุณสำหรับความช่วยเหลือของคุณ
— Vinaya Maheshwari
4

นี่คือสิ่งที่ฉันทำเพื่อแสดงบล็อก CMS ในหน้าชำระเงินใต้แถบด้านข้าง 1. ในเทมเพลต / 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) แสดงเนื้อหาบล็อก cms จากตัวแปร js ข้างต้นดังนี้:

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

หวังว่านี่จะช่วยใครซักคน! ขอบคุณ!

— Siju Joseph
แหล่งที่มา
ทางออกที่ง่าย เพียงแค่ต้องเตรียม onepage.phtml ที่กำหนดเอง ฉันใช้magento.stackexchange.com/questions/127150/…
— Gediminas
คุณรู้หรือไม่ว่าฉันควรทำอย่างไรถ้าฉันต้องการเพิ่มลงในขั้นตอนการชำระเงิน ฉันพยายามเพิ่มสิ่งที่คุณกล่าวถึงไปยังผู้ขาย / magento / module-checkout / view / frontend / web / แม่แบบ / onepage.html และ payment.html แต่ไม่มีผลใด ๆ magento.stackexchange.com/questions/296500/…
— กริชเหวิน
payment.html ควรสามารถเข้าถึงตัวแปร js ได้จาก onepage.phtml ตรวจสอบให้แน่ใจว่าแสดงผลอย่างถูกต้องโดยพิมพ์ลงบนคอนโซลในหน้าเช็คเอาต์
— Siju Joseph
-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
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.