Magento 2: Wie füge ich einen zusätzlichen Block auf der Checkout-Seite hinzu?

10

Ich möchte die obige Datei überschreiben und meinen benutzerdefinierten Block in der anzeigen li.

Magento \ Vendor \ Magento \ Modul-Checkout \ Ansicht \ Frontend \ Web \ Vorlage \ Versand.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>

Wenn der Block im Administrator aktiviert ist, wird eine benutzerdefinierte Version limit den Blockdaten angezeigt, andernfalls wird nichts angezeigt.

Können wir direkt in der .htmlDatei überprüfen, ob der Block aktiviert ist oder nicht?

magento2 checkout blocks custom magento-2.1.3 Ankit Shah
quelle
magento.stackexchange.com/questions/142680/…
Alex Constantinescu
Hi @AlexConstantinescu Möchte oben Versandart anzeigen
Ankit Shah

Antworten:

17

Hier gebe ich ein Beispiel, um einen benutzerdefinierten Block über der Versandart der Kaufabwicklung anzuzeigen

1) Erstellen Sie di.xml unter

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>

2) Erstellen Sie ConfigProvider.php , um Ihren statischen Block für windows.checkoutConfig zu definieren

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()
        ];
    }
}

3) Überschreiben Sie checkout_index_index.xml in Ihrem Modul und definieren Sie Ihre eigene Versandkomponente

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="component" xsi:type="string">Vendor_Module/js/view/shipping</item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

4) Erstellen Sie nun Versand.js und definieren Sie Ihre eigene Versandvorlagendatei

App / Code / Anbieter / Modul / Ansicht / Frontend / Web / js / Ansicht / Versand.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) Kopieren Sie Versand.html von

Hersteller / Magento / Modul-Kasse / Ansicht / Frontend / Web / Vorlage / Versand.html

Zu Ihrem Modul

App / Code / Anbieter / Modul / Ansicht / Frontend / Web / Vorlage / Versand.html

Nun fügen Sie window.checkoutConfig.my_block_content zu shipping.html , wo Sie Ihre statischen Block zeigen wollen

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

Hier füge ich meinem statischen Block ein neues Produkt-Widget hinzu

AUSGABE:

Geben Sie hier die Bildbeschreibung ein

Prinz Patel
quelle
Ich habe das gleiche getan, aber nicht funktioniert. Ich kann statischen Blockinhalt auf dieser Registerkarte nicht sehen.
Sarfaraj Sipai
@Prince, was soll ich tun, um den Block unter "Versandmethoden" anzuzeigen?
Vinaya Maheshwari
1
@ VinayaMaheshwari Platzieren Sie Ihre Block Div ​​am letzten in shipping.html, um Block nach Versandart anzuzeigen
Prince Patel
1
@ VinayaMaheshwari Es muss Browser-Cache sein. Überprüfen Sie diese Antwort auf verschiedene Weise, um Änderungen von Knockout-JS- und HTML-Dateien zu überprüfen: magento.stackexchange.com/a/227290/35758
Prince Patel
1
Ja! Es war Browser-Cache, danke für Ihre Hilfe.
Vinaya Maheshwari
4

Dies habe ich getan, um einen CMS-Block auf der Checkout-Seite unter der Seitenleiste anzuzeigen. 1. In der Datei templates / onepage.phtml habe ich eine js-Variable erstellt, die den Inhalt des cms-Blocks wie folgt enthält:

<?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 der Knockout-Vorlagendatei (in meinem Fall web / js / template / sidebar.html) wurde der Inhalt des cms-Blocks aus der obigen js-Variablen wie folgt angezeigt:

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

Hoffe das hilft jemandem! Vielen Dank!

Siju Joseph
quelle
Einfache Lösung. Nur erforderlich, um benutzerdefinierte onepage.phtml vorzubereiten. Ich habe diese magento.stackexchange.com/questions/127150/…
Gediminas
Wissen Sie, was ich tun soll, wenn ich es dem Zahlungsschritt hinzufügen möchte? Ich habe versucht, das, was Sie oben erwähnt haben, zu Vendor / Magento / Module-Checkout / View / Frontend / Web / Template / Onepage.html und Payment.html hinzuzufügen, aber es hat keine Auswirkungen. magento.stackexchange.com/questions/296500/…
Kris Wen
payment.html sollte über onepage.phtml auf die Variable js zugreifen können.
Stellen
-1

statischen Block in phtml hinzufügen fie:

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

Block mit XML hinzufügen:

<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 in cms-Seite hinzufügen:

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