Magento 2: Comment ajouter un bloc supplémentaire sur la page de paiement?

11

Je voudrais remplacer le fichier ci-dessus et afficher mon bloc personnalisé dans le 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>

Si le bloc est activé dans l'admin, il affichera une personnalisation liavec les données du bloc, sinon il n'affichera rien.

Pouvons-nous vérifier directement dans le .htmlfichier si le blocage est activé ou non?

magento2 checkout blocks custom magento-2.1.3 Ankit Shah
la source
magento.stackexchange.com/questions/142680/…
Alex Constantinescu
Salut @AlexConstantinescu J'aimerais afficher ci-dessus Méthode d'expédition
Ankit Shah

Réponses:

20

Ici, je donne un exemple pour montrer un bloc personnalisé au-dessus de la méthode d'expédition de la caisse

1) Créez di.xml à

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) Créez ConfigProvider.php pour définir votre bloc statique sur windows.checkoutConfig

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) Remplacez checkout_index_index.xml dans votre module et définissez votre propre composant d'expédition

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) Créez maintenant shipping.js et définissez votre propre fichier de modèle d'expédition

application / code / fournisseur / module / vue / frontend / web / js / vue / 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) Copiez le fichier shipping.html de

fournisseur / magento / module-checkout / view / frontend / web / template / shipping.html

Vers votre module

application / code / fournisseur / module / vue / frontend / web / modèle / shipping.html

Ajoutez maintenant window.checkoutConfig.my_block_content à shipping.html où vous souhaitez afficher votre bloc statique

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

Ici, j'ajoute un nouveau widget de produit dans mon bloc statique

PRODUCTION:

entrez la description de l'image ici

Prince Patel
la source
j'ai fait la même chose mais ne travaille pas. je ne peux pas voir le contenu du bloc statique dans cet onglet.
Sarfaraj Sipai
@Prince, que dois-je faire pour afficher le bloc sous "Modes d'expédition"?
Vinaya Maheshwari
1
@VinayaMaheshwari placez votre div de bloc au dernier shipping.htmlpour afficher le bloc après la méthode d'expédition
Prince Patel
1
@VinayaMaheshwari Il doit s'agir du cache du navigateur. Consultez cette réponse pour trouver un moyen différent de vérifier les modifications des fichiers knockout js et html: magento.stackexchange.com/a/227290/35758
Prince Patel
1
Ouais! c'était le cache du navigateur, merci pour votre aide.
Vinaya Maheshwari
4

C'est ce que j'ai fait pour afficher un bloc CMS sur la page de paiement sous la barre latérale. 1. Dans le fichier templates / onepage.phtml, j'ai créé une variable js pour contenir le contenu du bloc cms comme ceci:

<?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. Dans le fichier de modèle knockout (dans mon cas, c'était web / js / template / sidebar.html), le contenu du bloc cms de la variable js ci-dessus était affiché comme ceci:

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

J'espère que cela aide quelqu'un! Merci!

Siju Joseph
la source
Solution simple. Juste besoin de préparer onepage.phtml personnalisé. J'ai utilisé ce magento.stackexchange.com/questions/127150/…
Gediminas
savez-vous que dois-je faire si je veux l'ajouter à l'étape de paiement? j'ai essayé d'ajouter ce que vous avez mentionné ci-dessus à vendor / magento / module-checkout / view / frontend / web / template / onepage.html et payment.html mais cela n'a aucun effet. magento.stackexchange.com/questions/296500/…
Kris Wen
payment.html devrait pouvoir accéder à la variable js depuis onepage.phtml. Assurez-vous que son rendu est correct en l'imprimant sur la console dans la page de paiement
Siju Joseph
-1

ajouter un bloc statique dans fie phtml:

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

ajouter un bloc en utilisant 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>

ajouter un bloc dans la page cms:

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