Memindahkan blok formulir pesan Hadiah dari Troli ke Checkout langkah 1

8

Saya mencoba untuk memindahkan blok Opsi Hadiah (formulir pesan hadiah) dari halaman Keranjang belanja saat ini ke langkah pertama Checkout (Pengiriman). Saya harus meletakkannya tepat di bawah Metode Pengiriman. Saya mencoba menambahkan modul GiftMessage ke tema saya dan di dalam ini memodifikasi file layout checkout_index_index.xml untuk referensi blokir checkout untuk penyisipan Pesan Hadiah, tetapi tidak ada gunanya. Bantuan apa pun akan sangat dihargai. Terima kasih!

<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
sumber
1
Apakah kamu mengerti?
jackcar
@maquina apakah Anda menemukan solusi?
Kul

Jawaban:

5

Pertama-tama, kita perlu memahami cara kerja Pesan Hadiah Magento di Halaman Keranjang.

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

File ini adalah cahaya kita. Kami akan menghemat banyak waktu jika kami memahami logikanya.

window.giftOptionsConfig: variabel global ini digunakan untuk konfigurasi. Kita harus membuatnya kembali saat checkout.

Mari kita mulai menerapkan logika kebiasaan kita. Buat modul baru, tambahkan logika berikut:

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>

Ada 3 catatan:

-Pengiriman langkah akan menggunakan template html pengiriman kustom kami. Lebih mudah untuk menambahkan wilayah khusus kami.

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

-Bidang Hadiah Kami: Saya menyalin konten dari 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-->

Konfigurasi hadiah

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

Buat aplikasi / kode / Vendor / CheckoutDemo / view / frontend / templates / gift_options.phtml

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

Kami menggunakan giftOptionsConfigvariabel global karena logika pesan hadiah akan menggunakannya.

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

Buat html pengiriman, salin konten dari vendor/magento/module-checkout/view/frontend/web/template/shipping.htmlke kebiasaan kami app/code/Vendor/CheckoutDemo/view/frontend/web/template/shipping.html. Dan, tambahkan wilayah pesan hadiah khusus kami:

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="" />
......

Hasil:

masukkan deskripsi gambar di sini

Khoa TruongDinh
sumber
Bagus. itu bekerja dengan baik.
Kul
dapatkah kita menambahkan opsi bungkus hadiah di sini juga?
Kul
1
@Kul pembungkus kado dalam versi Magento E-commerce?
Khoa TruongDinh
Iya. Dalam perdagangan.
Kul
3

Coba kode di bawah ini 

<?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>

Sebelumnya saya telah membuat satu ekstensi gateway pembayaran di mana saya telah memberikan file template khusus saya di bagian pembayaran. Saya juga menambahkan kode itu di sini, Silakan tambahkan Jika saya melewatkan sesuatu. (Cirkle_Behalf) adalah nama Modul.

  <?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
sumber