Customizar as páginas do Checkout Confirmation

Daniel Fosco

Daniel Fosco

Última atualização

A nova seção de Meus Pedidos vem acompanhada de uma nova página de confirmação de pedido (Order Placed), agora parte do Checkout Confirmation, feature responsável pelas páginas de confirmação do Checkout.

Para saber como habilitar esta nova versão, veja a documentação sobre a feature no tutorial Ativando o novo Order Placed.

Junto ao novo Order Placed, outra novidade é o Order Confirmation, que mostra a confirmação de pedidos alterados (parte do novo fluxo de alteração de pedidos).

Templates de HTML

Assim como em versões anteriores, a página de Order Placed (assim como a de Order Changed) aceita templates de HTML:

Para adicionar seu código nesses templates, basta acessar o módulo Portal e, na aba Code, editar os seguintes arquivos:

  • checkout-confirmation-bottom
  • checkout-confirmation-footer
  • checkout-confirmation-header
  • checkout-confirmation-top

É importante lembrar que a customização com templates é a mesma para Order Placed e Order Confirmation.

Customização de estilos

Todas estas formas de customização podem ser alteradas no futuro. Ao usá-las, você entende que sua loja deve acompanhar atualizações da plataforma para que sua customização continue funcionando corretamente.

Também é possível editar a interface do Checkout Confirmation via classes CSS. Seus estilos devem ser adicionados numa <style> tag em um dos templates HTML carregados na página.

Para customizar os estilos do Checkout Confirmation, use as seguintes classes:

.cconf-alert // Alert de confirmação .cconf-client-email // Elemento que possui email do cliente .cconf-address // Card com endereço do pedido .cconf-payment // Card com forma de pagamento do pedido .cconf-summary // Card com sumário do pedido .cconf-product-table // Tabela com pedidos do produto .cconf-product // Linha da tabela com pedido .cconf-continue-button // Botão para voltar à loja

Customização de JS

A página também pode ser alterada por Javascript usando-se o arquivo checkout-confirmation-custom.js oferecido no módulo Portal.