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