Skip to main content
O componente ProductCustomizations é o núcleo interativo da página de produto. Ele reúne a seleção de variações (SKU), customizações, seletor de quantidade, cálculo de frete, cashback e o botão de adicionar ao carrinho.

​
Uso

<product-customizations
  buy-button-text="Comprar agora"
  :show-quantity-selector="true"
  :show-shipping-form="true"
  :show-modal-after-purchase="false"
  :show-mobile-floating-button="true"
  cart-type="side_cart"
  variations-style="buttons"
  :cashbacks="{{ cashbacks | json_encode }}"
  :price="price"
/>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
priceObject✅—Objeto com os dados de preço do produto atual.
buyButtonTextString❌'Comprar'Texto exibido no botão de compra.
showQuantitySelectorBoolean❌falseExibe o seletor de quantidade antes do botão de compra.
showInventoryCountdownBoolean❌falseExibe o contador de estoque disponível.
showShippingFormBoolean❌falseExibe o formulário de cálculo de frete por CEP.
showModalAfterPurchaseBoolean❌falseExibe um modal de confirmação após adicionar ao carrinho.
showMobileFloatingButtonBoolean❌falseExibe um botão de compra flutuante em dispositivos móveis.
cartTypeString❌'suspended'Tipo de carrinho após o clique. Valores: 'suspended' ou 'side_cart'.
variationsStyleString❌'list'Estilo de exibição das variações de SKU. Valores: 'list' ou 'buttons'.
cashbacksArray❌[]Lista de cashbacks ativos da loja para exibição junto ao produto.

​
Mixins utilizados

MixinFinalidade
productMixinAcesso ao produto atual, SKU selecionado e estado do carrinho.
cashbackMixinCálculo e validação de cashback para o SKU selecionado.