Redirecionamento de Carrinho no WooCommerce para o Checkout Unicopag
Introdução
Neste tutorial, vamos criar um script para redirecionar o carrinho de uma loja WooCommerce para o checkout da Unicopag com os dados de produtos preenchidos automaticamente. O objetivo é criar um script dinâmico que funcione tanto para lojas com múltiplos produtos no carrinho quanto para lojas com apenas um produto.
Cenários de Uso
Carrinho com múltiplos produtos: O script precisa identificar todos os itens no carrinho e redirecionar para o checkout Unicopag com os detalhes dos produtos.
Compra de um único produto: O script será simplificado para identificar apenas um produto e redirecionar diretamente para o checkout.
Parâmetros
O script foi criado para aceitar parâmetros dinâmicos, já que cada loja WooCommerce pode ter um tema diferente, com variações nos botões e classes HTML:
textoBotao: O texto exibido no botão de finalização de compra, usado para capturar o clique.
classCart: A classe HTML que identifica os itens no carrinho de compras. Usado apenas quando há múltiplos produtos.
classNameProduct: A classe HTML que identifica o nome do produto.
Estrutura do Script
O script usa jQuery para manipular o DOM e capturar os eventos de clique, além de realizar requisições AJAX para a API da Unicopag com base nos produtos encontrados no carrinho.
Esse script sera colocado na raiz do template usado da pagina. ex: header.php caso nao exista header usar o footer.php.
Exemplo do script:
Nesse tutorial será necessário saber o ID de sua loja WooCommerce, número de 4 dígitos
Carrinho com múltiplos produtos:
Carrinho com múltiplos produtos:
<script type="text/javascript">
jQuery(document).ready(function ($) {
const textoBotao = 'Finalizar Compra'; //Verificar! Página de carrinho: Mudar o nome do botão de acordo com o botão da loja
const textoBotao2 = 'Checkout'; //Verificar! Drawer: Mudar o nome do botão de acordo com o botão da loja
const classCart = '.woocommerce-cart-form__cart-item'; //Verificar! Mudar de acordo com a classe do carrinho. Inspecionar o carrinho para saber qual a classe, colocar o que tiver antes do espaço.
const urlVariant = 'https://api.unicopag.com.br/api/api/variant/';
const urlProduct = 'https://api.unicopag.com.br/api/api/product/';
$(document).on('click', '.checkout-button, .wc-forward, .elementor-button--checkout', async function (e) { //Verificar! ".checkout-button", ver se a classe do botão de finalizar compra e mudar de acordo com o que é mostrado, colocar o que tiver antes do espaço.
e.preventDefault();
const comparText = $(this).text().trim();
if (comparText !== textoBotao && comparText !== textoBotao2) {
return;
}
console.log('Finalização de compra clicado.');
const produtos = [];
const requests = [];
$(classCart).each(function () {
// 1) extrai o href do link do produto
const href = $(this).find('.product-name a').attr('href') || '';
// 2) pega apenas os dígitos após "#woosq-"
const match = href.match(/#woosq-(\d+)$/);
const variationId = match ? match[1] : null;
const nomeProduto = $(this).find('.product-name a').text().trim();
const quantidade = parseInt($(this).find('.quantity input.qty').val(), 10) || 1;
console.log('nomeProduto::.', nomeProduto);
console.log('variationId::.', variationId);
// escolhe endpoint: variant se tiver productId, senão product
const endpoint = urlVariant;
const payload = {
variant_id: parseInt(variationId, 10),
store_id: 3680 //Verificar! Mudar o ID de acordo com o da loja
title: nomeProduto,
quantity: quantidade,
};
const fetchRequest = fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
})
.then(response => {
if (!response.ok) {
throw new Error(Erro HTTP! Status: ${response.status});
}
return response.json();
})
.then(data => {
produtos.push(data);
})
.catch(error => {
console.error('Erro na requisição:', error);
});
requests.push(fetchRequest);
});
try {
await Promise.all(requests);
if (produtos.length > 0) {
const variationIds = produtos.map(p => ${p.variations[0].woocommerce_variant_id}%3A);
const firstId = produtos[0].variations[0].woocommerce_variant_id;
const finalUrl = ${firstId}?multiple=${variationIds.join(',')}&platform=woocommerce;
console.log('Redirecionando para:', finalUrl);
window.location.href = 'https://seguro.mixpontoloja.com/' + finalUrl; // Verificar! Fazer o domínio personalizado antes de integrar e mudar de forma manual no script a parte https://seguro.loja.com/
} else {
console.warn('Nenhum produto processado para redirecionamento.');
}
} catch (error) {
console.error('Erro ao processar os produtos:', error);
}
});
});
</script>
Compra de um único produto:
Compra de um único produto:
<script type="text/javascript">
jQuery(document).ready(function($) {
// Defina o texto do botão que deseja capturar
var textoBotao = 'Comprar produto';
var classCart = '.elementor-widget-container';
// Captura todos os botões que tenham o texto "Continuar" (ou qualquer outro texto que desejar)
$('button, a').each(function() {
if ($(this).text().trim() === textoBotao) {
// Adiciona o evento de clique ao botão
$(this).on('click', function(event) {
event.preventDefault(); // Impede o comportamento padrão (opcional)
console.log('Finalização de compra clicado.');
var produtos = [];
var requests = [];
setTimeout(function() {
// Seleciona todos os produtos no carrinho
var nomeProduto = $('.elementor-element-537e635').find('h1.product_title.entry-title.wd-entities-title').text().trim();
var textoCorrigido = nomeProduto.replace(/–/g, '-');
console.log('Nome do produto:', nomeProduto);
if (textoCorrigido) {
const fetchRequest = fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: textoCorrigido,
store_id: idLoja,
}),
})
.then((response) => {
if (!response.ok) {
throw new Error(`Erro HTTP! Status: ${response.status}`);
}
return response.json();
})
.then((data) => {
produtos.push(data);
})
.catch((error) => {
console.error('Erro na requisição:', error);
});
requests.push(fetchRequest);
}
setTimeout(function() {
// Aguarda todas as requisições AJAX serem concluídas
$.when.apply($, requests).then(function() {
console.log('Produtos recebidos:', produtos);
// Mapeia as variações de cada produto
var variationIds = produtos.map((product, index) => `${product.variations[0].woocommerce_variant_id}%3A`);
console.log('Produtos variationIds:', variationIds);
// Monta a URL final com base nas variações
var finalUrl = `${produtos[0].variations[0].woocommerce_variant_id}?multiple=${variationIds.join(',')}&platform=woocommerce`;
console.log('URL Final:', finalUrl);
// Redireciona para a página de pagamento
window.location.href = 'https://pay.unicopag.com.br/' + finalUrl;
});
}, 1000);
}, 1000);
});
}
});
});
</script>