Onde o widget aparece na página do produto

Por padrão, o widget da Bundlex é exibido logo acima do botão Adicionar ao carrinho na página do produto. Se esse local não funcionar bem com o seu tema, há duas maneiras de movê-lo: um seletor de posicionamento personalizado na incorporação do app ou uma âncora do construtor de páginas. Este artigo explica onde o widget é inserido e como a Bundlex escolhe entre essas opções.

A posição padrão

Quando nenhuma substituição de posicionamento corresponde, a Bundlex insere o widget antes do contêiner detectado do formulário do produto na área de compra. A posição exata em relação aos controles de variante e quantidade do tema depende do tema. Na prática, isso significa que os cartões da oferta aparecem acima do botão Adicionar ao carrinho, onde a maioria dos compradores espera ver uma oferta por quantidade ou pacote.

Essa posição padrão depende da detecção automática do formulário do produto pela Bundlex. A maioria dos temas é detectada automaticamente. Se o seu não for, o widget não conseguirá se conectar ao botão Adicionar ao carrinho de forma confiável. Uma âncora de posicionamento, sozinha, não corrige um formulário do produto ausente ou incorreto. Peça ao suporte para verificar também a detecção do formulário.

A cadeia de prioridade do posicionamento

Para a entrega pela incorporação do app, a Bundlex verifica os destinos de posicionamento em uma ordem fixa e usa o primeiro que encontra. Os itens mais acima na lista têm prioridade sobre os itens abaixo.

1. Seletor de posicionamento personalizado, maior prioridade. Um seletor CSS definido na incorporação do app da Bundlex. Quando ele está configurado e corresponde a um elemento, o widget é inserido diretamente depois desse elemento, e nada abaixo dele nesta lista é usado.
2. Âncora do construtor de páginas (data-bundlex-widget). Um elemento HTML com o atributo data-bundlex-widget que você adiciona à página. O widget é inserido dentro da primeira âncora correspondente. Essa opção é usada quando nenhum destino de posicionamento personalizado é encontrado.
3. Posição padrão antes do formulário do produto, menor prioridade. O posicionamento automático descrito acima. Ele é usado quando nenhuma das substituições fornece um destino correspondente.

Como a cadeia para na primeira correspondência, um destino de posicionamento personalizado correspondente substitui tanto a âncora quanto a posição padrão, e uma âncora correspondente substitui a posição padrão. Se um seletor deixar de corresponder após uma alteração no tema, a Bundlex poderá usar uma posição de menor prioridade.

Opção 1: o seletor de posicionamento personalizado, incorporação do app

Use um seletor de posicionamento personalizado quando precisar manter a entrega pela incorporação do app e posicionar o widget depois de um elemento específico da página. Se você não souber qual seletor usar, peça ajuda ao suporte da Bundlex. Teste primeiro em um tema de rascunho.

Você o configura na incorporação do app da Bundlex:

1. No admin da Shopify, acesse Loja virtual e clique em Editar tema.
2. Abra Incorporações de apps e encontre Bundlex Bundles.
3. Ative Mostrar configurações avançadas e insira um seletor CSS no campo Seletor de posicionamento personalizado.
4. Salve o tema.

O widget é inserido logo depois do elemento correspondente ao seu seletor. Se não tiver certeza de qual seletor usar, o suporte da Bundlex poderá ajudar você a encontrar um. As configurações avançadas também exibem campos para o formulário do produto, o botão Adicionar ao carrinho e os seletores de quantidade, usados para corrigir a detecção automática em temas personalizados, não para posicionar o widget.

Opção 2: uma âncora do construtor de páginas

Se você cria páginas de produto com um construtor visual, como GemPages, PageFly ou Shogun, normalmente quer inserir o widget em um local específico do layout. Para isso, adicione um bloco de HTML personalizado ou de código onde deseja o widget e coloque dentro dele um elemento vazio com o atributo data-bundlex-widget:

<div data-bundlex-widget></div>

Você não precisa digitar isso manualmente: abra a aba Avançado do editor de pacotes e expanda Usando um construtor de páginas?. Escolha Copiar e cole o trecho na sua página.

A Bundlex preenche a primeira âncora correspondente com o widget. Você não precisa de um trecho diferente para cada pacote. A âncora controla apenas a posição. A Bundlex continua escolhendo qual pacote publicado exibir com base no produto.

Somente a primeira âncora correspondente tem prioridade

Se houver mais de um elemento data-bundlex-widget na página, a Bundlex usará somente o primeiro na ordem do DOM. Isso é importante quando a vitrine duplica conteúdo, por exemplo, em uma janela de visualização rápida ou em um carrinho lateral que repete a marcação do produto. Coloque a âncora somente na área em que você realmente quer o widget, para que a primeira correspondência seja a correta.

Quando usar o bloco de app

A Bundlex também oferece um bloco de app do tema para a página do produto, que é uma forma separada de entregar o widget pela incorporação do app. Use o bloco de app quando quiser inserir o widget em uma posição específica usando o recurso de arrastar e soltar do editor de temas, sem escrever um seletor CSS ou editar a marcação da página:

1. No editor de temas, abra um modelo de produto.
2. Clique em Adicionar bloco na seção em que deseja o widget.
3. Abra a aba Apps, escolha Bundlex Bundles e arraste o bloco para a posição exata desejada.
4. Salve o tema.

O bloco posiciona o widget onde você o soltar na seção, sendo uma boa opção intermediária entre a posição padrão automática e um seletor escrito manualmente. O bloco ignora o seletor de posicionamento personalizado e a âncora do construtor de páginas da incorporação. Use um único método de entrega na página do produto: executar a incorporação e o bloco ao mesmo tempo pode fazer com que a posição e as configurações dependam de qual deles for inicializado primeiro.

Teste a alteração primeiro em um tema de rascunho. Antes de desativar uma incorporação que funciona nesse rascunho, verifique se o bloco está dentro de uma seção exibida no modelo real do produto. Recarregue a página do produto imediatamente depois da troca. Se o widget desaparecer, ative a incorporação novamente. Para descontos com brindes, prefira uma posição que mantenha a incorporação e a limpeza dos brindes na página do carrinho. Consulte incorporação versus bloco.

Independentemente da posição escolhida, o widget só é exibido quando a incorporação do app, ou o bloco, está ativado e um pacote publicado corresponde ao produto. Se o widget não aparecer, confirme esses dois pontos antes de ajustar a posição.

Páginas de destino: o bloco "Bundlex Bundles featured"

Os métodos acima se aplicam às páginas de produto. Em uma página comum do Shopify, qualquer URL /pages/, como uma página de destino criada para uma campanha, o widget não consegue se conectar sozinho, e o HTML personalizado também não o carregará.

Em vez disso, adicione a seção Produto em destaque do seu tema e coloque o bloco Bundlex Bundles featured dentro dela. A seção do tema fornece o botão Adicionar ao carrinho, e o bloco adiciona o widget, da mesma forma que funciona na página inicial:

1. No admin da Shopify, acesse Loja virtual e clique em Editar tema.
2. No menu suspenso de modelos na parte superior, selecione Páginas e escolha o modelo usado pela sua página de destino.
3. Clique em Adicionar seção e escolha a seção Produto em destaque do seu tema. Em seguida, selecione o produto cujo pacote você quer exibir.
4. Dentro dessa seção, clique em Adicionar bloco, abra a aba Apps e escolha Bundlex Bundles featured.
5. Nas configurações do bloco em destaque, defina Produto como o mesmo produto da seção ou mantenha a conexão Produto da seção.
6. Salve o tema.

O bloco sozinho, fora de uma seção Produto em destaque, não encontra um formulário de Adicionar ao carrinho e não exibe nada. Quando colocado dentro da seção, ele mostra o produto com suas ofertas de pacotes publicadas, e os compradores podem adicioná-lo ao carrinho diretamente pela página de destino. A mesma configuração também funciona na página inicial.

Referência rápida

Método de posicionamento	Onde configurar	Prioridade
Seletor de posicionamento personalizado	Incorporações de apps > Bundlex Bundles > Mostrar configurações avançadas	Mais alta
data-bundlex-widget âncora	Marcação da página ou construtor de páginas	Usado quando nenhum destino personalizado corresponde
Padrão (antes do formulário do produto)	Automático	Usado quando nenhuma substituição corresponde