Using the Google Places API - Jumpseller
Create a Javascript code that autocomplete and hides fields on the checkout of your store. Make the checkout process better!
Neste guia, irá aprender todas as configurações disponíveis para personalizar o processo de checkout no seu Painel de Administração: Configurações > Checkout.
Etapa | Descrição | Estrutura de URL |
---|---|---|
Informação | Informações de Contato e Endereço de Entrega | /v2/informação/sucesso/unique_token |
Envio | Método de Envio ou Seleção de Ponto de Recolha | /v2/envio/sucesso/unique_token |
Cobrança | Endereço de Cobrança e Informações | /v2/cobrança/sucesso/unique_token |
Pagamento | Seleção da Forma de Pagamento | /v2/checkout/pagamento/unique_token |
Processamento | Gateway de Pagamento Processar a transação | Externo URL |
Sucesso | Confirmação de Pagamento ou Instruções no caso de Pagamentos Manuais | /v2/checkout/sucesso/único_token |
Quando um cliente completa as Informações, Remessa, Faturação mas não a Etapa de Pagamento, o seu carrinho será considerado Abandonado após o tempo definido em “Prazo de validade para carrinhos”.
Se o cliente alcançou a etapa de Processamento, será criado um pedido no estado Pendente, o pedido será considerado abandonado se o cliente não completar o pagamento, se o pagamento for rejeitado, o pedido será considerado cancelado, não abandonado.
As políticas de retenção de dados são essenciais para garantir que os regulamentos de privacidade locais sejam cumpridos. Os dados do cliente serão removidos da sua loja após o período de tempo selecionado.
A política de Privacidade página legal pode incluir uma referência a esta configuração.
O que acontece quando um cliente clica em Adicionar ao carrinho. Escolher entre:
A venda cruzada é um dos métodos mais eficazes de marketing. Ofereça produtos relacionados ou complementares aos seus clientes.
Selecione os produtos que o cliente verá conforme recomendado na página do carrinho.
Automatize o seu processo de venda cruzada no seu carrinho e e-mails com base em padrões de compra em todas as sessões de vendas repetidas no nosso Plano Avançado.
Se alternado, os clientes que não atendam aos requisitos não poderão iniciar o Checkout.
A contagem de itens considerará todas as unidades de produtos adicionados ao carrinho.
As estimativas de envio são sempre exibidas no processo de Checkout, algumas lojas acham interessante exibir esses preços antes do início do checkout.
Uma calculadora será colocada no carrinho se a chave estiver ativada.
Quando alternado, o cliente receberá uma solicitação para o local. Se aceite, os campos de check-out do endereço serão preenchidos automaticamente com o local atual.
A versão atual do Checkout é 2. A versão anterior (1) é uma forma simplista que permite algumas modificações, principalmente através de Javascript. O Checkout 1 não receberá atualizações e não suportará Recolhas Locais.
As opções de design são limitadas a seleções de cores e um logotipo que ficará visível apenas no processo de checkout.
Adicione campos extras ao seu formulário de checkout. Eles podem ser opcionais ou obrigatórios.
Podem ser adicionados a qualquer uma das três secções: Informações de contato, Endereços de envio e cobrança ou Outros. Se um campo for adicionado às Informações de Envio, ele também será adicionado ao formulário de faturação. Estes são os tipos de campo:
Altere o estilo do texto para Negrito, Itálico e adicione links no texto ao criar os seus campos personalizados selecionando e passando o rato sobre o texto.
O uso dessas opções envolve um conhecimento sólido de Javascript. Se não está confiante sobre o que isso significa, obtenha uma visão geral de Design para Jumpseller.
O Jumpseller Biblioteca Javascript está incluído em todos os temas em todas as lojas, as funções mais usadas para o processo de checkout são:
Adicione um produto virtual existente se uma determinada condição for verdadeira no Checkout.
<script>
// Variáveis
var productId = 4482829 // O id do produto
var variant1 = 8769517 // Esta é a variante que irá para o carrinho.
// Função de Condições: Esta função retorna verdadeiro ou falso dependendo se as condições estão presentes ou não no checkout.
var conditions = function(){
return $("#payments_options input:checked").val() == "186648"; // Certa opção de pagamento é selecionada neste exemplo.
}
// Encontra produto_carrinho_id pesquisando o productId no carrinho. O Id do Carrinho do Produto é o ID da instância do produto que está no carrinho. Esta secção não deve mudar.
function find_order_product_id(cart_json) {
var id = null;
$.each(cart_json.products, function(i, order_product) {
if (order_product.product_id == productId) {
id = order_product.id;
}
});
return id; // devolver encomenda_produto.id se encontrada
}
// Função para adicionar produto ao carrinho (remove se previamente pressionado). Esta secção não deve mudar.
var addProduct = function(data) {
var order_product_id = find_order_product_id(data);
var variants = data.products.map(product => { return product.variant_id })
if(!variants.includes(parseInt(variant1))) {
Jumpseller.updateCart(order_product_id, 0); // nenhum custo de pagamento no pedido.
Jumpseller.addProductToCart(productId, 1, {
"Variant": variant1
})
}
}
// Função para remover o produto do carrinho. Esta secção não deve mudar.
var removeProduct = function(data) {
var order_product_id = find_order_product_id(data);
Jumpseller.updateCart(order_product_id, 0); // nenhum custo de pagamento no pedido.
}
// Função que verifica as condições e adiciona ou remove o produto virtual. Esta secção não deve mudar.
function productInCart(){
if(conditions()){
Jumpseller.getCart({callback: addProduct})
}else{
Jumpseller.getCart({callback: removeProduct })
}
}
// Aplica a função nas mudanças de condição e no carregamento da página. Esta parte pode mudar dependendo das condições.
$("#checkout").change(productInCart)
$(document).ready(productInCart)
</script>
Selecionador de data com algumas regras personalizadas: Remova uma lista de feriados, requer Bootsrap Datepicker.
<script>
const today = new Date() // Define Hoje
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1) // Define Amanhã
holidays = ["29/05/2020", "03/06/2020"] // Remover férias
$(document).ready(function() {
$("#custom_input_field").datepicker({
format: 'dd/mm/yyyy', // Escolhe o formato de data favorito.
weekStart: 1, // Semana começa nas segundas.
startDate: tomorrow,
language: "es", // Escolhe um idioma.
daysOfWeekDisabled: [0, 1], // Desativar domingos e segundas.
datesDisabled: holidays
});
});
</script>
Experimente grátis durante 14 dias. Não é necessário cartão de crédito.