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

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

    getJsLayout();?>
    
    
        
    
    

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

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

从shpping切换到payment页需要 Magento_Checkout/js/model/step-navigator 进行跳转。

checkout前端常用数据

当前选中的送货方式

quote.shippingMethod().method_codequote.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

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

然后用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;}