magento2 checkout javascript剖析

checkout是一个独立的组件，整个checkout步骤先从数据开始，通过LayoutProcessor合成所有附加在checkout上的数据，并把数据转为JSON格式的jsLayout数据，最后数据由众多JS组件把页面呈现出来。

LayoutProcessor之前的数据是由多个layout.xml提供的，如果要给checkout附加更多数据，最标准的做法是layout.xml里追加。但xml格式描述能力有限，可能会需要用更粗暴的方法，即用DI修改Magento\Checkout\Block\Checkout\LayoutProcessor。checkout data是个十分巨大的数据，要想修改先要想办法把原始数据展示出来，我用的方法如下：
vendor/magento/module-checkout/view/frontend/templates/onepage.phtml

<?php
$jsLayout = $block->getJsLayout();
?>
<?php if(isset($_GET['debug']) && $_GET['debug']=='checkout'):?>
<?php
    // krumo可以更优雅地展示Array，需要自行添加
    \krumo::dump(\Zend_Json::decode($jsLayout)['components']['checkout']['children']);
?>
<?php else:?>
    <!-- 原页面内容 -->
<?php endif;?>

checkout 默认有两页流程，shipping和payment。整个checkout由众多JS组件组成，有两个页面入口组件，要修改JS组件最好先从两个入口组件入手。

vendor/magento/module-checkout/view/frontend/web/template/payment.html
vendor/magento/module-checkout/view/frontend/web/js/view/payment.js
vendor/magento/module-checkout/view/frontend/web/template/shipping.html
vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

从shpping切换到payment页需要 Magento_Checkout/js/model/step-navigator 进行跳转。
checkout里所用的到数据依赖于 Magento_Checkout/js/model/quote

checkout前端常用数据

当前选中的送货方式

quote.shippingMethod().method_code
quote.shippingMethod().carrier_code

当前选中的送货地址

quote.shippingAddress()

当前选中的帐单地址

quote.billingAddress()

当前选中的支付方式

quote.paymentMethod()

billingAddress如何与payment拆开？

默认情况下billingAddress被包含在payment的模板里面，而payment一般是一个module，每个payment模板都会输出billingAddress。不过这种设计并不合理，一般payment与billingAddress分两块情况会比较清晰。

vendor/magento/module-checkout/view/frontend/web/js/view/payment/list.js
追加 Magento_Checkout/js/model/quote来提取quote数据并插入以下函数

getBillingAddressRegionName: function(){
    if(quote.paymentMethod())
        return 'billing-address-form-'+quote.paymentMethod().method;
    else
        return 'billing-address-form-checkmo';
}

vendor/magento/module-checkout/view/frontend/web/template/payment-methods/list.html

<div class="payment-method-billing-address">
    <div class="step-title" data-role="title" data-bind="i18n:'Billing Address'"></div>
    <!-- ko foreach: getRegion(getBillingAddressRegionName()) -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
</div>

然后用CSS把payment里的billingAddress部分隐藏

在checkout的元素中加placeholder

使用plugin修改LayoutProcessor

protected function _processShippingAddressFrom( & $fieldset )
{
    $fieldset['street']['children'][0]['placeholder'] = __('Enter your address');
}

public function afterProcess( \Magento\Checkout\Block\Checkout\LayoutProcessor $layoutProcessor, array $jsLayout )
{
    $this->_processShippingAddressFrom( $jsLayout['components']['checkout']['children']['steps']['children']
            ['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'] );

    return $jsLayout;
}