O Zapiet ‑ Opções de Produto oferece dois blocos de aplicativo: o bloco de opções de produto para a página de produto e o bloco de página do carrinho para a página de carrinho.

O bloco de aplicativo de opções de produto deve ser habilitado para que nosso aplicativo funcione corretamente.

O bloco de aplicativo de opções de carrinho é opcional e requer alterações adicionais no arquivo do tema para funcionar como esperado.

Requisitos

Para ativar o bloco de aplicativo, você precisa ter permissão do proprietário da loja para gerenciar aplicativos.
Para ativar o bloco de aplicativo, É necessário usar um tema da Loja Online 2.0. Temas legados não são suportados.

Ativar o bloco de aplicativo de opções de produto

O bloco de opções de produto permite que seus clientes selecionem opções nas páginas de produto da sua loja.

Em Zapiet ‑ Opções de Produto, clique em Configurações.
Clique em Temas.
Selecione o tema que deseja editar.
- Recomendamos ativar o nosso aplicativo em um tema duplicado primeiro.
Na seção Bloco de aplicativo de opções de produto, clique em Ativar.
Isso abrirá as configurações de Personalização do tema e ativará o bloco de aplicativo.
Ajuste a posição do bloco de acordo com as necessidades do seu negócio.
Clique em Salvar.

O bloco de aplicativo de opções de produto agora estará visível na sua loja. Antes de testar, certifique-se de ter criado tanto as opções quanto os conjuntos de opções.

Se você habilitou o bloco de aplicativo em um tema duplicado, publique o tema após testar, para que seus clientes possam selecionar opções de produto na sua loja.

Habilitar o bloco de aplicativo de página de carrinho

O bloco de aplicativo de página de carrinho permitirá que seus clientes façam alterações nas opções que selecionaram diretamente na página de carrinho.

Em Zapiet ‑ Opções de Produto, clique em Configurações.
Clique em Temas.
Selecione o tema que deseja editar.
- Recomendamos ativar o nosso aplicativo em um tema duplicado primeiro.
Na seção Bloco de aplicativos de opções de página do carrinho, clique em Ativar.
Isso abrirá as configurações de Personalização do tema e ativará a inserção do aplicativo.
Clique em Salvar.

Após ativar a inserção do aplicativo, será necessário editar o código do tema.

Editar o tema

Se você não se sentir à vontade para editar o código, entre em contato conosco pelo chat, e ficaremos felizes em ajudar!

Vá para Loja Online > Temas, expanda o menu ao lado do tema que deseja editar e clique em Editar código.
Abra o arquivo liquid da página de carrinho.
- Geralmente, os arquivos relacionados ao carrinho estão localizados em: templates (por exemplo, cart.liquid), sections (por exemplo, cart-template.liquid) ou snippets para trechos de código reutilizáveis relacionados ao carrinho (por exemplo, cart-item.liquid).

Procure por este trecho no código.

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}

Adicione esta linha de código abaixo para criar uma nova classe.

<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>

Abra o arquivo liquid para o carrinho suspenso.
- Procure nas sections ou snippets por arquivos que possam estar relacionados ao carrinho suspenso. Nomes de arquivos comuns incluem: cart-drawer.liquid, cart.liquid, drawer-cart.liquid, mini-cart.liquid.

Procure por este trecho no código.

{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="product-option">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{ property.last | split: '/' | last }}
</a>
{%- else -%}
{{ property.last }}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}

Adicione esta linha de código abaixo para criar uma nova classe.

<div class ="edit-cart-options-button-container" id="{{ item.id }}"> </div>

Clique em Salvar.

Agora, seus clientes poderão editar as opções que selecionaram diretamente na página de carrinho.

Se algo der errado e você não conseguir editar as opções selecionadas na página de carrinho, entre em contato conosco pelo chat!

Notes

Se estiver utilizando temas gratuitos da loja de temas da Shopify, geralmente é necessário adicionar o código na linha 159 do arquivo main-cart-item.liquid e na linha 206 do arquivo cart-drawer.liquid.

Limitações

Se sua loja tiver um botão de Adição Rápida, as opções de produto só aparecerão para produtos com variantes.
- Produtos sem variantes podem ser adicionados diretamente ao carrinho sem selecionar opções.
- Para evitar que os clientes ignorem as opções de produto, desative o botão Adição Rápida. Esta configuração é específica do tema—entre em contato com o desenvolvedor do tema para obter ajuda.