Preço de Produto

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: (v14).

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.v14.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.

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

Configuração e montagem do componente:

Liquid

{% comment %} Configurações do Preço {% endcomment %}

{% comment %} Validação de desconto {% endcomment %}
{% if product.discount_rule != null and product.discount_rule.type == 'percentage' %}
  {% assign discount_amount = product.discount_rule.amount %}
{% endif %}

{% comment %} PIX {% endcomment %}
{% assign pix_discount = false %}
{% if current_shop.settings.pix_discount != blank %}
  {% assign pix_discount = current_shop.settings.pix_discount %}
{% endif %}

{% comment %} Boleto {% endcomment %}
{% assign slip_discount = false %}
{% if current_shop.settings.slip_discount != blank %}
  {% assign slip_discount = current_shop.settings.slip_discount %}
{% endif %}

{% capture price_settings %}
  {
    "productId": {{ product.id }},
    "showInstallmentsWithoutInterest": true,
    "showInstallmentsWithInterest": false,
		"showCashback": true, 
    "mode": "short",
    "htmlTag": "h2",
    "percentDiscountOnPix": {{ pix_discount }},
    "percentDiscountOnSlip": {{ slip_discount }}
  }
{% endcapture %}

{% comment %} Montagem do componente {% endcomment %}
<div class="product-price"
  data-main-product-price
  data-was-processed="false" 
  data-sku="" 
  data-init-price='{{ price_settings }}'
  data-price="{{ product.price }}"
  data-discount-percent="{{ discount_amount | default: 0 }}"  
></div>

Confira foi feita a implementação do componente preço no Template1 acessando os arquivos:

• layout.liquid,
• vndaComponents.js,
• _price.scss