SKUs Dinâmicos na sua Loja Shopify.
No mundo do e-commerce, oferecer uma experiência clara ao utilizador clara e informativa é fundamental. Garantir que os clientes tenham acesso fácil às informações do seu produto primeiro, como o SKU (Stock Keeping Unit).
Neste artigo, vamos apresentar uma solução como pode exibir dinamicamente os SKUs para cada variante de produto, seja cor, material, texturas ou tamanhos na sua loja Shopify.
Porque devo apresentar o SKUs?
SKUs são essenciais para a gestão de inventário, mas também podem ser uma ferramenta valiosa para os clientes. Facilmente podem identificar variantes específicas de um produto, o que é especialmente útil em lojas com muitas opções de tamanho, cor ou estilo.
Implementando SKUs dinâmicos no Shopify.
Compreender a estrutura do Shopify:
Antes de começar, é importante compreender que o Shopify usa uma linguagem de template chamada Liquid, além de HTML, CSS e JavaScript. Para este projeto, vamos ter de editar o código Liquid e adicionar um script JavaScript.
- Localizar o página template de produto correta:
O primeiro passo é aceder ao painel de administrador do Shopify, consulta as suas permissões com o administrador do projeto, por seguinte deve ir para “Loja Online” > “Temas”. Encontre o tema que está a usar e clique em “Ações” > “Editar código”. Deve modificar o arquivo `product-template.liquid` ou um template similar do seu tema.
Testado em vários temas Shopify.
2. Atualizar com o código Liquid:
Na página de template, inclua o código Liquid que vai apresentar todos os SKUs de forma oculta. Utilize o atributo `data` attributes para armazenar as informações que serão utilizadas posteriormente pelo JavaScript.
Get Tiago ib Machado’s stories in your inbox
Join Medium for free to get updates from this writer.
Procure no seu template onde as opções de variante do produto são geradas (por exemplo, dropdowns ou botões de opção para escolher cor, tamanho, etc.). Por norma está em algum lugar dentro de um loop {% for variant in product.variants %}.
<div id=”variant-skus” style=”display:none;”>
{% for variant in product.variants %}
<span data-variant-id=”{{ variant.id }}” data-variant-sku=”{{ variant.sku }}”></span>
{% endfor %}
</div>
3. Criar um Elemento para Exibir o SKU**:
Adicione um elemento HTML na página do produto onde o SKU será exibido.
<div id=”product-sku”>SKU: <span id=”current-sku”></span></div>
4. Atualizar com o Script JavaScript:
No final do arquivo de template “main-product.liquid”, antes da tag </section> insira um script JavaScript. Este script deve detectar quando uma variante é selecionada e atualizar o elemento HTML com o SKU correspondente.
<script>
document.addEventListener(‘DOMContentLoaded’, function() {updateSelectedSku();
document.querySelectorAll(‘[name=”id”]’).forEach((selectElement) => {selectElement.addEventListener(‘change’, updateSelectedSku);
});
function updateSelectedSku() {
var selectedVariantId = document.querySelector(‘[name=”id”]’).value;
var selectedSku = document.querySelector(`#variant-skus [data-variant-id=”${selectedVariantId}”]`).getAttribute(‘data-variant-sku’);
document.getElementById(‘current-sku’).innerText = selectedSku;
}
});
</script>
5. Testar:
Após adicionar o código, teste a funcionalidade na sua loja. Verifique se o SKU está sendo atualizado corretamente quando diferentes variantes são selecionadas.
Notas:
Tenha em mente que pode ter de ajustar este código para corresponder à estrutura do seu tema Shopify. Além disso, realize um backup do seu tema antes de fazer alterações no código.
Considere uma contribuição para apoiar o meu trabalho.
Siga o link para a plataforma Stripe contribuir aqui.
Qualquer questão ou ajuda no desenvolvimento de lojas shopify, entre em contacto através de info@tiagoibmachado.pt.
X/Twitter: https://twitter.com/ibtiago
