easy_checkout
componente: EasyCheckoutComponent
diretório: easy.checkout
template: wd.easy.checkout.template
jsHandler: EasyCheckout
Exemplo de uso
{% easy_checkout(
TemplateExtendedCustomerFields="/wd.easy.checkout.extended.customer.template",
FooterFlags="/Images/payment_methods.jpg",
FooterPhone: Config.General.Store.Phone
) %}
No exemplo acima, estamos passando um template de dentro da raiz do tema com os campos estendidos para o formulário de cadastro de novo cliente. Este template é usado apenas se quisermos acrescentar campos no cadastro, para isso também é necessário cadastrar os campos no admin. No exemplo, informamos também o caminho da imagem com as bandeiras de pagamento localizadas no rodapé. Além disso, indicamos que o telefone exibido no rodapé será o mesmo configurado em Configs > Configurações gerais > Configurações por grupo.
Parâmetros
Os parâmetros são utilizados para configurar o widget
Nome | Descrição | Tipo | Valor padrão |
mode | Modo de exibição | Lista de opções:\n\"b2c\", \"b2b\", \"marketplace\" e \"oms\ | b2c |
MatchCDNProductImages | Referência do CDN para fotos de produtos | Texto | /Custom/Content/Products/ |
MatchCDNDefaultImages | Referência do CDN para imagens gerais | Texto | /Custom/ |
MatchCDNDeliveryImages | Referência do CDN para imagens de formas de entrega | Texto | /Custom/Content/Themes/Shared/Images/Delivery/ |
MatchCDNPaymentImages | Referência do CDN para imagens de formas de pagamento | Texto | /Custom/Content/Themes/Shared/Images/Payment/ |
MatchCDNSalesRepresentativeImages | Referência do CDN para imagens dos representantes de venda | Texto | /Custom/Content/SalesRepresentatives/ |
MustCleanCreditCardFields | Limpar dados de cartão ao tentar finalizar compra | Boolean | false |
TextForgotError | Texto: E-mail não cadastrado. | Texto | E-mail não cadastrado. Ir para o cadastro |
TextOneCard | Texto: Pagar com 2 cartões | Texto | Pagar com 2 cartões |
TextTwoCard | Texto: Pagar com 1 cartão | Texto | Pagar com 1 cartão |
TextFreeLabel | Texto: Grátis | Texto | Grátis |
TextOrderNumber | Texto: Número do pedido | Texto | Número do pedido: |
TextChengeMethod | Texto: Alterar meio de pagamento | Texto | Alterar meio de pagamento |
TextAmountMethod | Texto: Pagamento à vista | Texto | Pagamento à vista |
TextMethodEmpty | Texto: Selecione um meio de pagamento. | Texto | Selecione um meio de pagamento. |
TextCongratulations | Texto: Pedido realizado! | Texto | Pedido realizado! |
TextWaitingPaySlip | Texto: Agora só falta pagar o boleto. | Texto | Agora só falta pagar o boleto. |
TextWaitingTransfer | Texto: Agora só falta fazer a transferência no seu banco. | Texto | Agora só falta fazer a transferência no seu banco. |
TextWaitingPay | Texto: Aguardando pagamento | Texto | Estamos confirmando o seu pagamento. |
TextWaitingPay | Texto: Agora só falta realizar o pagamento. | Texto | Agora só falta realizar o pagamento |
TextPrintSlip | Botão: Gerar boleto | Texto | Gerar boleto |
TextFullfillPayment | Botão: Realizar pagamento | Texto | Realizar pagamento |
TextButtonTransfer | Botão: Fazer a transferência | Texto | Fazer a transferência |
TextDownladSlip | Link: Baixar boleto | Texto | Baixar boleto |
TextCongratulationsMessage | Texto: Mensagem de sucesso | Texto | **Seu pedido foi finalizado com sucesso.** A partir de agora você poderá acompanhar o status de entrega de seus produtos através do painel de cliente. Em caso de dúvidas entre em contato com nossa Central de Atendimento." |
TextPopupWarning | Texto: Anti pop-up | Texto | Caso você tenha um programa anti pop-up você deve desativá-lo antes de finalizar sua compra com esta forma de pagamento. |
BilletMessage | Texto: Aviso do Boleto | Texto | Atenção: Boleto para pagamento exclusivo pela internet. Não será enviado a sua residência. |
TextTrackTitle | Texto: Acompanhe seu pedido | Texto | Acompanhe seu pedido: |
TextSummaryTitle | Texto: Resumo do pedido | Texto | Resumo do pedido |
TextTerms | Texto: Termos de uso | Texto | |
TextLoginIsNotAllowed | Mensagem: Login não permitido | Texto | Falta pouco para concluir seu cadastro. Aguarde o email de confirmação para efetuar o login. |
TextNoCredits | Mensagem: Sem créditos | Texto | Você não possui créditos para realizar esta compra. |
LinkReadMoreForRegister | Link para instrução de cadastro de usuário | Texto | |
TextAddressManagementIsNotAllowed | Mensagem: Gerenciamento de endereços não permitido | Texto | Ação não permitida, entre em contato para mais detalhes. |
TextSessionExpired | Texto: Sessão expirada | Texto | Bem-vindo(a) de volta. Você ficou muito tempo inativo(a), por isso precisamos confirmar sua identidade novamente. |
TextBasketEmpty | Texto: Carrinho vazio | Texto | Ops! Seu carrinho está vazio. |
TextCupomDiscountPayment | Texto: Cupom por meio de pagamento | Texto | Este cupom habilita um desconto para um dos meios de pagamentos disponíveis. |
AutoOpenPaymentSlip | Flag: Abrir o boleto automaticamente após a confirmação da compra | Boolean | Boolean |
TextLoyaltyCardDiscount | Texto: Cartão fidelidade | Texto | Cartão fidelidade |
ExpirationSlip | Tempo para expirar o boleto bancário | Texto | 3 |
CustomerRelationNameProp | Propriedade usada como nome de Cliente(Filial) | Texto | TradingName |
DeliveryStartTime | A partir de que momento começa a contar o prazo de entrega? | Texto | 3 |
TemplateConfirmation | Template: Confirmação. | Texto | Templates/layout-confirmation.template |
TemplateConfirmationRevamped | Template: Confirmação versão 2.0 | Texto | TemplateConfirmationRevamped |
TemplateEbit | Banner Ebit | Texto | |
TemplatePayment | Template: Pagamento. | Texto | Templates/layout-payment.template |
TemplateTerms | Template: Termos | Texto | |
TemplateExtendedCustomerFields | Campos estendidos de cliente | Texto | |
Campos estendidos de cliente | Template: Termos | Texto | |
TemplateFooter | Template: Rodapé | Texto | |
FooterPhone | Telefone para o rodapé | Texto | (99) 9999-9999 |
ShowSearchAddressField | Exibe campo de pesquisar endereços | Texto | false |
TextSearchAddress | Mensagem: Pesquisar endereços | Texto | Pesquisar endereços... |
TextCompanyDeliveryStep | Mensagem: Defina a empresa destino | Boolean | Defina a empresa destino |
TextCompanyChangeRelation | Mensagem: Alterar empresa | Texto | Alterar empresa |
PickupStoreModalTitle | Mensagem: Selecione a loja para retirada | Texto | Selecione a loja para retirada |
PickupStoreDockModalTitle | Mensagem: Local para retirada | Texto | Local para retirada |
PickupBadgeLabel | Mensagem: Retirar em | Texto | Retirar em |
TextPickupDeliveryType | Mensagem: Retirada na loja | Texto | Retirada na loja |
TextCheaperDeliveryOptionName | Mensagem: Econômica | Texto | Econômica |
TextShowMixItems | Mensagem: Mostrar itens do mix | Texto | Mostrar itens do mix |
TextHideMixItems | Mensagem: Ocultar itens do mix | Texto | Ocultar itens do mix |
TextPaymentSplitEmpty | Mensagem: O valor total dos itens dos seguintes prazos abaixo, não atingiram o valor mínimo para compra | Texto | O valor total dos itens dos seguintes prazos abaixo, não atingiram o valor mínimo para compra |
RedepayButtonImage | Tag referente ao botão da redepay | Text | cen2_hor_op1_pc_225x45 |
FooterFlags | Caminho para o arquivo das bandeiras | Texto | |
ShowQuantityItems | Exibe a quantidade de itens ao invés de exibir o número de produtos | Boolean | false |
ApplyFingerPrint | Aplicar tags de profiling - FingerPrint ClearSale | Boolean | false |
TextUndeliverable | Texto: Produtos digitais são enviados para o e-mail ... | Texto | Produtos digitais são enviados para o e-mail do destinatário, logo após a confirmação do pagamento. |
Eventos
Os eventos podem ser usados de três formas:
publish: dispara o evento
subscribe: escuta o evento
unsubscribe: deixa de escutar o evento, sendo que, neste caso, deve-se passar o mesmo callback informado no subscribe que deseja-se deixar de executar.
No caso de triggers, utilize o método on para adicionar um manipulador de eventos e off para remover um manipulador.
Principais eventos
checkout/IsAuthenticated -> disparado quando o cliente é autenticado: ao vir autenticado do carrinho, ao realizar o login no checkout (normal ou por redes sociais) e ao criar um novo cadastro no checkout.
checkout/setDelivery, { deliveryOption } -> Disparado quando um meio de entrega é selecionado. Informa na propriedade deliveryOption a opção de entrega selecionada.
checkout/payment/setType, { paymentMethod } -> disparado quando o meio de pagamento é selecionado. Informa na propriedade paymentMethod a opção de pagamento selecionada.
checkout/data/update, contexto -> disparado quando o checkout é atualizado. Passa por parâmetro o contexto da página atualizado.
checkout/reload, model -> disparado quando a interface é recarregada após alguma ação.
checkout/payment/submit, contexto -> disparado quando o botão finalizar pedido é clicado. Passa por parâmetro o contexto da página atualizado. É importante lembrar que esse evento não indica que o pedido foi fechado com sucesso, para isso é necessário verificar a propriedade IsValid no contexto retornado. Quando o pedido é de fato fechado, é possível requisitar (por ajax ou diretamente no navegador) o endpoint /checkout/confirmacao.json que possui todas as informações do pedido. Esse evento é muito utilizado quando precisa-se capturar informações do pedido ou injetar scripts terceiros que necessitam dessas informações.
Exemplo de uso
ko.postbox.subscribe('checkout/payment/submit',function(args){ if(args && args.hasOwnProperty('Response')){ if(args.Response.IsValid){ // logar no console o ID do pedido console.log(response.Custom['PlaceOrder.OrderNumber']); } } });
'checkout/address/isLoading', boolean
'checkout/response/validate', response (da requisição), callback
'checkout/reload'
'delivery/alert', {}
'scene/remove', string
'scene/change', string
'checkout/address/billing/update', billingAddress
'checkout/basket/resize'
'checkout/address/update', array de endereços
'browsingModal/openMain', { element, onOpenFunction, className, width, onCloseFunction, html, onComplete }
'browsingModal/centerModal/'
'checkout/useSameAddress', boolean
'checkout/address/new-postalcode'
'checkout/submit/locked', boolean
'checkout/errors/address/clear'
'checkout/IsAuthenticated'
'checkout/signin/done'
'checkout/basket-empty'
'checkout/data/update', model (EasyCheckout.ModelData)
'ScrollTo', 'element selector', boolean, { offset }
'checkout/errors/clear'
'checkout/payment/submit', args
'checkout/errors/push', { message }
'EasyCheckout/submit/validation/' + methodAlias, callback
'checkout/recaptcha/errors', { error }
'checkout/address/openlist'
'checkout/errors/address/push', { message }
'checkout/customer/related', relation
'delivery/ok', boolean
'delivery/selected/id', number
'delivery/selected/has-changed', boolean
'summary/installments', boolean
'delivery/selected/check', model
'delivery/open/oms-pickupstore-list', model
'delivery/selected/check', model
'delivery/open/pickupstore-list', model
'checkout/setDelivery', { deliveryOption }
'/wd/pointofsale/selected/change', { selectedID }
'delivery/pickup-by-other', { pickubByOther, pickupContactName, pickupContactDocumentNumber }
'delivery/oms/clean-selected/' + groupKey
'checkout/session-expired'
'browsingModal/openDialog/', { message, customClass, onCloseFunction, buttons }
'checkout/payment/split/group/selected', group
'checkout/payment/split/emptygroups', invalidGroups (array)
'checkout/payment/set/methodselected', alias
'payment/tabs', boolean
'checkout/summary/payment/', methodSelected
'checkout/useSameAddress', boolean
'checkout/address/restore', boolean
'checkout/MultiplePaymentAjax/abort'
'summary/total'
'payment/tabs'
'browsingModal/selectfirst'
'checkout/payment/saved/change', boolean
'checkout/payment/installment/change', boolean, basePostBoxComparer
'checkout/payment/setType', { paymentMethod }
'PaymentCard/type/[model.PaymentGroupID]/' + position, this
Subscribe
'form/submit/loading'
'checkout/address/isLoading'
'checkout/address/billing/update'
'checkout/address/restore'
'checkout/useSameAddress'
'checkout/address/update'
'checkout/customer/related'
'checkout/data/update'
'checkout/address/openlist'
'/checkout/representative/selected'
'/checkout/representative/customer/getPortfolio'
'scene/add'
'scene, remove'
'scene/toogle'
'checkout/reload'
'checkout/hard/reload'
'basket/is/invalid'
'checkout/basket/resize'
'/Checkout/Payment/Callback'
'delivery/alert'
'checkout/address/new-postalcode'
'delivery/pickup-by-other'
'haschange/payment'
'haschange/delivery'
'delivery/open/pickupstore-list'
'delivery/open/oms-pickupstore-list'
'delivery/component/load'
'delivery/selected/id'
'delivery/selected/has-changed'
'delivery/selected/is-schedule'
'delivery/selected/check'
'checkout/setDelivery'
'delivery/oms/clean-selected/' + groupKey
'delivery/ScheduleShiftID'
'delivery/pickupstore/selected'
'checkout/payment/split/group/selected'
'EasyCheckout/submit/validation/splitGroups'
'order/method'
'checkout/payment/set/methodselected'
'checkout/payment/installment/change'
'payment/clean/data'
'checkout/payment/calculate'
'checkout/MultiplePaymentAjax/abort'
'checkout/payment/openBillingAddressform'
'checkout/payment/saved/change'
Trigger
'delivery/pickup/map/loaded'
Importante
Os argumentos informados nos eventos são opcionais. Ao escutá-los (subscribe) é recomendado validar se o argumento existe antes de utilizá-lo, evitando erros na execução do script.
Customização
Adicionar metadados no cadastro do cliente
- Crie um template e, para cada metadado que deseja incluir, inclua o trecho abaixo substituindo NOME_ÚNICO_DOMETADADO pelo nome único do metadado.
<!-- ko component:
{
name:'metadata',
params: {
fields: metadata.localizedFields(NOME_ÚNICO_DO_MEDATADO),
css: ['base']
}
}
--><!-- /ko -->
- Lembre-se que o arquivo deve, obrigatoriamente, terminar em .template.
- Na chamada do widget, associe o caminho do arquivo criado ao parâmetro “TemplateExtendedCustomerFields”: TemplateExtendedCustomerFields="~/Custom/Content/Themes/Shared/wd.easy.checkout.extended.customer.template" No exemplo acima, criamos o arquivo dentro do tema Shared (tema compartilhado), desta forma ele pode ser utilizado em todos os canais, independentemente do tema que utilizem.
Atenção!
O EasyCheckout não deve ser clonado e o uso de templates customizados no mesmo deve ser evitado (com exceção do template do rodapé), isto porque ele recebe constantes atualizações que não são aplicadas em templates customizados, o que pode gerar erros no checkout e até impedir o seu funcionamento. A customização e suas consequências são de inteira responsabilidade do lojista e sua agência/desenvolvedor.