ProductCustomizations - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`price`	`Object`	✅	—	Objeto com os dados de preço do produto atual.
`buyButtonText`	`String`	❌	`'Comprar'`	Texto exibido no botão de compra.
`showQuantitySelector`	`Boolean`	❌	`false`	Exibe o seletor de quantidade antes do botão de compra.
`showInventoryCountdown`	`Boolean`	❌	`false`	Exibe o contador de estoque disponível.
`showShippingForm`	`Boolean`	❌	`false`	Exibe o formulário de cálculo de frete por CEP.
`showModalAfterPurchase`	`Boolean`	❌	`false`	Exibe um modal de confirmação após adicionar ao carrinho.
`showMobileFloatingButton`	`Boolean`	❌	`false`	Exibe um botão de compra flutuante em dispositivos móveis.
`cartType`	`String`	❌	`'suspended'`	Tipo de carrinho após o clique. Valores: `'suspended'` ou `'side_cart'`.
`variationsStyle`	`String`	❌	`'list'`	Estilo de exibição das variações de SKU. Valores: `'list'` ou `'buttons'`.
`cashbacks`	`Array`	❌	`[]`	Lista de cashbacks ativos da loja para exibição junto ao produto.

Mixins utilizados

Mixin	Finalidade
`productMixin`	Acesso ao produto atual, SKU selecionado e estado do carrinho.
`cashbackMixin`	Cálculo e validação de cashback para o SKU selecionado.