A Zapiet - Opções de Produto oferece dois blocos de aplicativo: o bloco de aplicativo de opções de produto para a página de produto e o bloco de aplicativo de página de 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.
Habilitar o bloco de aplicativo de opções de produto
O bloco de aplicativo de opções de produto permitirá que seus clientes selecionem opções nas páginas de produto da sua loja.
Em Zapiet - Opções de Produto, clique em Configurações.
Na seção Temas, selecione o tema que você deseja editar.
Recomendamos habilitar nosso aplicativo primeiro em um tema duplicado.
Na seção Bloco de aplicativo de opções de produto, clique em Habilitar.
Isso abrirá as configurações de Personalização no seu tema e habilitará o bloco de aplicativo.
Você pode alterar a posição do bloco de aplicativo 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.
Na seção Temas, selecione o tema que você deseja editar.
Recomendamos habilitar nosso aplicativo primeiro em um tema duplicado.
INa seção Bloco de aplicativo de página de carrinho, clique em Habilitar.
Isso abrirá as configurações de Personalização no seu tema e habilitará a incorporação do aplicativo.
Clique em Salvar.
Após habilitar a incorporação do aplicativo, você precisará editar o código no seu tema.
Edit your theme
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!