Magento 2 デフォルトのチェックアウトページを最適化する方法

Magento のチェックアウトページを変更するのは、必ずしも簡単なことではありません。というのも、ご存知のように、Magento 2 のデフォルトのチェックアウトは、一連の Knockout JS コンポーネントから作成され、Knockout JS templating system を使ってレンダリングされているからです。これらのコンポーネントとその親子関係は、大きなXMLファイルで定義されており、テーマやモジュールで拡張したりオーバーライドしたりすることができます。

最適化の手順に入る前に、まずテーマ内にcheckout_index_index.xmlファイルを作成する必要があります。

[Magento_Checkout_module_dir]/view/frontend/layout/checkout_index_index.xml

このファイルを作成した後、チェックアウトページの最適化を開始します。

[Magento_Checkout]/layout/checkout_index_index.xml

既定のチェックアウトページを最適化する方法

解決策1:シッピングフォームのフィールドを削除する

この例では、削除しようとしているフィールドはFaxです。これを削除するには、Faxフィールドへのパスを定義し、次の項目を子として追加する必要があります。

<item name="visible" xsi:type="boolean">false</item>
<?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\Checkout\Block\Onepage" name="checkout.root" template="onepage.phtml" cacheable="false">
                <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="shipping-address-fieldset" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="fax" xsi:type="array">
                                                                        <item name="visible" xsi:type="boolean">false</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        ...

キャッシュを削除すると、すべての変更点が表示されます。

解決策2:チェックアウト時の利用規約の位置を変更する

ここでは、「ご利用規約」をデフォルトの「お支払い方法」の下から、「チェックアウト」の最後にある「ご利用規約」に変更する方法をご紹介します。

ステップ1:アイテムをデフォルトの位置から外す

アイテムを別の位置に表示する前に、まずアイテムを元の場所から無効にする必要があります。そのためには、XMLツリーに沿って、このアイテムを置き換える必要があります。

<item name="before-place-order" xsi:type="array">
    ...
</item>

次のようにしています。

<item name="before-place-order" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

ステップ2: 目的の場所に再追加する

これで、チェックアウトの最後に再追加されます。

<item name="after-place-agreements" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="displayArea" xsi:type="string">after-place-agreements</item>
    <item name="dataScope" xsi:type="string">before-place-order</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Magento_Checkout/payment/before-place-order</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="agreementss" xsi:type="array">
            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
            <item name="sortOrder" xsi:type="string">100</item>
            <item name="displayArea" xsi:type="string">after-place-agreements</item>
            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
</item>

ステップ3:必要な場所にテンプレートを呼び出す

この例では、利用規約がチェックアウトの最後に移動されるため、テンプレートの名前は “after-place-agreements “となります。

<!-- ko foreach: getRegion('after-place-agreements') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

解決策3:ヘッダーにカスタムブロックを追加する

コンバージョン率を高め、サイトのセキュリティを向上させるためには、チェックアウト時のヘッダーに、より多くの情報をお客様に提供する必要があります。以下は、それを簡単に行うための方法です

<referenceBlock name="checkout.header.wrapper">
    <container name="additional-custom-block-wrapper" label="additional-custom-block-wrapper" htmlTag="div" htmlClass="additional-custom-block-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-block">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-block</argument>
            </arguments>
        </block>
    </container>
</referenceBlock>

解決策4:チェックアウトにカスタムフッターを追加

お支払い方法や配送情報、追加クーポンなど、特定の項目を強調したい場合は、チェックアウトにカスタムフッターを追加することができます。以下は、CMSブロックを使ってカスタムフッターを作成するためのサンプルです。

<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Cms\Block\Block" name="additional-custom-footer">
            <arguments>
                <argument name="block_id" xsi:type="string">additional-custom-footer</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

また、テンプレートファイルでカスタムフッターを作成する方法をご紹介します。

[Magento_Theme]/templates/checkout-footer.phtml
<referenceContainer name="page.bottom.container">
    <container name="additional-custom-footer-wrapper" label="additional-custom-footer-wrapper" htmlTag="div" htmlClass="additional-custom-footer-wrapper">
        <block class="Magento\Framework\View\Element\Template" name="additional-custom-footer" template="Magento_Theme::checkout-footer.phtml" />
    </container>
</referenceContainer>

結論

結論として、私はチェックアウトページを最適化するためのいくつかのソリューションを紹介しました。これらは完全な解決策ではありませんが、デフォルトの機能の弱点を修正するための良い改善策となります。

デモを申し込む

弊社の専門家は最適なソリューションをサポートさせて頂きます。

►►►サービスについて