Preço de Produto
Como adicionar e gerenciar o componente Preço de Produto na sua loja.
O Preço de Produto é o componente de Vnda para visualização de preços e as forma de pagamento de um produto da vitrine. Com esse componente, o cliente pode visualizar a forma de pagamento com parcelas e descontos de pagamento à vista. Esse artigo contém as instruções de como utilizar e configurar o componente.
Demonstração do componente
Visualize como é o componente acessando o Preço do Produto Demo. Recomendamos utilizar a versão mais atualizada do componente: (
v9).
Implementação
O componente de Preço de Produto, já vem implementado nos templates da VNDA tanto nos blocos de produto quanto na página interna de produto. Caso você precise implementar o componente do zero, ou aplicar alguma alteração, atente-se aos seguintes pontos.
A chamada do componente de preço deve ser feita no aquivo layout.liquid (liquids\layout.liquid), da seguinte forma:
<script>
window.priceComponent = "{{ 'price.v9.js' | component_path }}"
</script>
Além disso, o arquivo vndaComponents.js (assets\javascripts\components\vndaComponents.js) possui a função PriceComponent, que é responsável pelo carregamento com componente de preço. Os Templates também contam com o arquivo \_price.scss (assets\sass\components\_price.scss), onde estão concentradas as configurações de estilo do componente.
Saiba mais sobre os arquivos em Organização dos arquivos.
Parâmetros do componente de preço
Os parâmetros definem as características do componente Preço de Produto. Veja na tabela abaixo os parâmetros e o que eles determinam no componente. Note que os parâmetros que possuem valores padrões estão sinalizados na coluna Default, e as opções de entrada que o parâmetro pode receber estão apresentados na coluna Tipos/Opções de entrada.
| Parâmetro | Descrição | Tipos/Opções de entrada | Default | Obrigatório |
|---|---|---|---|---|
productId | Código identificador (ID) do produto. | Do tipo integer | - | Sim |
showInstallmentsWithoutInterest | Define se o pagamento parcelado sem juros deve ser mostrado. | true ou false | Sim | |
showInstallmentsWithInterest | Define se o pagamento parcelado com juros deve ser mostrado. | true ou false | Sim | |
percentDiscountOnSlip | Define a porcentagem do desconto de pagamento por boleto bancário. | Do tipo integer | Sim | |
mode | Determina como o pagamento parcelado é apresentado. Ele pode ser apresentado de forma curta ( sort), média (medium) e longa (long). | short,medium oulong | long | Não |
htmlTag | Define qual tag HTML deve ser usada para mostrar o preço do produto. | Do tipo string | h2 | Não |
Métodos
O método update() é utilizado para renderizar o preço em elementos que foram adicionados na página depois do carregamento.
//Atualização de preços
window.Vnda.Component.Price.update();
Esse componente permite a atualização do preço por sku e id de produto. Essas atualizações são feitas através dos atributos data-sku, para atualizar na troca do sku do produto, e data-id, prar atualizar o preço por id's de produto.
Exemplo de implementação
Confira foi feita a implementação do componente preço no Template1 acessando os arquivos:
Updated 6 months ago