​
Criando um Componente para Exibir o Valor Restante para Frete Grátis

Este guia ensina como criar um componente Vue.js que exibe no carrinho o valor restante para o cliente obter frete grátis, incentivando mais compras.

​
Criando um Novo Componente

  1. Acesse o Diretório de Componentes

    • No menu lateral, navegue até o diretório Components.

  2. Adicionar um Novo Componente

    • Clique em Adicionar Components no topo do diretório.

  3. Escolha o Tipo de Componente

    • Selecione Vue.

  4. Nomeie o Arquivo

    • Use a convenção PascalCase (ex.: MeuComponente.vue).

  5. Finalize a Criação

    • Clique em Criar Arquivo.

​
Estrutura do Componente

O componente será composto por três partes principais:

  1. Template: Define a estrutura HTML que será exibida no front-end.
  2. Script: Contém a lógica de cálculo para determinar o valor restante para o frete grátis.
  3. Style: Estiliza o componente para se integrar visualmente ao tema da loja.

​
Código do Componente

<template>
    <div>
        Insira mais <span class="missing-value">{{ $formatMoney(valueToGetFreeShipment) }}</span> em produtos para ganhar <strong>FRETE GRÁTIS</strong>.
    </div>
</template>

<script>
    export default {
        props: {
            cartValue: {
                type: String,
                required: true
            }
        },
        computed: {
            valueToGetFreeShipment() {
                // Localiza o valor mínimo de frete grátis para SP
                const freeShipmentMinValue = window.merchant.shipping.find(
                    (value) => value.uf === 'SP'
                )?.min;

                // Converte o valor do carrinho para número
                const cartValue = parseFloat(this.cartValue.replace(/[^\d,'-]/g, '').replace(',', '.'));

                // Retorna a diferença para alcançar o frete grátis
                return freeShipmentMinValue - cartValue;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .holder-text {
        padding: 0 35px;
    }

    .missing-value {
        color: var(--color-general-primary);
        font-weight: var(--font-bold);
    }
</style>

​
Explicação do Código

​
Template

Define a interface visual com destaque para o valor restante.

​
Script

Implementa a lógica para calcular o valor restante com base no carrinho.

​
Style

Adiciona estilos personalizados e isolados.

Dicas:

  • Certifique-se de que window.merchant.shipping contém os valores corretos.
  • Teste o componente em diferentes estados do carrinho.

Atenção:

  • Valide o formato de cartValue para evitar erros.
  • Certifique-se de que window.merchant.shipping está carregado antes do uso.

​
Adicionando o componente no carrinho

No sidebar lateral abra o arquivo components > SideCart.vue . Adicione a linha, após a ação realiza clique em Salvar, e para visualizar a prévia basta clicar em ‘Ver Prévia’ no canto superior direito. Caso esteja tudo OK, pode ser realizado a publicação.

<free-shipping :cart-value="cartValue"></free-shipping>

Ao acessar a sua loja, o resultado será: