Easy Checkout

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

Eventos

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'

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.