Sabemos que o Magento 2 é uma ferramenta muito poderosa para efetuar diversos tipos de personalizações na loja virtual. O checkout é um dos pontos principais de uma loja virtual. Com isso, há uma grande necessidade de se customizar o checkout de acordo com as regras de negócio do cliente.
Então, e se precisarmos adicionar um novo campo em um método de frete no checkout?
Adicionando um novo campo de frete no Magento 2
Vamos fazer esse processo em três passos.
1.) Sobreescrevendo o checkout_index_index.xml
Crie o arquivo checkout_index_index.xml no seu módulo em: Vendor/MyModule/view/frontend/layout e adicione o script:
<?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>
<referenceBlock name="checkout.root">
<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="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="pickup_date" xsi:type="array">
<item name="component" xsi:type="string">Vendor_MyModule/js/view/custom</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
2.) Crie o custom JS
Crie o arquivo custom.js em Vendor/MyModule/view/frontend/web/js/view e adicione o script:
define([
'jquery',
'ko',
'uiComponent'], function ($, ko, Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Vendor_Module/customfield'
},
initialize: function () {
this._super();
return this;
},
});
});
3.) Criando o HTML com o campo customizado
Adicione o arquivo customfield.html em Vendor/MyModule/view/frontend/web/template
<div class="step-title" data-role="title" data-bind="i18n: 'Custom Field'">Custom Field</div> <div class="control"> <input class="input-text" type="text" data-bind="picker: true" name="pickup_date" readonly="false" /> </div> <!-- ko --><span class="custom_field" data-bind="text: custom_field" /><!-- /ko -->
Feito isso, regere todos os arquivos estáticos do seu Magento 2 e o campo customizado será exibido no seu módulo customizado no Checkout.
Dúvidas? Posta aí!
Um abraço!