Magento2でチェックアウトプロセスをカスタマイズする方法

公開: 2018-04-23

目次

Magento 2では、チェックアウトプロセスが再設計され、より速く、より簡単に体験できるようになりました。 [チェックアウト]ページでは、プロセスの2つの簡単なステップをお客様に案内します。 アカウントにログインしている顧客は、情報の多くがすでにアカウントにあるため、チェックアウトをすばやく完了することができます。 チェックアウトプロセスの最初のステップは、顧客が配送先住所情報を入力し、配送方法を選択することです。 2番目のステップで、顧客は支払い方法を選択し、クーポンを適用して購入を完了します。

Magento2のデフォルトのチェックアウトをカスタマイズする

新しいチェックアウトステップを追加するか、既存のチェックアウトのビューを変更して、独自の方法でデフォルトのチェックアウトをカスタマイズできます。

新しいチェックアウトステップを追加します

カスタムチェックアウトステップを追加できます。これはUIコンポーネントとして実装する必要があります。 互換性、アップグレード可能性、および簡単なメンテナンスのために、デフォルトのMagentoコードを編集せず、別のモジュールにカスタマイズを追加してください。

ステップ1：チェックアウトステップコンポーネントのビュー部分を作成します

新しいチェックアウトステップのビュー部分を作成するには、次の手順に従います。

  1. モジュールディレクトリを追加します。 すべてのカスタムファイルをそこに保存する必要があります。 チェックアウトのカスタマイズを正しく適用するには、カスタムモジュールがMagento_Checkoutモジュールに依存している必要があります。 パスを指定するときに必要な%Vendor%_Ui表記が問題を引き起こす可能性があるため、カスタムモジュール名にUiを使用しないでください。
  2. ビューモデルを実装する.jsファイルを作成します。
  3. コンポーネントの.htmlテンプレートを作成します。

各ステップについて、以下で詳しく説明します。

1.新しいステップを実装するJavaScriptファイルを追加します

新しいチェックアウトステップは、UIコンポーネントとして実装する必要があります。 つまり、そのJavaScript実装はJavaScriptモジュールである必要があります。

ファイルは、 <your_module_dir>/view/frontend/web/js/viewディレクトリに保存する必要があります。

<your_module_dir>表記は、ルートディレクトリからモジュールディレクトリへのパスを表します。 通常は、 app/code/<YourVendor>/<YourModule>またはvendor/<yourvendor>/module-<module>-<name>のいずれかになります。

コメント付きのサンプルmy-step-view.jsは次のとおりです。 

 定義（
    ['ko'、'uiComponent'、'underscore'、'Magento_Checkout / js / model / step --navigator']、
    関数（
        コ、
        成分、
        _、
        stepNavigator
    ）{'
        strictを使用する';
        / **
         *
         * mystep –コンポーネントの.htmlテンプレートの名前です。
         * <Vendor> _ <Module> –モジュールディレクトリの名前です。
         *
         * /
        Component.extend（{を返す
            デフォルト：{
                テンプレート：'<ベンダー>_<モジュール>/ mystep'
            }、

            //ここにロジックを追加してステップを表示します
            isVisible：ko.observable（true）、

            / **
             *
             * @戻り値 {*}
             * /
            初期化：function（）{
                this._super（）;
                //ステップを登録します
                stepNavigator.registerStep（
                    //ステップコードは、コンポーネントテンプレートのステップコンテンツIDとして使用されます
                    'step_code'、
                    //ステップエイリアス
                    ヌル、
                    //ステップタイトル値
                    「ステップタイトル」、
                    //ステップを表示または非表示にするときのロジックを含む監視可能なプロパティ
                    this.isVisible、

                    _.bind（this.navigate、this）、

                    / **
                     *並べ替え順序の値
                     *'注文値の並べ替え'<10：出荷ステップの前にステップが表示されます。
                     * 10<'注文値の並べ替え'<20：配送と支払いのステップの間にステップが表示されます
                     *'注文値の並べ替え'>20：支払いステップの後にステップが表示されます
                     * /
                    15
                ）;

                これを返します。
            }、

            / **
             *Navigator（）メソッドはチェックアウトステップ間のナビゲーションを担当します
             *チェックアウト中。 いくつかの条件など、カスタムロジックを追加できます
             *カスタムステップに切り替えるため
             * /
            ナビゲート：function（）{

            }、

            / **
             * @returns void
             * /
            ナビゲートToNextStep：function（）{
                stepNavigator.next（）;
            }
        }）;
    }
）;
2..htmlテンプレートを追加します

モジュールディレクトリに、コンポーネントの.htmlテンプレートを追加します。 <your_module_dir>/view/frontend/web/templateディレクトリの下に配置する必要があります。

サンプルのmystep.htmlは次のとおりです。 

 <！–。jsファイルの「step_code」値を使用する必要があります–>
<li data-bind = "fadeVisible：isVisible">
    <div class = "step-title" data-bind = "i18n：'ステップタイトル'"data-role = "title"> </ div>
    <div class = "step-content" data-role = "content">

        <form data-bind = "submit：navigateToNextStep" novalidate = "novalidate">
            <div class = "actions-toolbar">
                <div class = "primary">
                    <button data-role = "opc-continue" type = "submit" class = "button actioncontinueprimary">
                        <span> <！– ko i18n：'次へ'–> <！– / ko –> </ span>
                    </ button>
                </ div>
            </ div>
        </ form>
    </ div>
</ li>

ステップ2：チェックアウトページレイアウトにステップを追加します

新しいステップをページに表示するには、 checkout_index_index.xmlで定義されているCheckoutページレイアウトで宣言する必要があります。

したがって、次の場所に拡張checkout_index_index.xmlレイアウトファイルを追加する必要があります： <your_module_dir>/view/frontend/layout/checkout_index_index.xml

サンプルのcheckout_index_index.xmlは次のとおりです。 

 <page xmlns：xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" xsi：noNamespaceSchemaLocation = "urn：magento：framework：View / Layout / etc / page_configuration.xsd">

    <本体>
        <referenceBlock name = "checkout.root">
            <引数>
                <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 = "my-new-step" xsi：type = "array">
                                            <item name = "component" xsi：type = "string">％Vendor％_％Module％/ js / view / my-step-view </ item>
                                            <！–出荷前にステップの内容を表示するには、ステップの「sortOrder」値を<1–>にする必要があります。
                                            <！–出荷ステップと支払いステップ1の間のステップコンテンツを表示するには<"sortOrder" <2 –>
                                            <！–支払いステップ"sortOrder">の後にステップコンテンツを表示するには>2 –>
                                            <item name = "sortOrder" xsi：type = "string"> 2 </ item>
                                            <item name = "children" xsi：type = "array">
                                                <！–ステップの子コンポーネント宣言をここに追加–>
                                            </ item>
                                        </ item>
                                    </ item>
                                </ item>
                            </ item>
                        </ item>
                    </ item>
                </引数>
            </引数>
        </ referenceBlock>
    </ body>
</ page>

Magento2チェックアウトカスタムフィールド

$ 119,00

Magento2ワンステップチェックアウト

$ 99 $ 119,00

既存のチェックアウトのビューをカスタマイズする

Magentoアプリケーションでは、チェックアウトはUIコンポーネントを使用して実装されます。 コンポーネントのJavaScript実装またはテンプレートを変更したり、コンポーネントを追加、削除、または無効にすることで、各ステップをカスタマイズできます。

ステップ1：コンポーネントの.js実装とテンプレートを変更する

コンポーネントのレンダリングに使用される.js実装とテンプレートを変更するには、チェックアウトページレイアウトで新しいファイルを宣言する必要があります。 これを行うには、次の手順を実行します。

  1. カスタムモジュールディレクトリに、次の新しいファイルを作成します： <your_module_dir>/view/frontend/layout/checkout_index_index.xml 。 （チェックアウトのカスタマイズを正しく適用するには、カスタムモジュールがMagento_Checkoutモジュールに依存している必要があります。）
  2. このファイルに、以下を追加します。 
 <page xmlns：xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" xsi：noNamespaceSchemaLocation = "urn：magento：framework：View / Layout / etc / page_configuration.xsd">

    <本体>
        <referenceBlock name = "checkout.root">
            <引数>
                <argument name = "jsLayout" xsi：type = "array">
                    <！–カスタマイズはここにあります–>
                    …
                </引数>
            </引数>
        </ referenceBlock>
    </ body>
</ page>
  1. <Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xmlファイルで、カスタマイズする必要のあるコンポーネントを見つけます。 対応するノードと<argument>までのすべての親ノードをコピーします。 親ノードを変更することはないので、親ノードのすべての属性と値を残す必要はありません。
  2. コンポーネントの.jsファイル、テンプレート、またはその他のプロパティへのパスを変更します。

例：

Magento_Shippingモジュールは、配送ポリシー情報へのリンクとしてレンダリングされたコンポーネントを配送ステップに追加します。

 <Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml

次のようになります。 

 <page xmlns：xsi = "http://www.w3.org/2001/XMLSchema-instance" layout = "1column" xsi：noNamespaceSchemaLocation = "urn：magento：framework：View / Layout / etc / page_configuration.xsd">

    <本体>
        <referenceBlock name = "checkout.root">
            <引数>
                <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 = "before-shipping-method-form" xsi：type = "array">
                                                            <item name = "children" xsi：type = "array">
                                                                <item name = "shipping_policy" xsi：type = "array">
                                                                    <item name = "component" xsi：type = "string"> Magento_Shipping / js / view / checkout / Shipping / Shipping-policy </ item>
                                                                </ item>
                                                            </ item>
                                                        </ item>
                                                    </ item>
                                                </ item>
                                            </ item>
                                        </ item>
                                    </ item>
                                </ item>
                            </ item>
                        </ item>
                    </ item>
                </引数>
            </引数>
        </ referenceBlock>
    </ body>
</ page>

ステップ2：チェックアウトページのレイアウトに新しいコンポーネントを追加します

すべてのUIコンポーネントは、チェックアウトステップコンポーネントが追加されるのと同様に、 checkout_index_index.xmlに追加されます。

親コンポーネントによって正しくレンダリングされるように、必ずコンポーネントを宣言してください。 親コンポーネントが一般的なUIコンポーネント（ uiComponentエイリアスによって参照される）である場合、その子コンポーネントは条件なしでレンダリングされます。 ただし、親コンポーネントが一般的なUIコンポーネントの拡張である場合、子のレンダリングは特定の方法で制限される可能性があります。 たとえば、コンポーネントは特定のdisplayAreaの子のみをレンダリングできます。

ステップ3 ：コンポーネントを無効にする

checkout_index_index.xmlのコンポーネントを無効にするには、次の手順を使用します。 

 <item name = "％the_component_to_be_disabled％" xsi：type = "array">
    <item name = "config" xsi：type = "array">
        <item name = "componentDisabled" xsi：type = "boolean"> true </ item>
    </ item>
</ item>

ステップ4：コンポーネントを削除する

レイアウトレンダリングからコンポーネントを削除するには、 \Magento\Checkout\Block\Checkout\LayoutProcessor::processメソッドのプラグインを作成する必要があります。 プラグインで、実行時に対応するレイアウトノードを削除するaroundメソッドを実装します。

次のサンプルは、コンポーネントを削除するaroundメソッドの例です。 

 unset（$ jsLayout ['components'] ['checkout'] ['children'] ['steps'] [％path_to_target_node％]）; //％path_to_target_node％は、checkout_index_index.xml内のコンポーネントのノードへのパスです
$jsLayoutを返します。

（このサンプルをコードで使用する場合は、 %path_to_target_node%プレースホルダーを実際の値に置き換えてください。）

*コンポーネントを無効にするか削除する：コンポーネントを無効にすると、コンポーネントは読み込まれますが、レンダリングされません。 コンポーネントを削除しても、ロードされません。

関連記事：
Magentoのチェックアウトに割引コードを追加する方法
Magento2チェックアウトにカスタム支払いを追加する方法