Como personalizar o processo de checkout no Magento 2
Publicados: 2018-04-23Índice
No Magento 2, o processo de checkout foi redesenhado para uma experiência mais rápida e fácil. A página Checkout conduz o cliente através de 2 etapas fáceis do processo. Os clientes que estão logados em suas contas podem concluir o checkout rapidamente, porque muitas das informações já estão em suas contas. A primeira etapa do processo de checkout é o cliente preencher as informações do endereço de entrega e escolher o método de envio. Na segunda etapa, o cliente escolhe a forma de pagamento e aplica os cupons para finalizar a compra.
Personalize o checkout padrão do Magento 2
Você pode adicionar uma nova etapa de checkout ou alterar a visualização de um checkout existente para personalizar o checkout padrão do seu jeito.
Adicionar uma nova etapa de checkout
Você pode adicionar uma etapa de checkout personalizada, ela deve ser implementada como um componente de interface do usuário. Por uma questão de compatibilidade, capacidade de atualização e fácil manutenção, não edite o código padrão do Magento, adicione suas personalizações em um módulo separado.
Etapa 1: criar a parte de visualização do componente da etapa de checkout
Para criar a parte de visualização da nova etapa de checkout:
- Adicione um diretório de módulo. Todos os arquivos personalizados devem ser armazenados lá. Para que sua personalização de checkout seja aplicada corretamente, seu módulo personalizado deve depender do módulo
Magento_Checkout. Não useUipara o nome do módulo personalizado, pois a notação%Vendor%_Ui, necessária ao especificar caminhos, pode causar problemas. - Crie o arquivo
.jsimplementando o modelo de visualização. - Crie um modelo
.htmlpara o componente.
Cada etapa é descrita em detalhes abaixo:
1. Adicione o arquivo JavaScript implementando a nova etapa
Uma nova etapa de checkout deve ser implementada como componente de interface do usuário. Ou seja, sua implementação JavaScript deve ser um módulo JavaScript.
O arquivo deve ser armazenado no <your_module_dir>/view/frontend/web/js/view .
A notação <your_module_dir> representa o caminho para o diretório do módulo a partir do diretório raiz. Normalmente será um dos seguintes: app/code/<YourVendor>/<YourModule> ou vendor/<yourvendor>/module-<module>-<name> .
Segue um exemplo my-step-view.js com comentários:
definir(
['ko', 'uiComponent', 'underscore', 'Magento_Checkout / js / model / step - navigator'],
função(
ko,
Componente,
_,
stepNavigator
) {'
use estrito';
/**
*
* mystep – é o nome do template .html do componente,
* <Fornecedor>_<Módulo> – é o nome do diretório do seu módulo.
*
*/
return Component.extend({
padrões: {
template: ' < Vendor > _ < Módulo > /mystep'
},
//adicione aqui sua lógica para exibir o passo,
isVisible: ko.observable(true),
/**
*
* @returns {*}
*/
inicialize: function() {
this._super();
// cadastra seu passo
stepNavigator.registerStep(
// o código da etapa será usado como id do conteúdo da etapa no modelo do componente
'step_code',
// passo alias
nulo,
//valor do título do passo
'Título da Etapa',
//propriedade observável com lógica ao exibir o passo ou ocultar o passo
this.isVisible,
_.bind(this.navigate, this),
/**
* valor da ordem de classificação
* 'sort order value' < 10: a etapa é exibida antes da etapa de envio;
* 10 < 'sort order value' < 20 : a etapa é exibida entre a etapa de envio e a etapa de pagamento
* 'classificar valor do pedido' > 20 : a etapa é exibida após a etapa de pagamento
*/
15
);
devolva isso;
},
/**
* O método navigation() é responsável pela navegação entre a etapa de checkout
* durante a compra. Você pode adicionar lógica personalizada, por exemplo, algumas condições
* para mudar para sua etapa personalizada
*/
navegue: function() {
},
/**
* @returns nulo
*/
navegueParaPróximaEtapa: function() {
stepNavigator.next();
}
});
}
);2. Adicione o modelo .html
No diretório do módulo, adicione o modelo .html para o componente. Ele deve estar localizado no <your_module_dir>/view/frontend/web/template .
Segue um exemplo de mystep.html :
<!–O valor 'step_code' do arquivo .js deve ser usado–>
<li data-bind="fadeVisible: isVisible">
<div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
<div class="step-content" data-role="content">
<form data-bind="submit: navigationToNextStep" novalidate="novalidate">
<div class="actions-toolbar">
<div class="primário">
<button data-role="opc-continue" type="submit" class="button action continue primary">
<span><!– ko i18n: 'Próximo'–><!– /ko –></span>
</button>
</div>
</div>
</form>
</div>
</li>Etapa 2: adicione sua etapa ao layout da página do Checkout
Para que a nova etapa seja exibida na página, você precisa declará-la no layout da página Checkout, que é definido em checkout_index_index.xml .
Portanto, você precisa adicionar um arquivo de layout checkout_index_index.xml estendido no seguinte local: <your_module_dir>/view/frontend/layout/checkout_index_index.xml
Segue um exemplo de 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">
<corpo>
<referenceBlock name="checkout.root">
<argumentos>
<nome do argumento="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="passos" xsi:type="array">
<item name="filhos" xsi:type="array">
<!– A nova etapa que você adiciona –>
<item name="meu-novo-passo" xsi:type="array">
<item name="component" xsi:type="string">%Vendor%_%Module%/js/view/my-step-view</item>
<!–Para exibir o conteúdo da etapa antes da etapa de envio, o valor "sortOrder" deve ser < 1–>
<!–Para exibir o conteúdo da etapa entre a etapa de envio e a etapa de pagamento 1 < "sortOrder" < 2 –>
<!–Para exibir o conteúdo da etapa após a etapa de pagamento "sortOrder" >2 –>
<item name="sortOrder" xsi:type="string">2</item>
<item name="filhos" xsi:type="array">
<!–adicione aqui declaração de componente filho para sua etapa–>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argumento>
</argumentos>
</referenceBlock>
</body>
</page> 
Campo personalizado de check-out do Magento 2
$ 119,00
Magento 2 One Step Check-out
$ 99 $ 119,00
Personalize a visualização de um checkout existente
Em aplicativos Magento, o checkout é implementado usando componentes de interface do usuário. Você pode personalizar cada etapa alterando a implementação ou modelo JavaScript de um componente, adicionando, removendo ou desativando um componente.
Etapa 1: alterar a implementação e o modelo .js do componente
Para alterar a implementação e o modelo .js usados para renderização de componentes, você precisa declarar os novos arquivos no layout da página de checkout. Para fazer isso, siga os seguintes passos:
- Em seu diretório de módulo customizado, crie o novo arquivo a seguir:
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (Para que sua personalização de checkout seja aplicada corretamente, seu módulo personalizado deve depender do módulo Magento_Checkout.) - Neste arquivo, adicione o seguinte:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argumentos>
<nome do argumento="jsLayout" xsi:type="array">
<!– Sua customização estará aqui –>
…
</argumento>
</argumentos>
</referenceBlock>
</body>
</page>- No arquivo
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xml, localize o componente que você precisa personalizar. Copie o nó correspondente e todos os nós pais até<argument>. Não há necessidade de deixar todos os atributos e valores dos nós parente, pois você não irá alterá-los. - Altere o caminho para o arquivo
.jsdo componente, modelo ou qualquer outra propriedade.
Exemplo:
O módulo Magento_Shipping adiciona um componente renderizado como um link para as informações da política de envio para a etapa de envio:
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml
parece a seguir:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<corpo>
<referenceBlock name="checkout.root">
<argumentos>
<nome do argumento="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="passos" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="filhos" xsi:type="array">
<item name="formulário-método-antes-de-envio" xsi:type="array">
<item name="filhos" 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>
</argumento>
</argumentos>
</referenceBlock>
</body>
</page> Etapa 2: adicionar o novo componente ao layout da página de checkout
Qualquer componente de interface do usuário é adicionado ao checkout_index_index.xml de forma semelhante à forma como um componente de etapa de checkout é adicionado.
Certifique-se de declarar um componente para que ele seja renderizado corretamente pelo componente pai. Se um componente pai for um componente de UI geral (referenciado pelo alias uiComponent ), seus componentes filho serão renderizados sem nenhuma condição. Mas se um componente pai for uma extensão de componentes gerais de interface do usuário, a renderização dos filhos poderá ser restrita de certa maneira. Por exemplo, um componente pode renderizar apenas filhos de um determinado displayArea .
Etapa 3 : Desabilitar um componente
Para desabilitar o componente em seu checkout_index_index.xml , use as seguintes instruções:
<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>Etapa 4: remover um componente
Para remover um componente da renderização de layout, você precisa criar um plugin para o método \Magento\Checkout\Block\Checkout\LayoutProcessor::process . Em seu plugin, implemente o método around removendo os nós de layout correspondentes em tempo de execução.
O exemplo a seguir é um exemplo do método around removendo um componente:
unset($jsLayout['components']['checkout']['children']['steps'][%path_to_target_node%]); //%path_to_target_node% é o caminho para o nó do componente em checkout_index_index.xml return $jsLayout;
(Se você quiser usar este exemplo em seu código, substitua o espaço reservado %path_to_target_node% pelo valor real.)
*Desabilitar vs remover um componente: Se você desabilitar um componente, ele será carregado, mas não renderizado. Se você remover um componente, ele não será carregado.
Postagens relacionadas:
Como adicionar código de desconto ao checkout no Magento
Como adicionar um pagamento personalizado ao Magento 2 Checkout