/**
* Seletor de Quantidade Personalizado - APACAME Loja Tray
* Adaptado para o sistema de variações da loja
*/
(function() {
'use strict';
// Configurações
const config = {
minQuantity: 1,
maxQuantity: 100,
checkInterval: 500, // Verifica a cada 500ms se o input apareceu
maxAttempts: 20 // Tenta por 10 segundos
};
let attempts = 0;
let initialized = false;
/**
* Cria o HTML do seletor de quantidade
*/
function createQuantitySelector(currentValue) {
const value = parseInt(currentValue) || config.minQuantity;
return `
`;
}
/**
* Adiciona os estilos CSS
*/
function addStyles() {
const styleId = 'apacame-qty-styles';
if (document.getElementById(styleId)) return;
const styles = document.createElement('style');
styles.id = styleId;
styles.textContent = `
.apacame-qty-selector {
display: inline-flex;
align-items: center;
gap: 0;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background: #fff;
max-width: 140px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin: 10px 0;
}
.apacame-qty-btn {
background: #f5f5f5;
border: none;
padding: 12px 16px;
cursor: pointer;
transition: all 0.2s ease;
color: #333;
display: flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 46px;
font-size: 18px;
font-weight: bold;
}
.apacame-qty-btn:hover {
background: #e8e8e8;
color: #000;
}
.apacame-qty-btn:active {
background: #d0d0d0;
transform: scale(0.95);
}
.apacame-qty-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
background: #f5f5f5;
}
.apacame-qty-btn:disabled:hover {
background: #f5f5f5;
transform: none;
}
.apacame-qty-input {
border: none;
text-align: center;
width: 56px;
font-size: 16px;
font-weight: 600;
padding: 12px 8px;
-moz-appearance: textfield;
background: #fff;
color: #333;
}
.apacame-qty-input::-webkit-outer-spin-button,
.apacame-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.apacame-qty-input:focus {
outline: none;
background: #fafafa;
}
/* Esconde o input original se existir */
input[name="quantity"]:not(.apacame-qty-input) {
display: none !important;
}
/* Responsivo */
@media (max-width: 768px) {
.apacame-qty-selector {
max-width: 130px;
}
.apacame-qty-btn {
min-width: 38px;
height: 42px;
padding: 10px 14px;
}
.apacame-qty-input {
width: 50px;
font-size: 15px;
}
}
`;
document.head.appendChild(styles);
}
/**
* Atualiza a quantidade
*/
function updateQuantity(wrapper, newValue) {
const input = wrapper.querySelector('.apacame-qty-input');
const min = parseInt(input.getAttribute('min')) || config.minQuantity;
const max = parseInt(input.getAttribute('max')) || config.maxQuantity;
let value = parseInt(newValue) || min;
value = Math.max(min, Math.min(max, value));
input.value = value;
// Atualiza o input original se existir
const originalInput = document.querySelector('input[name="quantity"]:not(.apacame-qty-input)');
if (originalInput) {
originalInput.value = value;
const event = new Event('change', { bubbles: true });
originalInput.dispatchEvent(event);
}
updateButtonStates(wrapper);
return value;
}
/**
* Atualiza o estado dos botões
*/
function updateButtonStates(wrapper) {
const input = wrapper.querySelector('.apacame-qty-input');
const value = parseInt(input.value);
const min = parseInt(input.getAttribute('min')) || config.minQuantity;
const max = parseInt(input.getAttribute('max')) || config.maxQuantity;
const decreaseBtn = wrapper.querySelector('.apacame-qty-decrease');
const increaseBtn = wrapper.querySelector('.apacame-qty-increase');
if (decreaseBtn) {
decreaseBtn.disabled = value <= min;
}
if (increaseBtn) {
increaseBtn.disabled = value >= max;
}
}
/**
* Busca o local apropriado para inserir o seletor
*/
function findInsertionPoint() {
// Tenta encontrar vários possíveis locais
const selectors = [
'.product-page .buy-button',
'.buy-button',
'form[action*="carrinho_comprar"]',
'form[action*="cart"]',
'.product-price',
'.product-buy'
];
for (const selector of selectors) {
const element = document.querySelector(selector);
if (element) {
return element;
}
}
return null;
}
/**
* Inicializa o seletor de quantidade
*/
function initQuantitySelector() {
if (initialized) return;
// Adiciona os estilos
addStyles();
// Procura o ponto de inserção
const insertionPoint = findInsertionPoint();
if (!insertionPoint) {
console.log('APACAME: Ponto de inserção não encontrado ainda...');
attempts++;
if (attempts < config.maxAttempts) {
setTimeout(initQuantitySelector, config.checkInterval);
}
return;
}
// Verifica se já existe um seletor
if (document.querySelector('.apacame-qty-selector')) {
console.log('APACAME: Seletor já existe');
return;
}
// Cria o seletor
const selectorHTML = createQuantitySelector(1);
insertionPoint.insertAdjacentHTML('beforebegin', selectorHTML);
const wrapper = document.querySelector('.apacame-qty-selector');
if (!wrapper) return;
const input = wrapper.querySelector('.apacame-qty-input');
const decreaseBtn = wrapper.querySelector('.apacame-qty-decrease');
const increaseBtn = wrapper.querySelector('.apacame-qty-increase');
// Event listeners
decreaseBtn.addEventListener('click', function() {
const currentValue = parseInt(input.value);
updateQuantity(wrapper, currentValue - 1);
});
increaseBtn.addEventListener('click', function() {
const currentValue = parseInt(input.value);
updateQuantity(wrapper, currentValue + 1);
});
input.addEventListener('change', function() {
updateQuantity(wrapper, this.value);
});
input.addEventListener('input', function() {
updateQuantity(wrapper, this.value);
});
// Estado inicial
updateButtonStates(wrapper);
initialized = true;
console.log('APACAME: Seletor de quantidade inicializado!');
// Intercepta o botão de comprar para incluir a quantidade
interceptBuyButton(wrapper);
}
/**
* Intercepta o clique no botão de comprar
*/
function interceptBuyButton(wrapper) {
const buyButtons = document.querySelectorAll('a[onclick*="carrinho_comprar"], .buy-button a, a[href*="carrinho_comprar"]');
buyButtons.forEach(button => {
button.addEventListener('click', function(e) {
const input = wrapper.querySelector('.apacame-qty-input');
const quantity = input.value;
// Atualiza o href com a quantidade
let href = this.getAttribute('href') || '';
let onclick = this.getAttribute('onclick') || '';
if (href) {
// Adiciona ou atualiza o parâmetro de quantidade
if (href.includes('quantidade=')) {
href = href.replace(/quantidade=\d+/, 'quantidade=' + quantity);
} else {
const separator = href.includes('?') ? '&' : '?';
href += separator + 'quantidade=' + quantity;
}
this.setAttribute('href', href);
}
if (onclick) {
// Atualiza o onclick se tiver quantidade
if (onclick.includes('quantidade=')) {
onclick = onclick.replace(/quantidade=\d+/, 'quantidade=' + quantity);
}
this.setAttribute('onclick', onclick);
}
console.log('APACAME: Comprando ' + quantity + ' unidade(s)');
}, true);
});
}
// Observa mudanças no DOM (para quando aparecer o formulário de compra)
const observer = new MutationObserver(function(mutations) {
if (!initialized) {
initQuantitySelector();
}
});
// Inicia observação
observer.observe(document.body, {
childList: true,
subtree: true
});
// Tenta inicializar imediatamente
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initQuantitySelector);
} else {
initQuantitySelector();
}
// Também tenta após um pequeno delay
setTimeout(initQuantitySelector, 1000);
setTimeout(initQuantitySelector, 2000);
})();
Banner de Privacidade
Nós usamos cookies para garantir que você tenha a melhor experiência em nosso site. Ao continuar, você concorda com nossa
Política de Privacidade.