如何在 Magento 2 中自定義結帳流程

已發表: 2018-04-23

目錄

在 Magento 2 中，結帳流程經過重新設計，以提供更快、更輕鬆的體驗。 結帳頁面引導客戶完成該過程的 2 個簡單步驟。 登錄其帳戶的客戶可以快速完成結帳，因為大部分信息已經在他們的帳戶中。 結賬流程的第一步是讓客戶填寫收貨地址信息，並選擇收貨方式。 第二步，客戶選擇支付方式，並使用任意優惠券完成購買。

自定義 Magento 2 的默認結帳

您可以添加新的結帳步驟或更改現有結帳的視圖，以您自己的方式自定義默認結帳。

添加新的結帳步驟

您可以添加自定義結帳步驟，它應該作為 UI 組件實現。 為了兼容性、可升級性和易於維護，不要編輯默認的 Magento 代碼，將您的自定義添加到單獨的模塊中。

步驟 1：創建結帳步驟組件的視圖部分

要創建新結帳步驟的視圖部分：

  1. 添加模塊目錄。 所有自定義文件都必須存儲在那裡。 為了正確應用您的結帳自定義，您的自定義模塊應依賴於Magento_Checkout模塊。 不要使用Ui作為您的自定義模塊名稱，因為指定路徑時需要使用%Vendor%_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'],
    功能（
        高，
        零件，
        _,
        步進導航器
    ) {'
        使用嚴格';
        /**
         *
         * mystep – 是組件的 .html 模板的名稱，
         * <Vendor>_<Module> – 是您的模塊目錄的名稱。
         *
         */
        返回組件。擴展（{
            默認值：{
                模板：'<供應商>_<模塊>/mystep'
            },

            //在此處添加您的邏輯以顯示步驟，
            isVisible: ko.observable(true),

            /**
             *
             * @returns {*}
             */
            初始化：函數（）{
                this._super();
                //註冊你的步驟
                stepNavigator.registerStep(
                    //步驟代碼將用作組件模板中的步驟內容id
                    'step_code',
                    //步驟別名
                    無效的，
                    //步驟標題值
                    '步驟標題',
                    //顯示步驟或隱藏步驟時具有邏輯的可觀察屬性
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                     * 排序順序值
                     * '排序訂單值' < 10：發貨步驟前顯示步驟；
                     * 10 < 'sort order value' < 20 : 顯示發貨和付款步驟之間的步驟
                     * '排序順序值' > 20 : 付款步驟後顯示步驟
                     */
                    15
                );

                返回這個；
            },

            /**
             * navigate() 方法負責結帳步驟之間的導航
             * 在結帳時。 您可以添加自定義邏輯，例如一些條件
             * 用於切換到您的自定義步驟
             */
            導航：函數（）{

            },

            /**
             * @returns 無效
             */
            導航到下一步：函數（）{
                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 action continue primary">
                        <span><!– ko i18n: '下一個'–><!– /ko –></span>
                    </按鈕>
                </div>
            </div>
        </form>
    </div>
</li>

第 2 步：將您的步驟添加到結帳頁面佈局

對於要在頁面上顯示的新步驟，您需要在 Checkout 頁面佈局中聲明它，該佈局在checkout_index_index.xml中定義。

因此，您需要在以下位置添加擴展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">
                                                <!–在此處為您的步驟添加子組件聲明–>
                                            </項目>
                                        </項目>
                                    </項目>
                                </項目>
                            </項目>
                        </項目>
                    </項目>
                </參數>
            </參數>
        </參考塊>
    </正文>
</頁面>

Magento 2 結帳自定義字段

$119,00

Magento 2 一步結賬

$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">
                    <!– 您的自定義將在這裡–>
                    …
                </參數>
            </參數>
        </參考塊>
    </正文>
</頁面>
  1. 在<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml文件中，找到您需要自定義的組件。 複製對應的節點和所有父節點直到<argument> 。 無需保留父節點的所有屬性和值，因為您不會更改它們。
  2. 更改組件的.js文件、模板或任何其他屬性的路徑。

例子：

Magento_Shipping 模塊將一個組件作為指向 Shipping Policy 信息的鏈接添加到 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>
                                                                </項目>
                                                            </項目>
                                                        </項目>
                                                    </項目>
                                                </項目>
                                            </項目>
                                        </項目>
                                    </項目>
                                </項目>
                            </項目>
                        </項目>
                    </項目>
                </參數>
            </參數>
        </參考塊>
    </正文>
</頁面>

第 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>
    </項目>
</項目>

第 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 結賬時添加折扣碼
如何向 Magento 2 Checkout 添加自定義付款