Documentação: CST - Calculador de Frete PDP

Este guia explica como instalar e configurar o Calculador de Frete PDP (ViaCEP + Shopify AJAX) no seu tema.

1. Instalação do Snippet e Seção

Certifique-se de que os seguintes arquivos foram criados no seu tema:

• sections/cst-calculador-frete-pdp.liquid (Para uso como seção independente)
• snippets/cst-shipping-calculator.liquid (Lógica central para uso em blocos)

2. Integração no Main Product (Habilitar como Bloco)

Para que o calculador apareça na lista de blocos da página de produto (conforme o print), você deve seguir estes dois passos no arquivo sections/main-product.liquid:

Passo A: Adicionar o código de renderização

Procure pelo loop de blocos (geralmente dentro de um {%- case block.type -%}) e adicione este trecho:

{%- when 'cst_shipping_calculator' -%}
  {% render 'cst-shipping-calculator', block: block %}

Passo B: Adicionar o esquema JSON

Vá até o final do arquivo sections/main-product.liquid, localize a parte de "blocks": [ no {% schema %} e insira o seguinte JSON na lista:

{
  "type": "cst_shipping_calculator",
  "name": "CST - Calculador de Frete",
  "limit": 1,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Título",
      "default": "Calcule o Frete"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Texto do Botão",
      "default": "Calcular"
    },
    {
      "type": "text",
      "id": "error_message",
      "label": "Mensagem de Erro",
      "default": "CEP inválido. Tente novamente."
    },
    {
      "type": "color",
      "id": "accent_color",
      "label": "Cor do Botão",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Cor do Texto do Botão",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "input_border_color",
      "label": "Cor da Borda do Input",
      "default": "#e0e0e0"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Cor do Texto",
      "default": "#121212"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Cor de Fundo",
      "default": "#ffffff"
    }
  ]
}

3. Configuração no Editor de Temas

1. Navegue até a Página de Produto no Customizador de Temas.
2. Na seção Informações do Produto, clique em Adicionar bloco.
3. Selecione CST - Calculador de Frete.
4. Ajuste as cores, títulos e posicione-o onde desejar (ex: logo abaixo do preço ou dos botões de compra).

4. Funcionalidades Técnicas

• Integração ViaCEP: O CEP é validado e a UF (Estado) é extraída automaticamente para garantir cálculos precisos no Shopify.
• Não altera o carrinho: O produto é adicionado temporariamente para cálculo e removido/restaurado imediatamente após, sem que o cliente perceba.
• Design Minimalista: Sem bordas ou cantos arredondados, adaptando-se a qualquer layout moderno.