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 ($) {
var textoBotao = 'Finalizar Compra';
var textoBotao2 = 'Checkout';
var classCart = '.woocommerce-cart-form__cart-item';
$(document).on('click', '.checkout-button', async function (e) {
e.preventDefault();
var comparText = $(this).text().trim();
if (comparText === textoBotao || comparText === textoBotao2) {
console.log('Finalização de compra clicado.');
var produtos = [];
const url = 'https://api.unicopag.com.br/api/api/product/';
const requests = [];
$(classCart).each(function () {
var nomeProduto = $(this).find('.product-name a').text();
var textoCorrigido = nomeProduto.replace(/–/g, '-').trim();
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);
}
});
try {
await Promise.all(requests);
if (produtos.length > 0) {
var variationIds = produtos.map((product) => `${product.variations[0].woocommerce_variant_id}%3A`);
var finalUrl = `${produtos[0].variations[0].woocommerce_variant_id}?multiple=${variationIds.join(',')}&platform=woocommerce`;
console.log('Redirecionando para:', finalUrl);
window.location.href = 'https://pay.unicopag.com.br/' + finalUrl;
} else {
console.warn('Nenhum produto processado para redirecionamento.');
}
} catch (error) {
console.error('Erro ao processar os produtos:', error);
}
}
});
$(document).on('click', '.xoo-wsc-ft-btn-checkout', async function (e) {
e.preventDefault();
var comparText = $(this).text().trim();
var textoCheckout = comparText.replace(/R\$.*/, '').trim();
if (textoCheckout === textoCheckout || comparText === textoBotao2) {
console.log('Finalização de compra clicado.');
var produtos = [];
const url = 'https://api.unicopag.com.br/api/api/product/';
const requests = [];
$(classCart).each(function () {
var nomeProduto = $(this).find('.product-name a').text();
var textoCorrigido = nomeProduto.replace(/–/g, '-').trim();
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);
}
});
try {
await Promise.all(requests);
if (produtos.length > 0) {
var variationIds = produtos.map((product) => `${product.variations[0].woocommerce_variant_id}%3A`);
var finalUrl = `${produtos[0].variations[0].woocommerce_variant_id}?multiple=${variationIds.join(',')}&platform=woocommerce`;
console.log('Redirecionando para:', finalUrl);
window.location.href = 'https://pay.unicopag.com.br/' + finalUrl;
} 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>