Magento 2: चेकआउट पेज पर अतिरिक्त ब्लॉक कैसे जोड़ें?

मैं उपरोक्त फ़ाइल को ओवरराइड करना चाहूंगा और अपने कस्टम ब्लॉक को प्रदर्शित करूंगा li।

Magento \ विक्रेता \ Magento \ मॉड्यूल-चेकआउट \ दृश्य \ दृश्यपटल \ वेब \ टेम्पलेट \ 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फ़ाइल को सीधे देख सकते हैं कि ब्लॉक को सक्षम किया गया है या नहीं?

— अंकित शाह
स्रोत

magento.stackexchange.com/questions/142680/…

— एलेक्स कॉन्स्टेंटिंसक्यू

Hi @AlexConstantinescu शिपिंग विधि के ऊपर प्रदर्शित करना चाहेगा

— अंकित शाह

जवाबों:

यहां मैं चेकआउट की शिपिंग विधि के ऊपर कस्टम ब्लॉक दिखाने के लिए उदाहरण देता हूं

1) पर di.xml बनाएँ

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / 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) अपने स्थिर ब्लॉक को windows.checkoutConfig में परिभाषित करने के लिए ConfigProvider.php बनाएं

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / मॉडल / 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 बनाएं और अपनी खुद की शिपिंग टेम्पलेट फ़ाइल को परिभाषित करें

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / देखें / दृश्यपटल / वेब / js / देखें / 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) से शिपिंग . html कॉपी करें

विक्रेता / Magento / मॉड्यूल-चेकआउट / देखें / दृश्यपटल / वेब / टेम्पलेट / shipping.html

करने के लिए आपका मॉड्यूल

एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / देखें / दृश्यपटल / वेब / टेम्पलेट / shipping.html

अब window.checkoutConfig.my_block_content को shipping.html में जोड़ें जहाँ आप अपना स्टैटिक ब्लॉक दिखाना चाहते हैं

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

यहां मैं अपने स्टैटिक ब्लॉक में नए उत्पाद विजेट जोड़ता हूं

उत्पादन:

— प्रिंस पटेल
स्रोत

मैंने वही किया है, लेकिन काम नहीं कर रहा। मैं इस टैब पर स्थिर ब्लॉक सामग्री नहीं देख सकता।

— सरफराज सिपाई

@Prince, मुझे "शिपिंग विधियों" के नीचे ब्लॉक प्रदर्शित करने के लिए क्या करना चाहिए?

— विनय माहेश्वरी

@VinayaMaheshwari shipping.htmlशिपिंग विधि के बाद ब्लॉक दिखाने के लिए अपने ब्लॉक दिवा को अंतिम स्थान पर रखें

— प्रिंस पटेल

@VinayaMaheshwari यह ब्राउज़र कैश होना चाहिए। नाकआउट js और HTML फ़ाइलों के परिवर्तनों की जांच करने के लिए इस तरीके की जांच करें: magento.stackexchange.com/a/227290/35758

— प्रिंस पटेल

हाँ! यह ब्राउज़र कैश था, आपकी मदद के लिए धन्यवाद।

— विनय माहेश्वरी

यह वही है जो मैंने साइडबार के तहत चेकआउट पृष्ठ पर सीएमएस ब्लॉक प्रदर्शित करने के लिए किया था। 1. टेम्प्लेट / onepage.phtml में मैंने cs ब्लॉक कंटेंट को इस तरह से होल्ड करने के लिए एक js वेरिएबल बनाया है:

<?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. नॉकआउट टेम्पलेट फ़ाइल में (मेरे मामले में यह वेब / js / टेम्पलेट / sidebar.html था), इस तरह से उपरोक्त जेएस चर से सेमी ब्लॉक सामग्री प्रदर्शित की:

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

आशा है कि यह किसी की मदद करता है! धन्यवाद!

— सिजू जोसेफ
स्रोत

सरल उपाय। बस कस्टम onepage.phtml तैयार करने की जरूरत है। मैंने इस magento.stackexchange.com/questions/127150/…

— Gediminas

क्या आप जानते हैं कि अगर मैं इसे भुगतान चरण में जोड़ना चाहता हूं तो मुझे क्या करना चाहिए? मैंने आपको ऊपर बताए गए वेंडर / मैगनेटो / मॉड्यूल-चेकआउट / व्यू / फ्रंटेंड / वेब / टेम्प्लेट / 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>

सेमी पृष्ठ में ब्लॉक जोड़ें:

{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}

— चारवी पारिख
स्रोत