Os botões de quantidade +/- do tema não alteram a oferta selecionada

Se os botões de quantidade do seu tema não alterarem a oferta selecionada, primeiro verifique qual controle de quantidade seu desconto usa. Uma quantidade digitada sendo reduzida a um nível é diferente de um botão que nunca envia uma atualização ao widget.

Digitei 8, mas o carrinho recebeu 6

Na configuração usual sem o seletor de quantidade do Bundlex, o campo do tema navega entre os níveis configurados. Uma quantidade exata de um nível pode selecionar esse cartão, enquanto uma quantidade intermediária pode manter a oferta atual selecionada. Ao adicionar ao carrinho, é usada a quantidade dessa oferta. Digitar 8 com Comprar 6 selecionado não garante 8 itens.

Para permitir que os clientes escolham quantidades flexíveis, ative Seletor de quantidade na aba Complementos do desconto, quando disponível. Ele funciona em conjunto com assinaturas. Se estiver desativado, o painel mostrará o nome da configuração que o impede. Consulte configurações com as quais você não pode combiná-lo.

Quando o seletor do Bundlex está ativo, o campo do tema reflete o resultado dele, em vez de controlar uma segunda quantidade. Algumas lojas têm uma configuração separada de quantidade nativa habilitada pela equipe de suporte para níveis simples. Essa não é a configuração padrão. Consulte comportamento da quantidade do tema.

Se a seleção opcional de oferta estiver ativada e nenhuma oferta estiver selecionada, os controles do tema funcionarão normalmente e não navegarão pelos cartões de oferta. As verificações abaixo dizem respeito a uma oferta ativa na configuração de navegação entre níveis.

Como a sincronização deve funcionar

Há duas direções importantes:

• Da oferta para a quantidade: quando um cliente clica em uma oferta, por exemplo, Comprar 1, Comprar 2 ou Comprar 3, o widget define o campo de quantidade do tema como a quantidade dessa oferta. Isso depende de o Bundlex encontrar o campo de quantidade correto.
• Da quantidade para a oferta: quando um cliente altera a quantidade usando os botões +/- do tema ou digitando, o widget deve detectar o novo valor e selecionar a oferta cuja quantidade corresponda exatamente.

A segunda direção pode falhar quando o tema altera o campo sem disparar um evento ou quando o widget observa um campo de quantidade diferente. Um número fora dos níveis, por si só, não comprova um problema de evento nem garante que a oferta seja desmarcada.

Por que os botões +/- não atualizam a oferta

O widget escuta os eventos nativos change e input no campo de quantidade. Digitar normalmente dispara esses eventos, mas o botão +/- personalizado de um tema pode não dispará-los.

Muitos temas, porém, implementam os botões +/- definindo diretamente o valor do campo em JavaScript, por exemplo, input.value = newValue. Atribuir um valor dessa forma não dispara eventos change ou input. O número muda na tela, mas nenhum evento é disparado, então o widget nunca sabe que a quantidade mudou e a oferta selecionada permanece como estava.

Isso não é específico de nenhum framework. Qualquer atribuição programática de valor ignora os eventos. Somente uma interação real do usuário, como digitar, dispara esses eventos. Temas baseados no elemento personalizado <quantity-input> da Shopify, usado pelo Dawn, disparam um evento change depois de atualizar o valor. Por isso, esses temas funcionam imediatamente.

Como confirmar se essa é a causa

1. Abra as ferramentas de desenvolvedor do navegador, usando F12 ou Cmd+Option+I no Mac, e acesse a aba Console.
2. Clique em um botão +/- na página do produto.
3. Tente usar uma quantidade que corresponda exatamente a uma oferta disponível. Se o número mudar, mas a oferta selecionada não, peça ao desenvolvedor do tema para verificar se o botão dispara um evento change ou input no campo de quantidade que o Bundlex está observando.

Os temas que costumam apresentar esse problema usam botões +/- personalizados que definem o valor diretamente, em vez do componente web <quantity-input> da Shopify.

A solução: disparar um evento de alteração

Essa correção fica no tema, portanto é uma alteração rápida para quem mantém o código do seu tema. Peça ao desenvolvedor do tema para disparar um evento change logo depois que o manipulador de +/- definir o novo valor da quantidade:

input.dispatchEvent(new Event('change', { bubbles: true }));

Aqui, input é o elemento de entrada de quantidade que está sendo atualizado. Isso notifica os scripts que escutam esse evento, incluindo o Bundlex. Teste os botões de quantidade e o carrinho do tema depois da alteração.

O caso de entradas de quantidade duplicadas, barras de carrinho fixas

Alguns temas adicionam uma barra fixa ou persistente de "Adicionar ao carrinho" que duplica o formulário do produto, incluindo uma segunda entrada de quantidade. As duas entradas geralmente compartilham o mesmo name="quantity" e, às vezes, até o mesmo id. O seletor padrão do Bundlex, input[name="quantity"], pode então ser associado ao elemento errado, fazendo com que a oferta e a quantidade do formulário principal nunca fiquem alinhadas.

Como confirmar se há duplicatas

1. Abra as ferramentas do desenvolvedor e acesse a aba Console.
2. Execute: document.querySelectorAll('input[name="quantity"]').length
3. Se o resultado for maior que 1, sua página tem mais de uma entrada de quantidade.

A solução: um seletor de entrada de quantidade personalizado

Aponte o Bundlex somente para a entrada de quantidade do formulário principal, excluindo a barra fixa. Entre em contato com o suporte informando a URL do produto para obter uma correção com um novo seletor. O suporte pode configurá-lo nas configurações do widget da loja. Se precisar inspecionar um seletor legado já salvo na incorporação do app, ele está localizado em:

1. No admin da Shopify, abra o Editor de temas.
2. Acesse Incorporações de apps e encontre Bundlex Bundles.
3. Ative Mostrar configurações avançadas e defina o Seletor de entrada de quantidade como um seletor que direcione somente para a entrada de quantidade do formulário principal.

O seletor exato depende do seu tema. Dois exemplos que funcionam em alguns temas:

.product-form__item--submit input[name="quantity"]
form.shopify-product-form:not(#addtocart-sticky form) input[name="quantity"]

Se nenhum dos seletores funcionar no seu tema, compartilhe a URL da página do produto com o suporte para que o seletor correto possa ser identificado. Se o suporte tiver configurado uma substituição anteriormente, ela poderá ter prioridade sobre o campo do tema.

Quando entrar em contato com o suporte

Se você confirmou que os botões +/- alteram o valor sem disparar um evento, ou que existem entradas de quantidade duplicadas, e as soluções acima não resolveram o problema, entre em contato com o suporte informando a URL da página do produto. Também é útil incluir todas as mensagens [Bundlex] do console do navegador e o HTML do formulário do produto.