Product Block

product_block define o card usado para exibir produtos em vitrines. Ele deve preservar seus elementos estruturais para que preço e atualizações do produto funcionem.

Arquivos obrigatórios

Arquivo	Obrigatório
_product_block.liquid	Sim.
_product_block.scss	Sim.
productBlock.js	Não; use apenas se houver comportamento personalizado.

Se houver JavaScript, exporte ProductBlock com init():

const ProductBlock = { init() {} };
export default ProductBlock;

.product-block { display: grid; gap: .75rem; }

O tipo exige schema válido e recebe component_configs e product no Liquid.

Uso por outros componentes

O Product Block é a implementação compartilhada do card de produto. Quando uma seção ou componente global precisa exibir produtos, reutilize o card selecionado em vez de copiar seu markup.

O componente que monta a vitrine mantém sua própria configuração em component_configs. A configuração do Product Block selecionado está em product_block_config e deve ser passada ao card como component_configs:

{% render 'partials/components/product_block',
  product: product,
  mobile: mobile,
  component_configs: product_block_config
%}

product é um produto individual. product_block_config contém as configurações que o lojista definiu para o Product Block selecionado: preserve-o ao passá-lo como component_configs na chamada acima. Ele não é um produto nem uma lista. Para um card exclusivo da sua seção, crie um auxiliar próprio e chame-o com {% partial 'card_produto', product: product, settings: component_configs.settings %}; nesse caso, não use o render do Product Block global. Para carregar produtos por tag e percorrê-los, leia Vitrines de produtos.

Contrato obrigatório no Liquid principal

O arquivo principal deve conter:

Elemento	Finalidade
Classe product-block	Identifica o card.
data-product-box	Identifica a caixa do produto.
data-update-price	Marca o slot em que o preço é atualizado.

Exemplo mínimo:

<div class="product-block" data-product-box="{{ product.id }}">
  <a href="{{ product.url }}">{{ product.name }}</a>
  <div class="price-wrapper">
    <div class="product-price" data-update-price="{{ product.id }}"></div>
  </div>
</div>

Opções de preço

Para tornar desconto, Pix, parcelas e ordem de preço configuráveis, leia component_configs.settings e emita todos estes atributos no container principal:

• data-product-block-show-discount;
• data-product-block-show-pix;
• data-product-block-show-installments;
• data-product-block-installments-type;
• data-product-block-price-order.

Use defaults seguros e CSS variables para cores, tamanhos, raio da imagem e alinhamento. Se decidir oferecer configuração de preço, os cinco atributos devem estar presentes.

Verificação

Teste o card com produto disponível, preço promocional, Pix, parcelas e produto indisponível. Verifique também atualização de preço e resultado mobile.