Déplacement du bloc de formulaire de message cadeau du panier à la caisse étape 1

8

J'essaie de déplacer le bloc Options de cadeau (formulaire de message de cadeau) de la page actuelle du panier d'achat à la première étape de la commande (expédition). Je dois le placer juste sous Méthodes d'expédition. J'ai essayé d'ajouter un module GiftMessage à mon thème et dans celui-ci, j'ai modifié le fichier de mise en page checkout_index_index.xml pour référencer le bloc racine de paiement pour l'insertion du message cadeau, mais cela n'a été d'aucune utilité. Toute aide serait grandement appréciée. Merci!

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="checkout.root">
        <block class="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                        <item name="giftOptionsCart" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceBlock>
</body>

magento2 checkout giftmessage maquina
la source
1
As-tu compris?
jackcar
@maquina avez-vous trouvé une solution?
Kul

Réponses:

5

Tout d'abord, nous devons comprendre comment fonctionne le message cadeau Magento sur la page du panier.

vendor/magento/module-gift-message/view/frontend/templates/cart/gift_options.phtml

Ce fichier est notre lumière. Nous gagnerons beaucoup de temps si nous comprenons sa logique.

window.giftOptionsConfig: cette variable globale utilisée pour la configuration. Nous devons le recréer lors du paiement.

Commençons à implémenter notre logique personnalisée. Créez un nouveau module, ajoutez la logique suivante:

app / code / Vendor / CheckoutDemo / 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="content">
            <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="config" xsi:type="array">
                                                            <item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <!--Gift Options Cart-->
                                                            <item name="giftOptionsCart" xsi:type="array">
                                                                <item name="displayArea" xsi:type="string">gift_options</item>
                                                                <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                                                    <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                                                                </item>
                                                            </item>
                                                            <!--End Gift Option-->
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
            <block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>
        </referenceBlock>
    </body>
</page>

Il y a 3 notes:

-L'étape d'expédition utilisera notre modèle html d'expédition personnalisé. Il est plus facile d'ajouter notre région personnalisée.

<item name="shippingAddress" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">Vendor_CheckoutDemo/shipping</item>
        </item>

-Notre zone de cadeaux: j'ai copié le contenu de vendor/magento/module-gift-message/view/frontend/layout/checkout_cart_index.xml.

<!--Gift Options Cart-->
    <item name="giftOptionsCart" xsi:type="array">
        <item name="displayArea" xsi:type="string">gift_options</item>
        <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
        <item name="config" xsi:type="array">
            <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
            <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
        </item>
    </item>
<!--End Gift Option-->

-La config cadeau

<block class="Magento\Framework\View\Element\Template" name="gift.messages.data" template="Vendor_CheckoutDemo::gift_options.phtml"/>

Créer une application / un code / un fournisseur / CheckoutDemo / view / frontend / templates / gift_options.phtml

<script>
    window.giftOptionsConfig = window.checkoutConfig.giftMessageConfig;
</script>

Nous utilisons la giftOptionsConfigvariable globale car la logique du message cadeau js l'utilisera.

app / code / Vendor / CheckoutDemo / 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="gift_message_checkout_config_provider" xsi:type="object">Vendor\CheckoutDemo\Model\GiftMessageConfigProvider\Proxy</item>
            </argument>
        </arguments>
    </type>
</config>

app / code / Vendor / CheckoutDemo / Model / GiftMessageConfigProvider.php

<?php

namespace Vendor\CheckoutDemo\Model;

class GiftMessageConfigProvider extends \Magento\GiftMessage\Model\GiftMessageConfigProvider
{
    public function getConfig()
    {
        $config = parent::getConfig();
        return ['giftMessageConfig' => $config];
    }
}

Créez le html d'expédition, copiez le contenu de vendor/magento/module-checkout/view/frontend/web/template/shipping.htmlà notre coutume app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. Et, ajoutez notre région de message cadeau personnalisé:

app / code / Vendor / CheckoutDemo / view / frontend / web / template / shipping.html

......
<div class="step-title" translate="'Gift Options'" data-role="title" />
<each args="getRegion('gift_options')" render="" />
......

Résultat:

entrez la description de l'image ici

Khoa TruongDinh
la source
Génial. ça marche bien.
Kul
pouvons-nous ajouter une option d'emballage cadeau ici également?
Kul
1
Emballage cadeau @Kul en version e-commerce Magento?
Khoa TruongDinh
Oui. Dans le commerce.
Kul
3

Essayez le code ci-dessous 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
   <block class="Magento\GiftMessage\Block\Cart\GiftOptions" name="checkout.cart.order.actions.gift_options" template="cart/gift_options.phtml" cacheable="false">
    <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="types" xsi:type="array"/>
                    <item name="components" xsi:type="array">
                        <item name="giftOptionsCart" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_GiftMessage/js/view/gift-message</item>
                            <item name="config" xsi:type="array">
                                <item name="template" xsi:type="string">Magento_GiftMessage/gift-message</item>
                                <item name="formTemplate" xsi:type="string">Magento_GiftMessage/gift-message-form</item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceBlock>
  </referenceContainer> 
 </body>
</page>

Plus tôt, j'ai créé une extension de passerelle de paiement dans laquelle j'ai rendu mon fichier de modèle personnalisé dans la section de paiement. J'ai également ajouté ce code ici, veuillez ajouter si je manque quelque chose. (Cirkle_Behalf) est le nom du module.

  <?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
     <referenceContainer name="content">
      <block class="Cirkle\Behalf\Block\Behalf" name="behalf_popup" template="Cirkle_Behalf::behalf.phtml"/>
        <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="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <!-- merge payment method renders here -->
                                                            <item name="children" xsi:type="array">
                                                                <item name="behalf" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Cirkle_Behalf/js/view/payment/behalf</item>
                                                                    <item name="methods" xsi:type="array">
                                                                        <item name="behalf" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </referenceContainer>
   </body>
</page>
Sanjay Gohil
la source