Preço de Produto

O Preço de Produto é o componente de Olist Ecommerce 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 Olist Ecommerce 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.

Parâmetro	Descrição	Tipos/Opções	Default	Obrigatório
`productId`	ID do produto.	`integer`	*	Sim
`showInstallmentsWithoutInterest`	Define se exibe parcelamento sem juros.	`true` ou `false`	-	Sim
`showInstallmentsWithInterest`	Define se exibe parcelamento com juros.	`true` ou `false`	-	Sim
`percentDiscountOnSlip`	Porcentagem de desconto no boleto.	`integer`	-	Sim
`percentDiscountOnPix`	Porcentagem de desconto via PIX.	`integer`	-	Sim
`mode`	Apresentação do parcelamento: `short`, `medium` ou `long`.	`short`, `medium` ou `long`	`long`	Não
`htmlTag`	Tag HTML para mostrar o preço.	`string`	`h2`	Não
`showCashback`	Define se o Cashback deve ser exibido.	`true` ou `false`	-	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

Configuração e montagem do componente:

{% 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: