comment ajouter un bloc personnalisé aux méthodes d'expédition ci-dessous lors du paiement en une page?

11

Je veux ajouter un bloc personnalisé sous les méthodes d'expédition et ce bloc personnalisé devrait être à l'intérieur du formulaire de méthode d'expédition. Je pense que la ligne de code suivante est utile pour ajouter ceci, mais je ne sais pas comment procéder.

<div id="onepage-checkout-shipping-method-additional-load">
                    <!-- ko foreach: getRegion('shippingAdditional') -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!-- /ko -->
                </div>
magento2 Sivakumar K
la source

Réponses:

43

1. Déclarez la dépendance à la sortie du module

app / code / NameSpace / ModuleName / etc / module.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NameSpace_ModuleName" setup_version="0.0.1" active="true">
        <sequence>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

2. Écraser la disposition de paiement

app / code / NameSpace / ModuleName / view / frontend / layout / checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="children" xsi:type="array">
                                                        <item name="shippingAdditional" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="additional_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">NameSpace_ModuleName/js/view/checkout/shipping/additional-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

3. Créer un composant d'interface utilisateur JavaScript

Le contrôle de Magento 2 est géré en JavaScript (avec Knockout). Vous devez donc créer un composant JS personnalisé. Il créera le lien entre le composant d'interface utilisateur de paiement et votre modèle HTML personnalisé.

app / code / NameSpace / ModuleName / view / frontend / web / js / view / checkout / shipping / additional-block.js

définir([
    «uiComponent»

], fonction (Composant) {
    «utiliser strictement»;

    return Component.extend ({
        par défaut: {
            modèle: 'NameSpace_ModuleName / checkout / shipping / additional-block'
        }
    });
});

4. Créer un modèle HTML

Créez ensuite le modèle HTML qui va s'afficher lors du paiement.

app / code / NameSpace / ModuleName / view / frontend / web / template / checkout / shipping / additional-block.html

<div class="checkout-block" id="block-custom">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>

5. Vider le cache

Enfin, exécutez les commandes suivantes: 

php bin/magento cache:clean
php bin/magento setup:upgrade
chmod -R 777 var/*

Téléchargez un exemple complet de module de démonstration ici

Sohel Rana
la source
1
vous êtes vraiment génial.il n'y a pas de fin pour magento community.its evergreen
Sivakumar K
Avez-vous eu ces erreurs? Broken reference: No element found with ID 'checkout.header.wrapper'. [] [] Class SR\AdditionalShippingBlock\Model\CustomBlockConfigProvider does not exist [] [] [2016-04-13 10:15:06] main.CRITICAL: Invalid block type: Magento\Checkout\Block\Onepage [] []
Thiago Figueiro
Astuce pour les autres noobs: le module doit entrer app/code/SR/AdditionalShippingBlock, non app/code/Magento/AdditionalShippingBlock.
Thiago Figueiro
@ sohel rana, je voudrais une liste déroulante dynamique au lieu d'un champ de texte au même endroit, donnez-moi une suggestion pour cela. Merci.
Rakesh Jesadiya
Est ce réel? : S wtf
OZZIE
7

Dans le fichier présenté "checkout_index_index.xml" il y a une petite erreur. Ce doit être

<?xml version="1.0"?>

ne pas 

<xml version="1.0"?>

Mlle premier char '?'

Marcin Korzystka
la source
Cela aurait pu être un éloge à la réponse de Sohel. Dans tous les cas le fichier est correct dans son repo github.com/sohelrana09/…
Thiago Figueiro
Oui bien sûr. Mais je dois avoir 50
points de