Variações do produto

Exibe as variações de um produto e suas disponibilidades, enviando informações das opções selecionadas a cada troca.

📘

tag: product_variations
componente: ProductVariationComponent
diretório: product.variations
template: wd.product.variations.template
jsHandler: ProductVariations

Exemplo de uso

{% capture jsoptions %}
    { 
        "productId":"{{ Product.ProductID }}"
    }
{% endcapture %}

{% product_variations(
  jsoptions:jsoptions,
  ShowAllVariations="false"
  ValidateAllVariations="false"
) %}

No exemplo acima, o parâmetro ShowAllVariations foi desabilitado para que as subvariações, caso existam, sejam exibidas somente após a variação pai ser selecionada.

Exemplo de exibição das variaçõesExemplo de exibição das variações

Exemplo de exibição das variações

Parâmetros

Os parâmetros são utilizados para configurar o widget. Veja aqui a lista dos parâmetros globais.

Nome

Descrição

Tipo

Valor padrão

ShowAllVariations

Mostrar todas as variações inicialmente

Boolean

true

SortBy

Ordenar variações

Lista de opções:
"metadata", "sku"

"metadata"

ValidateAllVariations

Validar todas as variações ao selecionar uma subvariação?

Boolean

true

Quando falso, o parâmetro ValidateAllVariations impede que a disponibilidade de todas as variações (primeiro nível) seja consultada ao selecionar uma subvariação. Já quando verdadeiro, sinaliza se alguma variação está indisponível para a subvariação selecionada.

Eventos

📘

Os eventos podem ser usados de três formas:
publish: dispara o evento
subscribe: escuta o evento
unsubscribe: deixa de escutar o evento, sendo que, neste caso, deve-se passar o mesmo callback informado no subscribe que deseja-se deixar de executar.

Publish

'/wd/buybutton/mustvalidated/' + productID, { mustValidated, show }
'/wd/buybutton/clearskuid/' + productID, {}
'/wd/product/variation/changed/' + productID, { widget, variationContent }
'/wd/product/variation/optionslist/init/' + productID, {}

Subscribe

'/wd/product/variation/selected/' + productID
'/wd/product/variation/error/' + productID
'/wd/buybutton/cleanerrors/' + productID

❗️

Importante:

Os argumentos informados nos eventos são opcionais. Ao escutá-los (subscribe) é recomendado validar se o argumento existe antes de utilizá-lo, evitando erros na execução do script.


Did this page help you?