Easy Checkout

📘

tag: 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 (veja aqui como cadastrar um metadado).
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. Veja aqui a lista dos parâmetros globais.

Nome

Descrição

Tipo

Valor padrão

mode

Modo de exibição

Lista de opções:
"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

Text

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

true

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?

Lista de opções:
"onPayment" e "onDelivery"

onPayment

TemplateConfirmation

Template: Confirmação.

Texto

Templates/layout-confirmation.template

TemplateConfirmationRevamped

Template: Confirmação versão 2.0

Texto

TemplateEbit

Banner Ebit

Texto

TemplatePayment

Template: Pagamento.

Texto

Templates/layout-payment.template

TemplateTerms

Template: Termos

Texto

TemplateExtendedCustomerFields

Campos estendidos de cliente

Texto

TemplateFooter

Template: Rodapé

Texto

Templates/footer.template

FooterPhone

Telefone para o rodapé

Texto

(99) 9999-9999

ShowSearchAddressField

Exibe campo de pesquisar endereços

Boolean

false

TextSearchAddress

Mensagem: Pesquisar endereços

Texto

Pesquisar endereços...

TextCompanyDeliveryStep

Mensagem: Defina a empresa destino

Texto

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

Texto

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

  1. Crie um novo template e, para cada metadado que deseja incluir, inclua o trecho abaixo substituindo NOME_ÚNICO_DO_METADADO 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.

  1. 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.


Did this page help you?